Accueil    HTML    Balise Figure
 



balise figure  Balise FIGURE : illustration

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture obligatoire | Support :
  • Google Chrome 20.0 et plus
  • Firefox 14.0.1 et plus
  • IE 9 et plus
  • Opera 12 et plus
  • Safari 5.1.7 et plus



La balise <figure> représente une section qui est censée proposer des illustrations (par exemple des images, des photos, des diagrammes, des exemples de codes) venant compléter le contenu principal décrit dans la page.
La compréhension du contenu principal ne doit pas être affectée si les éléments présents dans l'élément figure venaient à être retirés (Si c'est pas le cas, il ne faut pas utiliser la balise <figure> pour ce contenu).

Son emplacement pourrait se situer par exemple au sein d'une balise <article> pour illustrer son contenu. Il est possible de lui associer un titre en utilisant la balise <figcaption>.



Exemple d'utilisation de la balise figure :




Exemple de mise en place sans style :

<figure>
   <figcaption>Un des logos html5</figcaption>
   <img src="html5.png" alt="figure html5" style="width:200px;" />
</figure>

Le même exemple avec un peu de css :

<figure style="border:solid 1px grey; background-color:silver; text-align:center">
   <figcaption style="width:350px; border-bottom:solid 1px grey;
      line-height:25px; font-weight:bold; background-color:#DEDEDE;">Un des logos html5</figcaption>
   <img src="html5.png" alt="figure html5" style="width:200px;" />
</figure>


Exemple de mise en place sans style :
Un des logos html5

figure html5



Le même exemple avec un peu de css :
Un des logos html5

figure html5