1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
|
---
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><figure></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><figure></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><figure></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><figcaption></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"><!-- 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>
</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"><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>
</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"><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></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"><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></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', '<figure>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '<figure>')}}</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', '<figure>')}}</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>
|
