---
title: '<figure> : l''élément de figure'
slug: Web/HTML/Element/figure
tags:
  - Element
  - HTML
  - Reference
  - Web
translation_of: Web/HTML/Element/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>

<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>

<h2 id="Attributs">Attributs</h2>

<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>

<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></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>
</ul>

<h2 id="Exemples">Exemples</h2>

<h3 id="Premier_exemple">Premier exemple</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;!-- Une simple image --&gt;
&lt;figure&gt;
  &lt;img
  src="https://developer.mozilla.org/static/img/favicon144.png"
  alt="Le logo de MDN."&gt;
&lt;/figure&gt;

&lt;!-- Une image avec une légende --&gt;
&lt;figure&gt;
  &lt;img
  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>

<h3 id="Extrait_de_code">Extrait de code</h3>

<h4 id="HTML_2">HTML</h4>

<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;
      txt = "Nom de code: " + navigator.appCodeName;
      txt += "Nom du navigateur : " + navigator.appName;
      txt += "Version : " + navigator.appVersion ;
      txt += "Cookies activés : " + navigator.cookieEnabled;
      txt += "Plate-forme: " + navigator.platform;
      txt += "En-tête d'agent utilisateur : " + navigator.userAgent;
      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>

<h3 id="Citation">Citation</h3>

<h4 id="HTML_3">HTML</h4>

<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;/figure&gt;</pre>

<h4 id="Résultat_3">Résultat</h4>

<p>{{EmbedLiveSample("Citation","100%","150")}}</p>

<h3 id="Poème">Poème</h3>

<h4 id="HTML_4">HTML</h4>

<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;/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>

<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="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>

<p>{{Compat("html.elements.figure")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{HTMLElement("figcaption")}}</li>
</ul>