larlet-fr-david-cache/cache/4b7804d8fe930d95854f25ff01fd2283/index.md

title: HTML5 : Éléments <figure> et <figcaption>
url: http://www.alsacreations.com/article/lire/1337-html5-elements-figure-et-figcaption.html
hash_url: 4b7804d8fe930d95854f25ff01fd2283

<p>L'élément <code class="html">&lt;figure&gt;</code> ne devrait pas vous être inconnu puisque son rôle est pareil à celui qu'il joue dans les supports papiers tels que les livres ou magazines afin d'illustrer et de légender des photos, des diagrammes, ou encore des schémas.</p>

<h3>
	Illustration légendée</h3>
<p>
	Inaugurés avec HTML5, les éléments <code class="html">&lt;figure&gt;</code> et <code class="html">&lt;figcaption&gt;</code> fonctionnent de concert pour associer une légende à une illustration ou un autre élément média.</p>
<pre class="code">
<code class="html"><strong>&lt;figure&gt;</strong>
  &lt;img src="image.jpg" alt="" /&gt;
  <strong>&lt;figcaption&gt;</strong>Légende associée<strong>&lt;/figcaption&gt;</strong>
<strong>&lt;/figure&gt;</strong></code></pre>
<h4>
	Élément <code class="html">&lt;figure&gt;</code></h4>
<p>
	<code class="html">&lt;figure&gt;</code> est une unité de contenu, c'est-à-dire que cet élément sert de conteneur dans lequel s'insèrent divers éléments comme des images, des schémas, des vidéos, des tableaux ou encore des blocs de code. L'objectif est de lier ce contenu à une légende, définie par l'élément <code class="html">&lt;figcaption&gt;</code> (facultatif).</p>
<h4>
	Élément <code class="html">&lt;figcaption&gt;</code></h4>
<p>
	Enfant direct de <code class="html">&lt;figure&gt;</code>, son rôle est de légender son parent, sous forme de texte et/ou de liens. Il peut se placer avant ou après le contenu principal de <code class="html">&lt;figure&gt;</code>.</p>
<h3>
	Quelques applications dans le monde du livre</h3>
<p>
	Ce fonctionnement se retrouve dans de nombreux ouvrages, y compris les premières encyclopédies pour lesquelles on imprimait des planches de figures à part.</p>
<figure class="center">
	<figcaption>
	<p>Une planche de gravures sur l'Astronomie, illustrations de l'Encyclopédie de Diderot (1713-1784)</p>
	</figcaption>
	<p>
		<img alt="" src="http://www.alsacreations.com/xmedia/doc/full/planche-encyclopedie.png"/></p>
</figure>
<figure class="center">
	<figcaption><p>Un diagramme circulaire de statistiques</p></figcaption>
<p><img alt="" src="http://www.alsacreations.com/xmedia/doc/full/email-client-popularity-2012.png"/></p>
</figure>
<h4>
	Compatibilité navigateur des éléments <code>&lt;figure&gt;</code> et <code>&lt;figcaption&gt;</code></h4>
<table class="pagetable">
	<tbody>
		<tr>
			<th>
				Navigateurs</th>
			<th>
				Versions</th>
		</tr>
		<tr>
			<td>
				<img alt="Internet Explorer" height="40" src="http://www.alsacreations.com/xmedia/doc/small/IExplorer_Transparent.png" width="40"/></td>
			<td>
				<strong>Internet Explorer 9.0+</strong></td>
		</tr>
		<tr>
			<td>
				<img alt="Firefox" height="40" src="http://www.alsacreations.com/xmedia/doc/small/Firefox_Transparent.png" width="40"/></td>
			<td>
				<strong>Firefox 3.0+</strong></td>
		</tr>
		<tr>
			<td>
				<img alt="Chrome" height="40" src="http://www.alsacreations.com/xmedia/doc/small/Chrome_Transparent.png" width="40"/></td>
			<td>
				<strong>Chrome 4.0+</strong></td>
		</tr>
		<tr>
			<td>
				<img alt="Safari" height="40" src="http://www.alsacreations.com/xmedia/doc/small/Safari_Transparent.png" width="40"/></td>
			<td>
				<strong>Safari 3.1+</strong><br/>
				<strong>iOS Safari 3.2+</strong></td>
		</tr>
		<tr>
			<td>
				<img alt="Opera" height="40" src="http://www.alsacreations.com/xmedia/doc/small/Opera_Transparent.png" width="40"/></td>
			<td>
				<strong>Opera 9.0+</strong><br/>
				<strong>Opera Mini 5.0 + et Mobile</strong> <strong>10.0</strong></td>
		</tr>
		<tr>
			<td>
				<img alt="Android Browser" src="http://www.alsacreations.com/xmedia/doc/small/android-logo.png"/></td>
			<td>
				<strong>Android Browser 4.0+</strong></td>
		</tr>
	</tbody>
