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

diff --git a/files/fr/web/html/element/figure/index.html b/files/fr/web/html/element/figure/index.html
index faeea41797..7ab8953ba1 100644
--- a/files/fr/web/html/element/figure/index.html
+++ b/files/fr/web/html/element/figure/index.html
@@ -1,38 +1,71 @@
 ---
-title: '<figure> : l''élément de figure'
+title: '<figure> : l''élément de figure avec légende facultative'
 slug: Web/HTML/Element/figure
 tags:
   - Element
   - HTML
+  - HTML grouping content
+  - Information
+  - Presentation
   - Reference
-  - Web
+  - figure
 translation_of: Web/HTML/Element/figure
+browser-compat: html.elements.figure
 ---
 <div>{{HTMLRef}}</div>
 
-<p>L'élément HTML <strong><code>&lt;figure&gt;</code></strong> représente une figure (un schéma), qui peut être accompagné d'une légende grâce à l'élément {{HTMLElement("figcaption")}}. Il est normalement référencé de manière unique. C'est souvent une image, une illustration, un diagramme, un fragment de code ou un schéma auquel il est fait référence dans le texte principal mais qui peut être utilisé sur une autre page ou dans une annexe sans que cela affecte le contenu principal.</p>
+<p class="summary">L'élément HTML <strong><code>&lt;figure&gt;</code></strong> représente un contenu autonome, éventuellement accompagné d'une légende facultative, qui est spécifiée à l'aide de l'élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code></a>. La figure, sa légende et son contenu sont référencés comme une seule unité.</p>
 
 <div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</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>
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
+      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_roots">racine de sectionnement</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>Un élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code></a> suivi d'un <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a> ou du contenu de flux suivi d'un élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code></a> ou du contenu de flux.</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>Aucune, la balise ouvrante et la balise fermante sont toutes les deux obligatoires.</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td>
+    </tr>
+    <tr>
+      <th scope="row">Rôle ARIA implicite</th>
+      <td><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Figure_Role"><code>figure</code></a></td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Sans descendant <a href="/fr/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code></a> descendant : <a href="https://www.w3.org/TR/html-aria/#dfn-any-role">n'importe quel rôle</a>, sinon aucun rôle autorisé.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td>
+    </tr>
+  </tbody>
+</table>
 
-<h2 id="Attributs">Attributs</h2>
+<h2 id="attributes">Attributs</h2>
 
-<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
 
-<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2>
+<h2 id="usage_notes">Notes d'utilisation</h2>
 
 <ul>
- <li>Bien que cet élément soit en lien avec le contenu principal, sa position est indépendante du contenu principal du document.</li>
- <li><code>&lt;figure&gt;</code> est <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement">une racine de sectionnement</a>, son contenu est donc exclu du plan général du document.</li>
- <li>Une légende peut être associée avec l'élément <code>&lt;figure&gt;</code> en insérant un élément {{HTMLElement("figcaption")}} à l'intérieur (en premier ou dernier élément enfant). C'est le premier élément <code>&lt;figcaption&gt;</code> qui sera trouvé dans la figure qui sera affiché comme légende.</li>
+  <li>Généralement, un élément <code>&lt;figure&gt;</code> est utilisé pour une image, une illustration, un diagramme, un fragment de code ou autre qui est référencé depuis le flux principal du document. Toutefois, cet élément peut être déplacé vers une autre partie du document ou en annexe sans que cela ait un impact sur le flux principal.</li>
+  <li><code>&lt;figure&gt;</code> est <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_roots">une racine de sectionnement</a>, son contenu est donc exclu du plan général du document.</li>
+  <li>Une légende peut être associée avec l'élément <code>&lt;figure&gt;</code> en insérant un élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code></a> à l'intérieur (en premier ou dernier élément enfant). C'est le premier élément <code>&lt;figcaption&gt;</code> qui sera trouvé dans la figure qui sera affiché comme légende.</li>
 </ul>
 
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Premier_exemple">Premier exemple</h3>
+<h2 id="examples">Exemples</h2>
 
-<h4 id="HTML">HTML</h4>
+<h3 id="images">Images</h3>
 
 <pre class="brush: html">&lt;!-- Une simple image --&gt;
 &lt;figure&gt;
@@ -47,22 +80,17 @@ translation_of: Web/HTML/Element/figure
   src="https://developer.mozilla.org/static/img/favicon144.png"
   alt="Le logo de MDN."&gt;
   &lt;figcaption&gt;Logo MDN&lt;/figcaption&gt;
-&lt;/figure&gt;
-</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample("Premier_exemple","100%","375")}}</p>
+&lt;/figure&gt;</pre>
 
