UPDATE: Update translation of the HTML elements — 🛠 Priority work area (#500)

* UPDATE: Updating pages starting with A

* FIX: Update missing KS to html anchor

* Review HTML Element a

* Review HTML Element abbr

* Review HTML Element acronym

* Review HTML Element address

* Review HTML Element applet

* Review HTML Element area

* Review HTML Element article

* Review HTML Element aside

* Review HTML Element audio

* UPDATE: Updating pages wtarting with B

* Review HTML Element b

* Review HTML Element base

* Review HTML Element basefont

* Review HTML Element bdi

* Review HTML Element bdo

* Review HTML Element big

* Review HTML Element blink

* Review HTML Element blockquote

* Review HTML Element body

* Review HTML Element br

* Review HTML Element button

* Review HTML Element button - rm HTMLRef

* Review HTML Element button - lint link

* UPDATE: Updating pages starting with C

* UPDATE: Updating pages starting with D

* UPDATE: Refresh the reference page

* UPDATE: Updating pages starting with E

* Review HTML Element canvas

* Review HTML Element caption

* Review HTML Element center

* Review HTML Element cite

* UPDATE: Updating pages starting with F

* BCD: Update all updated pages with new BCD format

* FIX: add missing bracket

* Review - HTML element - code

* Review - HTML Element - col

* Review - HTML Element - colgroup

* Review - HTML Element - content

* Review - HTML Element - data

* Review - HTML Element - datalist

* Review - HTML Element - dd

* Review - HTML Element - del

* Review - HTML Element

* Review - HTML Element - dfn

* Review - HTML Element - dialog

* Review - HTML element - dir

* Review - HTML Element div

* Review - HTML Element - dl

* Review - HTML Element - dt

* Review - HTML Element - em

* Review - HTML Element - embed

* Review - HTML Element - fieldset

* Review - HTML Element - figcaption

* Review - HTML Element - figure

* Review - HTML Element - font

* Review - HTML Element - footer

* Review - HTML Element - form

* Review - HTML Element - frame

* Review - HTML Element - frameset

* Review updates since PR start - A

* Review updates since PR start - B

* Review updates since PR start - C

* Review updates since PR start - D

* Review updates since PR start - F

Co-authored-by: julieng <julien.gattelier@gmail.com>

1 files changed, 134 insertions, 141 deletions

diff --git a/files/fr/web/html/element/details/index.html b/files/fr/web/html/element/details/index.html
index 70797fa6b9..d9a30d8797 100644
--- a/files/fr/web/html/element/details/index.html
+++ b/files/fr/web/html/element/details/index.html
@@ -1,111 +1,154 @@
 ---
-title: <details>
+title: '<details> : l''élément de divulgation des détails'
 slug: Web/HTML/Element/details
 tags:
+  - Disclosure Box
+  - Disclosure Widget
   - Element
   - HTML
+  - HTML interactive elements
   - Reference
   - Web
+  - details
 translation_of: Web/HTML/Element/details
+browser-compat: html.elements.details
 ---
 <div>{{HTMLRef}}</div>
 
-<p>L'élément HTML <strong><code>&lt;details&gt;</code></strong> est utilisé comme un outil permettant de révéler une information. Un résumé ou un intitulé peuvent être fournis grâce à un élément {{HTMLElement("summary")}}.</p>
+<p class="summary">L'élément HTML <strong><code>&lt;details&gt;</code></strong> est utilisé comme un outil permettant de révéler une information. Un résumé ou un intitulé peuvent être fournis grâce à un élément <a href="/fr/docs/Web/HTML/Element/summary"><code>&lt;summary&gt;</code></a>.</p>
 
 <p>La plupart du temps, le contrôle utilisé pour cet élément est un triangle qui est tourné ou tordu afin d'indiquer si l'élément est révélé ou non. Si le premier élément fils de l'élément <code>&lt;details&gt;</code> est un élément <code>&lt;summary&gt;</code>, c'est le contenu de ce dernier qui est utilisé comme intitulé pour le contenu à révéler (l'intitulé est donc toujours visible).</p>
 
 <div>{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-standard")}}</div>
 
-<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>
+<div class="notecard note">
+  <p><b>Note :</b></p>
+  <p>L'utilisation courante d'un triangle qui tourne ou s'enroule pour représenter l'ouverture ou la fermeture du widget explique pourquoi on les appelle parfois « twisties » en anglais.</p>
+</div>
 
-<h2 id="Attributs">Attributs</h2>
+<p>Un widget <code>&lt;details&gt;</code> peut être dans l'un des deux états suivants. L'état par défaut <em>fermé</em> affiche uniquement le triangle et l'étiquette à l'intérieur du <code>&lt;summary&gt;</code> (ou une chaîne par défaut définie par <a href="/fr/docs/Glossary/User_agent">l'agent utilisateur</a> si aucun <code>&lt;summary&gt;</code>). Cela peut ressembler à ce qui suit :</p>
 
-<p>Comme tous les éléments HTML, cet élément accepte les <a href="/fr/docs/Web/HTML/Attributs_universels" title="fr/HTML/Global_attributes">attributs universels</a>.</p>
+<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="Capture d'écran du widget fermé &lt;details&gt;. Un triangle noir pointant vers la gauche se trouve à droite du texte « System Requirements »." src="details-closed.png"></figure>
+
+<p>Nous voyons ici un widget de divulgation standard avec l'étiquette "System Requirements", dans son état fermé par défaut. Lorsque l'utilisateur clique sur le widget ou le met au point, puis appuie sur la barre d'espacement, il s'ouvre par "torsion", révélant son contenu :</p>
+
+<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="Capture d'écran du widget &lt;details&gt; ouvert. Le triangle pointe maintenant vers le bas, et une description détaillée de ce que signifie « System Requirements » est affichée." src="details-open.png"></figure>
+
+<p>À partir de là, vous pouvez utiliser les feuilles de style en cascade pour donner un style au widget de divulgation, et vous pouvez ouvrir et fermer le widget de façon programmatique en définissant ou en supprimant son attribut <a href="/fr/docs/Web/HTML/Element/details#attr-open"><code>open</code></a>.</p>
+
+<p>Par défaut, lorsqu'il est fermé, le widget est seulement assez haut pour afficher le triangle de divulgation et le résumé. Lorsqu'il est ouvert, il s'étend pour afficher les détails qu'il contient.</p>
+
+<div class="notecard note">
+  <p><b>Note :</b></p>
+  <p>Malheureusement, à l'heure actuelle, il n'existe aucun moyen intégré d'animer la transition entre l'ouverture et la fermeture.</p>
+</div>
+
+<p>Les implémentations entièrement conformes aux normes appliquent automatiquement le code CSS <code><a href="/fr/docs/Web/CSS/display">display</a>: list-item</code> à l'élément <a href="/fr/docs/Web/HTML/Element/summary"><code>&lt;summary&gt;</code></a>. Vous pouvez l'utiliser pour personnaliser davantage son apparence. Voir <a href="#customizing_the_disclosure_widget">personnaliser le marqueur de révélation</a> pour plus de détails.</p>
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
+      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, racine de section, <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>Un élément <a href="/fr/docs/Web/HTML/Element/summary"><code>&lt;summary&gt;</code></a> suivi par du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td>
+    </tr>
+    <tr>
+      <th scope="row">Rôle ARIA implicite</th>
+      <td><a href="https://w3c.github.io/aria/#group">group</a></td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td><a href="/fr/docs/Web/API/HTMLDetailsElement"><code>HTMLDetailsElement</code></a></td>
+    </tr>
+  </tbody>
+</table>
+
+<h2 id="attributes">Attributs</h2>
+
+<p>Comme tous les éléments HTML, cet élément accepte les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p>
 
 <dl>
- <dt>{{htmlattrdef("open")}}</dt>
- <dd>Cet attribut booléen indique si les détails seront affichés lors du chargement de la page. La valeur par défaut est <code>false</code> (les détails sont alors cachés).</dd>
+  <dt><code id="attr-open">open</code></dt>
+  <dd>
+    <p>Cet attribut booléen indique si les détails — c'est-à-dire le contenu de l'élément <code>&lt;details&gt;</code> — sont actuellement visibles ou non. Les détails sont affichés lorsque cet attribut existe, ou cachés lorsque cet attribut est absent. Par défaut, cet attribut est absent, ce qui signifie que les détails ne sont pas visibles.</p>
+
+    <div class="note">
+      <p><b>Note :</b></p>
+      <p>Vous devez supprimer entièrement cet attribut pour que les détails soient cachés. Attention, <code>open="false"</code> rend les détails visibles, car cet attribut est booléen.</p>
+    </div>
+  </dd>
 </dl>
 
-<h2 id="Évènement_toggle">Évènement <code>toggle</code></h2>
+<h2 id="Events">Évènements</h2>
 
-<p>En plus des évènements classiques pris en charge par les éléments HTML, l'élément <code>&lt;details&gt;</code> prend en charge l'évènement {{event("toggle")}} qui est envoyé sur l'élément lorsque son état change entre ouvert et fermé (que ce soit dans un sens ou dans l'autre). L'évènement est envoyé après que l'état ait été changé et si plusieurs changement d'état ont eu lieu avant que le navigateur envoie l'évènement, le navigateur fusionnera ces évènements en un seul.</p>
+<p>En plus des évènements classiques pris en charge par les éléments HTML, l'élément <code>&lt;details&gt;</code> prend en charge l'évènement <a href="/fr/docs/Web/API/HTMLDetailsElement/toggle_event">toggle</a> qui est envoyé sur l'élément lorsque son état change entre ouvert et fermé (que ce soit dans un sens ou dans l'autre). L'évènement est envoyé après que l'état ait été changé et si plusieurs changements d'état ont eu lieu avant que le navigateur envoie l'évènement, le navigateur fusionnera ces évènements en un seul.</p>
 
 <p>On peut alors écouter cet évènement en JavaScript afin de détecter le changement d'état du contrôle :</p>
 
-<pre class="brush: js">detailsElem.addEventListener("toggle", function(evt){
-  if(detailsElem.open) {
+<pre class="brush: js">details.addEventListener("toggle", function(evt){
+  if(details.open) {
     /* l'état est passé en "ouvert" */
   } else {
     /* l'état est passé en "fermé" */
   }
 }, false);</pre>
 
-<h2 id="Exemples">Exemples</h2>
+<h2 id="examples">Exemples</h2>
 
-<h3 id="Un_exemple_simple">Un exemple simple</h3>
+<h3 id="a_simple_disclosure_example">Un exemple simple</h3>
 
 <p>Dans cet exemple, on utilise un élément <code>&lt;details&gt;</code> sans résumé/intitulé.</p>
 
-<h4 id="HTML">HTML</h4>
-
 <pre class="brush: html">&lt;details&gt;
-  &lt;p&gt;Requires a computer running an operating system. The computer
-  must have some memory and ideally some kind of long-term storage.
-  An input device as well as some form of output device is
-  recommended.&lt;/p&gt;
+  &lt;p&gt;Il faut un ordinateur équipé d'un système d'exploitation.
+  L'ordinateur doit disposer d'une mémoire et, idéalement, d'une sorte
+  de stockage à long terme. Un dispositif d'entrée et un dispositif de
+  sortie sont recommandés.&lt;/p&gt;
 &lt;/details&gt;</pre>
 
 <p>Ici, le navigateur utilisera alors un intitulé par défaut (généralement, ce sera "Détails").</p>
 
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample("Un_exemple_simple", 650, 150)}}</p>
-
-<h3 id="Fournir_un_résumé">Fournir un résumé</h3>
-
-<p>Dans cet exemple, on ajoute un résumé grâce à l'élément {{HTMLElement("summary")}} qu'on imbrique au début de l'élément <code>&lt;details&gt;</code> :</p>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html">&lt;details&gt;
-  &lt;summary&gt;System Requirements&lt;/summary&gt;
-  &lt;p&gt;Requires a computer running an operating system. The computer
-  must have some memory and ideally some kind of long-term storage.
-  An input device as well as some form of output device is
-  recommended.&lt;/p&gt;
-&lt;/details&gt;</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample("Fournir_un_résumé", 650, 150)}}</p>
+<p>{{EmbedLiveSample("a_simple_disclosure_example", "", 100)}}</p>
 
-<h3 id="Créer_un_contrôle_déja_ouvert">Créer un contrôle déja ouvert</h3>
+<h3 id="creating_an_open_disclosure_box">Créer un contrôle déjà ouvert</h3>
 
 <p>Pour obtenir une boîte <code>&lt;details&gt;</code> dans un état ouvert, il suffit d'ajouter l'attribut booléen <code>open</code> :</p>
 
-<h4 id="HTML_3">HTML</h4>
-
 <pre class="brush: html">&lt;details open&gt;
-  &lt;summary&gt;System Requirements&lt;/summary&gt;
-  &lt;p&gt;Requires a computer running an operating system. The computer
-  must have some memory and ideally some kind of long-term storage.
-  An input device as well as some form of output device is
-  recommended.&lt;/p&gt;
+  &lt;summary&gt;Configuration requise&lt;/summary&gt;
+  &lt;p&gt;Il faut un ordinateur équipé d'un système d'exploitation.
+  L'ordinateur doit disposer d'une mémoire et, idéalement, d'une sorte
+  de stockage à long terme. Un dispositif d'entrée et un dispositif de
+  sortie sont recommandés.&lt;/p&gt;
 &lt;/details&gt;</pre>
 
-<h4 id="Résultat_3">Résultat</h4>
+<p>Cela se traduit par :</p>
 
-<p>{{EmbedLiveSample("Créer_un_contrôle_déja_ouvert", 650, 150)}}</p>
+<p>{{EmbedLiveSample("creating_an_open_disclosure_box", "", 130)}}</p>
 
-<h3 id="Personnaliser_l’apparence">Personnaliser l’apparence</h3>
+<h3 id="customizing_the_appearance">Personnaliser l'apparence</h3>
 
 <p>Utilisons un peu de CSS afin de personnaliser l'apparence du contrôle fourni par <code>&lt;details&gt;</code>.</p>
 
-<h4 id="CSS">CSS</h4>
+<h4 id="css">CSS</h4>
 
 <pre class="brush: css">details {
-  font: 16px "Open Sans", "Arial", sans-serif;
+  font: 16px "Open Sans", Calibri, sans-serif;
   width: 620px;
 }
 
@@ -115,6 +158,7 @@ details &gt; summary {
   background-color: #ddd;
   border: none;
   box-shadow: 3px 3px 4px black;
+  cursor: pointer;
 }
 
 details &gt; p {
@@ -124,37 +168,38 @@ details &gt; p {
   margin: 0;
   box-shadow: 3px 3px 4px black;
 }
-</pre>
+
+details[open] > summary {
+  background-color: #ccf;
+}</pre>
 
 <p>Ce fragment de feuille de style CSS crée une apparence similaire à un onglet où, lorsqu'on clique sur l'onglet, il s'étend et révèle le contenu.</p>
 
-<h4 id="HTML_4">HTML</h4>
+<p>Le sélecteur <code>details[open]</code> peut être utilisé pour donner un style à l'élément qui est ouvert.</p>
 
-<pre class="brush: html">&lt;details&gt;
-  &lt;summary&gt;System Requirements&lt;/summary&gt;
-  &lt;p&gt;Requires a computer running an operating system. The computer
-  must have some memory and ideally some kind of long-term storage.
-  An input device as well as some form of output device is
-  recommended.&lt;/p&gt;
+<h4 id="html">HTML</h4>
+
+<pre class="brush: html">&lt;details open&gt;
+  &lt;summary&gt;Configuration requise&lt;/summary&gt;
+  &lt;p&gt;Il faut un ordinateur équipé d'un système d'exploitation.
+  L'ordinateur doit disposer d'une mémoire et, idéalement, d'une sorte
+  de stockage à long terme. Un dispositif d'entrée et un dispositif de
+  sortie sont recommandés.&lt;/p&gt;
 &lt;/details&gt;</pre>
 
-<h4 id="Résultat_4">Résultat</h4>
+<h4 id="result">Résultat</h4>
 
-<p>{{EmbedLiveSample("Personnaliser_l’apparence", 650, 150)}}</p>
+<p>{{EmbedLiveSample("customizing_the_appearance", "", 120)}}</p>
 
-<h3 id="Personnaliser_le_marqueur_de_révélation">Personnaliser le marqueur de révélation</h3>
+<h3 id="customizing_the_disclosure_widget">Personnaliser le marqueur de révélation</h3>
 
 <p>Le triangle généralement utilisé peut également être personnalisé. Toutefois, cette fonctionnalité a été standardisée récemment et n'est pas encore largement prise en charge. De plus, la méthode de prise en charge varie encore d'un navigateur à un autre.</p>
 
-<p>L'élément {{HTMLElement("summary")}} permet d'utiliser la propriété raccourcie {{cssxref("list-style")}} ainsi que les propriétés détaillées associées (telle que {{cssxref("list-style-type")}}) afin de modifier l'icône utilisée pour le contrôle.</p>
-
-<p>Il est possible de retirer l'icône en utilisant la valeur <code>none</code> pour la propriété <code>list-style</code>. Il est aussi possible d'utiliser d'autres valeurs sur <code>list-style</code> afin de configurer l'apparence du contrôle.</p>
-
-<p>Actuellement, Chrome ne prend pas en charge cette fonctionnalité et il faut utiliser <a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">le pseudo-élément</a> spécifique <code>::-webkit-details-marker</code> afin de personnaliser l'apparence.</p>
+<p>L'élément <a href="/fr/docs/Web/HTML/Element/summary"><code>&lt;summary&gt;</code></a> prend en charge la propriété raccourcie <a href="/fr/docs/Web/CSS/list-style"><code>list-style</code></a> et ses propriétés longues, comme <a href="/fr/docs/Web/CSS/list-style-type"><code>list-style-type</code></a>, pour changer le triangle de divulgation en ce que vous choisissez (généralement avec <a href="/fr/docs/Web/CSS/list-style-image"><code>list-style-image</code></a>). Par exemple, nous pouvons supprimer l'icône du widget de divulgation en définissant <code>list-style : none</code>.</p>
 
-<p>Pour une meilleure compatibilité à court terme, vous pouvez utiliser <code>display: none</code> sur l'élément <code>&lt;summary&gt;</code> afin de désactiver l'affichage du contrôle.</p>
+<p>Actuellement, Chrome ne prend pas en charge cette fonctionnalité et il faut utiliser <a href="/fr/docs/Web/CSS/Pseudo-elements">le pseudo-élément</a> spécifique <code>::-webkit-details-marker</code> afin de personnaliser l'apparence.</p>
 
-<h4 id="CSS_2">CSS</h4>
+<h4 id="css_2">CSS</h4>
 
 <pre class="brush: css; highlight:[12, 15-17]">details {
   font: 16px "Open Sans", "Arial", sans-serif;
@@ -180,86 +225,34 @@ details &gt; p {
   padding: 2px 6px;
   margin: 0;
   box-shadow: 3px 3px 4px black;
-}
-</pre>
+}</pre>
 
-<h4 id="HTML_5">HTML</h4>
+<p>Ce CSS crée un aspect similaire à celui d'une interface à onglets, où l'activation de l'onglet le développe et l'ouvre pour révéler son contenu.</p>
 
-<pre class="brush: html">&lt;details&gt;
-  &lt;summary&gt;System Requirements&lt;/summary&gt;
-  &lt;p&gt;Requires a computer running an operating system. The computer
-  must have some memory and ideally some kind of long-term storage.
-  An input device as well as some form of output device is
-  recommended.&lt;/p&gt;
-&lt;/details&gt;</pre>
+<h4 id="html_2">HTML</h4>
 
-<h4 id="Résultat_5">Résultat</h4>
-
-<p>{{EmbedLiveSample("Personnaliser_le_marqueur_de_révélation", 650, 150)}}</p>
+<pre class="brush: html">&lt;details open&gt;
+  &lt;summary&gt;Configuration requise&lt;/summary&gt;
+  &lt;p&gt;Il faut un ordinateur équipé d'un système d'exploitation.
+  L'ordinateur doit disposer d'une mémoire et, idéalement, d'une sorte
+  de stockage à long terme. Un dispositif d'entrée et un dispositif de
+  sortie sont recommandés.&lt;/p&gt;
+&lt;/details&gt;</pre>
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+<h4 id="result_2">Résultat</h4>
 
-<table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, racine de section, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Contenu autorisé</dfn></th>
-   <td>Un élément {{HTMLElement("summary")}} suivi par du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Omission de balises</dfn></th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Parents autorisés</dfn></th>
-   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Interface DOM</dfn></th>
-   <td>{{domxref("HTMLDetailsElement")}}</td>
-  </tr>
- </tbody>
-</table>
+<p>{{EmbedLiveSample("customizing_the_disclosure_widget", "", 120)}}</p>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-details-element', '&lt;details&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-details-element', '&lt;details&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+<h2 id="specifications">Spécifications</h2>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+<p>{{Specifications}}</p>
 
-<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
+<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
 
-<p>{{Compat("html.elements.details")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+<h2 id="see_also">Voir aussi</h2>
 
 <ul>
- <li>{{HTMLElement("summary")}}</li>
+  <li>L'élément <a href="/fr/docs/Web/HTML/Element/summary"><code>&lt;summary&gt;</code></a></li>
 </ul>