</table>
<p class="remarque">
	Un navigateur n'implémentant pas ces éléments affichera le contenu au format brut, sans présentation particulière. Par défaut, le style appliqué est <code>display:block</code> sur les deux éléments, ainsi que des marges sur <code>&lt;figure&gt;</code>. Sous IE&lt;9 il faudra appliquer un <a href="/article/lire/1376-html5-section-article-nav-header-footer-aside.html">shim</a> pour pouvoir leur appliquer un style bloc.</p>
<h3>
	Applications sur le web</h3>
<h5>
	Utilisation sans légende</h5>
<p>
	Il est tout à fait envisageable d'insérer <code class="html">&lt;figcaption&gt;</code> avant l'image voire de ne pas le mettre du tout car il est facultatif.</p>
<pre class="code">
<code class="html"><strong>&lt;figure&gt;</strong>
  &lt;img src="un-gout-de-fraise.jpg" alt="Proposition pour le thème : Un goût de fraise" /&gt;
<strong>&lt;/figure&gt;</strong></code></pre>
<p>
	<a class="demo" href="/xmedia/tuto/html5/figure-figcaption/demo1.html">Démonstration</a></p>
<p class="center">
	<img alt="Demonstration image sans légende" src="http://www.alsacreations.com/xmedia/doc/full/demo23.jpg"/></p>
<p>
	Les différents éléments peuvent être stylés en CSS. Dans cet exemple ont été ajoutées à <code class="html">&lt;figure&gt;</code> une bordure et une couleur de fond blanche.</p>
<h5>
	Une image avec sa légende</h5>
<p>
	Dans son usage le plus courant, l'élément <code class="html">&lt;figure&gt;</code> contient une image puis sa légende <code class="html">&lt;figcaption&gt;</code>. </p>
<pre class="code">
<code class="html"><strong>&lt;figure&gt;</strong>
  &lt;img src="un-gout-de-fraise.jpg" alt="" /&gt;
  <strong>&lt;figcaption&gt;</strong>Proposition pour le thème : &lt;br&gt;&lt;em&gt;Un goût de fraise&lt;/em&gt; du jeu &lt;a href="http://www.photogame.fr/"&gt;PhotoGame&lt;/a&gt;<strong>&lt;/figcaption&gt;</strong>
<strong>&lt;/figure&gt;</strong></code></pre>
<p>
	<a class="demo" href="/xmedia/tuto/html5/figure-figcaption/demo2.html">Démonstration</a></p>
<p class="center">
	<img alt="Visuel de la démonstration 1" src="http://www.alsacreations.com/xmedia/doc/full/demo12.jpg"/></p>
<h4 class="center">
	Utilisation avancée</h4>
<p class="center">
	Il est prévu de pouvoir regrouper une liste d'images et ainsi les lier à l'aide d'un unique élément <code class="html">&lt;figcaption&gt;</code>.</p>
<h5 class="center">
	Une liste d'images</h5>
<pre class="code">
<code class="html"><strong>&lt;figure&gt;</strong>
  &lt;img src="porto1.jpg" alt="Graffiti dans le sud de Porto" width="181" height="242"&gt;
  &lt;img src="porto2.jpg" alt="Balcons dans une rue de Porto" width="181" height="242"&gt;
  &lt;img src="porto3.jpg" alt="Chat somnolant au sud de Porto" width="181" height="242"&gt;
  <strong>&lt;figcaption&gt;</strong>Photo d'un voyage à Porto. Ville emplie de graffitis, balcons loufoques et chats profitant des quelques ruines derrière la ville.<strong>&lt;/figcaption&gt;</strong>
<strong>&lt;/figure&gt;</strong></code></pre>
<p class="center">
	<a class="demo" href="/xmedia/tuto/html5/figure-figcaption/demo3.html">Démonstration</a></p>
<p class="center">
	<img alt="" src="http://www.alsacreations.com/xmedia/doc/full/demo34.jpg"/></p>
<h5 class="center">
	Un bloc de code</h5>
<p>
	Les illustrations ne sont pas les seuls éléments HTML à pouvoir profiter de <code class="html">&lt;figure&gt;</code> et <code class="html">&lt;figcaption&gt;</code>. On peut également les appliquer à un bloc de code source.</p>
<pre class="code">
<code class="html"><strong>&lt;figure&gt;</strong>
   &lt;pre&gt;
      &lt;code&gt;
        &lt;!-- Le code source à exposer --&gt;
      &lt;/code&gt;
   &lt;/pre&gt;
   <strong>&lt;figcaption&gt;</strong>Description du code source présenté<strong>&lt;/figcaption&gt;</strong>
