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, 118 insertions, 133 deletions

diff --git a/files/fr/web/html/element/caption/index.html b/files/fr/web/html/element/caption/index.html
index f1d9f809a3..7210126072 100644
--- a/files/fr/web/html/element/caption/index.html
+++ b/files/fr/web/html/element/caption/index.html
@@ -4,161 +4,146 @@ slug: Web/HTML/Element/caption
 tags:
   - Element
   - HTML
+  - HTML Tables
+  - HTML tabular data
   - Reference
-  - Tableau
+  - Table Captions
+  - Table Titles
+  - Tables
   - Web
+  - caption
 translation_of: Web/HTML/Element/caption
+browser-compat: html.elements.caption
 ---
 <div>{{HTMLRef}}</div>
 
-<p>L'élément <strong>HTML <code>&lt;caption&gt;</code> </strong>représente la légende (ou le titre) d'un tableau. Il doit être le première élément parmi les descendants de l'élément {{HTMLElement("table")}}. La mise en forme CSS peut placer cet élément à un autre endroit par rapport au tableau et on pourra notamment utiliser les propriétés {{cssxref("caption-side")}} et {{cssxref("text-align")}}.</p>
+<p class="summary">L'élément <strong><code>&lt;caption&gt;</code></strong> définit la légende (ou le titre) d'un tableau.</p>
 
 <div>{{EmbedInteractiveExample("pages/tabbed/caption.html", "tabbed-standard")}}</div>
 
-<p 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> !</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>Aucune.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>.</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>La balise de fin peut être absente si l'élément n'est pas immédiatement suivi d'un blanc ASCII ou d'un commentaire.</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>Un élément <a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a> dont il doit être le premier descendant.</td>
+    </tr>
+    <tr>
+      <th scope="row">Rôle ARIA implicite</th>
+      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+    </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/HTMLTableCaptionElement"><code>HTMLTableCaptionElement</code></a></td>
+    </tr>
+  </tbody>
+</table>
 
-<h2 id="Attributs">Attributs</h2>
+<h2 id="attributes">Attributs</h2>
 
-<p>On peut utiliser<a href="/fr/docs/Web/HTML/Attributs_universels"> les attributs universels</a> sur cet élément.</p>
+<p>On peut utiliser<a href="/fr/docs/Web/HTML/Global_attributes"> les attributs universels</a> sur cet élément.</p>
 
-<h3 id="Attributs_obsolètes">Attributs obsolètes</h3>
+<h3 id="deprecated_attributes">Attributs obsolètes</h3>
 
 <dl>
- <dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt>
- <dd>Cet attribut à valeur contrainte indique l'alignement de la légende du tableau par rapport au tableau lui-même. Il peut valoir :
- <ul>
-  <li><code>left</code> pour un affichage à gauche du tableau</li>
-  <li><code>top</code> pour un affichage au dessus du tableau</li>
-  <li><code>right</code> pour un affichage à droite du tableau</li>
-  <li><code>bottom</code> pour un affichage en dessous du tableau</li>
- </ul>
-
- <div class="note"><strong>Note d'utilisation : </strong>Ne pas utiliser cet attribut. Il a été déprécié. L'élément {{HTMLElement("caption")}} devrait être mis en forme grâce au <a href="/fr/docs/Web/CSS">CSS</a>. Afin d'obtenir des effets similaires à cet attribut, on utilisera les propriétés CSS {{cssxref("caption-side")}} et {{cssxref("text-align")}}.</div>
- </dd>
+  <dt><strong id="attr-align"><code>align</code></strong> {{deprecated_inline}}</dt>
+  <dd>Cet attribut à valeur contrainte indique l'alignement de la légende du tableau par rapport au tableau lui-même. Il peut valoir :
+  <dl>
+    <dt><code>left</code></dt>
+    <dd>La légende est affichée à gauche du tableau</dd>
+    <dt><code>top</code></dt>
+    <dd>La légende est affichée au-dessus du tableau</dd>
+    <dt><code>right</code></dt>
+    <dd>La légende est affichée à droite du tableau</dd>
+    <dt><code>bottom</code></dt>
+    <dd>La légende est affichée en dessous du tableau</dd>
+  </dl>
+
+  <div class="notecard note">
+    <p><b>Note d'utilisation :</b></p>
+    <p>Ne pas utiliser cet attribut. Il a été déprécié. L'élément <code>&lt;caption&gt;</code> devrait être mis en forme grâce au <a href="/fr/docs/Web/CSS">CSS</a>. Afin d'obtenir des effets similaires à cet attribut, on utilisera les propriétés CSS <a href="/fr/docs/Web/CSS/caption-side"><code>caption-side</code></a> et <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a>.</p>
+  </div>
+  </dd>
 </dl>
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+<h2 id="usage_notes">Notes d'utilisation</h2>
 