-<h3 id="Extrait_de_code">Extrait de code</h3>
+<div>{{EmbedLiveSample("images", "100%", 400)}}</div>
 
-<h4 id="HTML_2">HTML</h4>
+<h3 id="code_snippets">Extrait de code</h3>
 
 <pre class="brush: html">&lt;figure&gt;
   &lt;figcaption&gt;Obtenir les détails du navigateur&lt;/figcaption&gt;
   &lt;pre&gt;
     function NavigatorExample(){
-      var txt;
+      let txt;
       txt = "Nom de code: " + navigator.appCodeName;
       txt += "Nom du navigateur : " + navigator.appName;
       txt += "Version : " + navigator.appVersion ;
@@ -72,117 +100,50 @@ translation_of: Web/HTML/Element/figure
       console.log("NavigatorExample", txt);
     }
   &lt;/pre&gt;
-&lt;/figure&gt;
-</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample("Extrait_de_code","100%","300")}}</p>
+&lt;/figure&gt;</pre>
 
-<h3 id="Citation">Citation</h3>
+<div>{{EmbedLiveSample("code_snippets", "100%", 250)}}</div>
 
-<h4 id="HTML_3">HTML</h4>
+<h3 id="quotations">Citation</h3>
 
 <pre class="brush: html">&lt;figure&gt;
-   &lt;figcaption&gt;
-     &lt;cite&gt;Edsger Dijkstra : &lt;/cite&gt;
-   &lt;/figcaption&gt;
-   &lt;p&gt;« Si le débogage correspond au retrait de bogues, alors la programmation correspond à l'ajout de bogues. »&lt;/p&gt;
+  &lt;figcaption&gt;
+    &lt;cite&gt;Edsger Dijkstra : &lt;/cite&gt;
+  &lt;/figcaption&gt;
+  &lt;p&gt;« Si le débogage correspond au retrait de bogues,
+    alors la programmation correspond à l'ajout de bogues. »
+  &lt;/p&gt;
 &lt;/figure&gt;</pre>
 
-<h4 id="Résultat_3">Résultat</h4>
-
-<p>{{EmbedLiveSample("Citation","100%","150")}}</p>
-
-<h3 id="Poème">Poème</h3>
+<div>{{EmbedLiveSample("quotations","", 150)}}</div>
 
-<h4 id="HTML_4">HTML</h4>
+<h3 id="poems">Poème</h3>
 
 <pre class="brush: html">&lt;figure&gt;
- &lt;p&gt;
-  Bid me discourse, I will enchant thine ear,
-  Or like a fairy trip upon the green,
-  Or, like a nymph, with long dishevell'd hair,
-  Dance on the sands, and yet no footing seen:
-  Love is a spirit all compact of fire,
-  Not gross to sink, but light, and will aspire.
- &lt;/p&gt;
- &lt;figcaption&gt;&lt;cite&gt;Venus and Adonis&lt;/cite&gt;.
-  By: William Shakespeare&lt;/figcaption&gt;
+  &lt;p style="white-space:pre"&gt;
+    Bid me discourse, I will enchant thine ear,
+      Or like a fairy trip upon the green,
+    Or, like a nymph, with long dishevell'd hair,
+      Dance on the sands, and yet no footing seen:
+    Love is a spirit all compact of fire,
+      Not gross to sink, but light, and will aspire.
+  &lt;/p&gt;
+  &lt;figcaption&gt;&lt;cite&gt;Venus and Adonis&lt;/cite&gt;.
+    By: William Shakespeare&lt;/figcaption&gt;
 &lt;/figure&gt;</pre>
 
-<h4 id="Résultat_4">Résultat</h4>
-
-<p>{{EmbedLiveSample("Poème","100%","150")}}</p>
-
-<h2 id="Résumé_technique">Résumé technique</h2>
+<div>{{EmbedLiveSample("poems", "100%", 260)}}</div>
 
-<table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement" title="Sections and Outlines of an HTML5 document#Sectioning root">racine de sectionnement</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Un élément {{HTMLElement("figcaption")}} suivi d'un <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">contenu de flux</a> ou du contenu de flux suivi d'un élément {{HTMLElement("figcaption")}} ou du contenu de flux.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-figure-element', '&lt;figure&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '&lt;figure&gt;')}}</td>
-   <td>{{Spec2('HTML5.2')}}</td>
-   <td>Aucune modification depuis HTML 5.0.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '&lt;figure&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></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">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>
+<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
 
-<p>{{Compat("html.elements.figure")}}</p>
+<p>{{Compat}}</p>
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+<h2 id="see_also">Voir aussi</h2>
 
 <ul>
- <li>{{HTMLElement("figcaption")}}</li>
+  <li>L'élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code></a></li>
 </ul>