<strong>&lt;/figure&gt;</strong></code></pre>
<p>
	<a class="demo" href="/xmedia/tuto/html5/figure-figcaption/demo4.html">Démonstration</a></p>
<p class="center">
	<img alt="" src="http://www.alsacreations.com/xmedia/doc/full/demo4.jpg"/></p>
<h5 class="center">
	Une vidéo</h5>
<p>
	Le même principe est appliqué à la balise <code class="html">&lt;video&gt;</code>. Voir aussi l'article : <a href="/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html">Introduction à la balise &lt;video&gt;</a>.</p>
<pre class="code">
<code class="html"><strong>&lt;figure&gt;</strong>
    &lt;video src="video.ogv" width="640" height="480"&gt;&lt;/video&gt;
    <strong>&lt;figcaption&gt;</strong>Description de la vidéo<strong>&lt;/figcaption&gt;</strong>
<strong>&lt;/figure&gt;</strong></code></pre>
<h5>
	Les diagrammes et autres graphes dynamiques</h5>
<p>
	Du côté de Canvas et <a href="/tuto/lire/1421-svg-initiation-syntaxe-outils.html">SVG</a>, le document peut également en profiter. <span>HTML5 ne compte pas que </span><code class="html">&lt;figure&gt;</code><span> et </span><code class="html">&lt;figcaption&gt;</code><span> dans ses nouveaux éléments mais également </span><code class="html">&lt;canvas&gt;</code><span>, qui vous permettra de créer, en association avec JavaScript, des diagrammes, des graphiques, et tout ce qu'une surface de dessin permet de faire. </span>À ce sujet, consultez l'article de David Rousset : <a href="http://blogs.msdn.com/b/davrous/archive/2011/05/20/introduction-aux-apis-graphiques-d-html5-svg-amp-canvas-2-4.aspx">Introduction aux APIs graphiques d’HTML5: SVG &amp; Canvas</a></p>
<h4>
	Choisir <code class="html">&lt;figure&gt;</code> ou <code class="html">&lt;aside&gt;</code> ?</h4>
<p>
	Ces deux éléments sont des unités de contenu mais n'ont pas le même rôle sémantique. Tandis qu'<code class="html">&lt;aside&gt;</code> n'est pas essentiel pour la compréhension de la page (il ne doit être qu'un apport tangentiel), <code class="html">&lt;figure&gt;</code> est lié à celle-ci : il transmet un contenu pertinent, lié au contenu principal, comme le serait une image classique.</p>
<p>
	Nous pouvons donc résumer la chose comme suit :</p>
<ul>
	<li>
		<code class="html">&lt;aside&gt;</code> : son contenu est périphérique à la page, et son absence ne doit pas gêner la compréhension de celle-ci.</li>
	<li>
		<code class="html">&lt;figure&gt;</code> : son contenu contribue à donner du sens et de la compréhension à la page, et son placement n'est pas déterminant.</li>
</ul>
<h3>
	Propriétés des éléments</h3>
<h4>
	<code class="html">&lt;figure&gt;</code></h4>
<table class="pagetable">
	<tbody>
		<tr>
			<th>
				Propriété</th>
			<th>
				Détails</th>
		</tr>
		<tr>
			<td>
				Modèles de contenu autorisés</td>
			<td>
				Un élément <code class="html">&lt;figcaption&gt;</code> optionnel, suivi par du contenu de flux</td>
		</tr>
		<tr>
			<td>
				Parents autorisés</td>
			<td>
				Tout élément pouvant contenir des éléments du flux</td>
		</tr>
		<tr>
			<td>
				Omission de balise</td>
			<td>
				Les balises ouvrantes et fermantes sont obligatoires</td>
		</tr>
		<tr>
			<td>
				Style par défaut</td>
			<td>
				<code class="css">figcaption { display:block; margin:1em 40px; }</code></td>
		</tr>
	</tbody>
</table>
<h4>
	<code class="html">&lt;figcaption&gt;</code></h4>
<table class="pagetable">
	<tbody>
		<tr>
			<th>
				Propriété</th>
			<th>
				Détails</th>
		</tr>
		<tr>
			<td>
				Modèles de contenu autorisés</td>
			<td>
				Contenu de flux</td>
		</tr>
		<tr>
			<td>
				Parents autorisés</td>
			<td>
				<code>&lt;figure&gt;</code></td>
		</tr>
		<tr>
			<td>
				Omission de balise</td>
			<td>
				Les balises ouvrantes et fermantes sont obligatoires</td>
		</tr>
		<tr>
			<td>
				Style par défaut</td>
			<td>
				<code class="css">figcaption { display:block; }</code></td>
		</tr>
	</tbody>
</table>
<p>
	 </p></div>