-<p>Quand l'élément {{HTMLElement("table")}} (étant le parent de l'élément {{HTMLElement("caption")}}) n'est que l'unique descendant d'un élément {{HTMLElement("figure")}},c'est l'élément {{HTMLElement("figcaption")}} doit être utilisé.</p>
+<p>L'élément <code>&lt;caption&gt;</code> devrait être le premier élément enfant de l'élément parent <a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a>.</p>
 
-<h2 id="Exemples">Exemples</h2>
+<p>Quand l'élément <a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a> (étant le parent de l'élément <code>&lt;caption&gt;</code>) n'est que l'unique descendant d'un élément <a href="/fr/docs/Web/HTML/Element/figure"><code>&lt;figure&gt;</code></a>, c'est l'élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code></a> doit être utilisé.</p>
 
-<h3 id="HTML">HTML</h3>
+<p>Utiliser la propriété <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> sur le tableau ne modifiera pas l'apparence de la légende. Il est également nécessaire d'ajouter une déclaration CSS avec <code>background-color</code> sur l'élément <code>&lt;caption&gt;</code> pour que celui-ci ait la même couleur.</p>
 
-<pre class="brush: html">&lt;table&gt;
-  &lt;caption&gt;Une légende pour un tableau&lt;/caption&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Bip bop bip bop&lt;/td&gt;
-    &lt;td&gt;Bop bip bop bip&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;
-</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">caption {
-  caption-side: top;
-  align: right;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0px;
-}
-table, th, td {
-  border: 1px solid black;
-}
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","200","200")}}</p>
-
-<h2 id="Résumé_technique">Résumé technique</h2>
+<h2 id="example">Exemple</h2>
 
-<table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td>Aucune.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Catégorie de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>La balise de fin peut être absente si l'élément n'est pas immédiatement suivi d'un blanc ASCII ou d'un commentaire.</td>
-  </tr>
-  <tr>
-   <th scope="row">Éléments parents autorisés</th>
-   <td>Un élément {{HTMLElement("table")}} dont il doit être le premier descendant.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLTableCaptionElement")}}</td>
-  </tr>
- </tbody>
-</table>
+<p>Cet exemple simple présente un tableau qui comprend une légende.</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', 'tabular-data.html#the-caption-element', '&lt;caption&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '&lt;caption&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '&lt;caption&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>
+<h3 id="html">HTML</h3>
 
-<p>{{Compat("html.elements.caption")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
+<pre class="brush: html">&lt;table&gt;
+  &lt;caption&gt;Légende de l'exemple&lt;/caption&gt;
+  &lt;tr&gt;
+    &lt;th&gt;Connexion&lt;/th&gt;
+    &lt;th&gt;Courriel :&lt;/th&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;utilisateur1&lt;/td&gt;
+    &lt;td&gt;utilisateur1@test.fr&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td&gt;utilisateur2&lt;/td&gt;
+    &lt;td&gt;utilisateur2@test.fr&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<div class="hidden">
+  <pre class="brush: css">caption {
+    caption-side: top;
+  }
+  table {
+    border-collapse: collapse;
+    border-spacing: 0px;
+  }
+  table, th, td {
+    border: 1px solid black;
+  }
+  </pre>
+  </div>
+
+<h3 id="result">Résultat</h3>
+
+<p>{{EmbedLiveSample('example', '', 120)}}</p>
+
+<h2 id="specifications">Spécifications</h2>
+
+<p>{{Specifications}}</p>
+
+<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="see_also">Voir aussi</h2>
 
 <ul>
- <li>Les autres éléments HTML relatifs aux tableaux :
-  <ul>
-   <li>{{HTMLElement("col")}}</li>
-   <li>{{HTMLElement("colgroup")}}</li>
-   <li>{{HTMLElement("table")}}</li>
-   <li>{{HTMLElement("tbody")}}</li>
-   <li>{{HTMLElement("td")}}</li>
-   <li>{{HTMLElement("tfoot")}}</li>
-   <li>{{HTMLElement("th")}}</li>
-   <li>{{HTMLElement("thead")}}</li>
-   <li>{{HTMLElement("tr")}}</li>
-  </ul>
- </li>
- <li>Les propriétés CSS pouvant être utilisées pour mettre en forme l'élément {{HTMLElement("caption")}} :
-  <ul>
-   <li>{{cssxref("text-align")}}</li>
-   <li>{{cssxref("caption-side")}}.</li>
-  </ul>
- </li>
-</ul>
+  <li>Les propriétés CSS particulièrement utiles pour styliser l'élément <code>&lt;caption&gt;</code> :
+   <ul>
+    <li><a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a></li>
+    <li><a href="/fr/docs/Web/CSS/caption-side"><code>caption-side</code></a>.</li>
+   </ul>
+  </li>
+ </ul>