From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/html/element/figure/index.html | 188 ++++++++++++++++++++++++++++ 1 file changed, 188 insertions(+) create mode 100644 files/fr/web/html/element/figure/index.html (limited to 'files/fr/web/html/element/figure') diff --git a/files/fr/web/html/element/figure/index.html b/files/fr/web/html/element/figure/index.html new file mode 100644 index 0000000000..faeea41797 --- /dev/null +++ b/files/fr/web/html/element/figure/index.html @@ -0,0 +1,188 @@ +--- +title: '
: l''élément de figure' +slug: Web/HTML/Element/figure +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/figure +--- +
{{HTMLRef}}
+ +

L'élément HTML <figure> 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.

+ +
{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}
+ + + +

Attributs

+ +

Cet élément prend uniquement en charge les attributs universels.

+ +

Notes d'utilisation

+ + + +

Exemples

+ +

Premier exemple

+ +

HTML

+ +
<!-- Une simple image -->
+<figure>
+  <img
+  src="https://developer.mozilla.org/static/img/favicon144.png"
+  alt="Le logo de MDN.">
+</figure>
+
+<!-- Une image avec une légende -->
+<figure>
+  <img
+  src="https://developer.mozilla.org/static/img/favicon144.png"
+  alt="Le logo de MDN.">
+  <figcaption>Logo MDN</figcaption>
+</figure>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Premier_exemple","100%","375")}}

+ +

Extrait de code

+ +

HTML

+ +
<figure>
+  <figcaption>Obtenir les détails du navigateur</figcaption>
+  <pre>
+    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);
+    }
+  </pre>
+</figure>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Extrait_de_code","100%","300")}}

+ +

Citation

+ +

HTML

+ +
<figure>
+   <figcaption>
+     <cite>Edsger Dijkstra : </cite>
+   </figcaption>
+   <p>« Si le débogage correspond au retrait de bogues, alors la programmation correspond à l'ajout de bogues. »</p>
+</figure>
+ +

Résultat

+ +

{{EmbedLiveSample("Citation","100%","150")}}

+ +

Poème

+ +

HTML

+ +
<figure>
+ <p>
+  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.
+ </p>
+ <figcaption><cite>Venus and Adonis</cite>.
+  By: William Shakespeare</figcaption>
+</figure>
+ +

Résultat

+ +

{{EmbedLiveSample("Poème","100%","150")}}

+ +

Résumé technique

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu de flux, racine de sectionnement, contenu tangible.
Contenu autoriséUn élément {{HTMLElement("figcaption")}} suivi d'un contenu de flux ou du contenu de flux suivi d'un élément {{HTMLElement("figcaption")}} ou du contenu de flux.
Omission de balises{{no_tag_omission}}
Parents autorisésTout élément qui accepte du contenu de flux.
Rôles ARIA autorisés{{ARIARole("group")}}, {{ARIARole("presentation")}}
Interface DOM{{domxref("HTMLElement")}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'semantics.html#the-figure-element', '<figure>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML5.2')}}Aucune modification depuis HTML 5.0.
{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.figure")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf