convert content to md

author: julieng <julien.gattelier@gmail.com> 2021-10-02 17:20:24 +0200
committer: SphinxKnight <SphinxKnight@users.noreply.github.com> 2021-10-02 17:30:20 +0200
commit: 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde (patch)
tree: 30a56efd3eff3a01bd1611e1840fdbbfacf544a4 /files/fr/web/api/element
parent: c05efa8d7ae464235cf83d7c0956e42dc6974103 (diff)
download: translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.gz
translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.bz2
translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.zip
73 files changed, 3571 insertions, 4630 deletions
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")}}
author	julieng <julien.gattelier@gmail.com>	2021-10-02 17:20:24 +0200
committer	SphinxKnight <SphinxKnight@users.noreply.github.com>	2021-10-02 17:30:20 +0200
commit	1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde (patch)
tree	30a56efd3eff3a01bd1611e1840fdbbfacf544a4 /files/fr/web/api/element
parent	c05efa8d7ae464235cf83d7c0956e42dc6974103 (diff)
download	translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.gz translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.bz2 translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.zip