HTML balise <figure>

Somaire

Définition et utilisation balise <figure>

LES BALISES HTML

La balise <figure>  représente une unité de contenu, éventuellement avec une légende.

La balise <figure>  est autonome et généralement référencée comme une seule unité dans le flux principal du document, et qui peut être éloigné de l'écoulement principal du document sans affecter le sens du document.

La balise <figure> spécifie le contenu autonome, comme les illustrations, schémas, photos, listes de codes, etc..

L’élément figure doit avoir à la fois une balise de début <figure> et une balise de fin </figure>.

L'élément <figure> est de type block et donc il engendre un retour à la ligne avant et après l’élément.

Exemple Utilisation de l’élément <figure> pour afficher des photos dans un document. L'élément <figure> contient également une légende :

Sélectionner le code

	 <!DOCTYPE html>
	  <html lang="fr">
	  <head>
	  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
	  <title>html5 demo</title>
	  </head>
	  <body>
	  <article>La tour Eiffel est une tour de fer de 324 mètres de hauteur (avec une
	 antennes) située à Paris, à l’extrémité nord-ouest du parc du Champ-de-Mars en
	 bordure de la Seine.
	   Construite par Gustave Eiffel et ses collaborateurs pour l’Exposition universelle de
	 Paris ,  initialement nommée « tour de 300 mètres », ce monument est devenu le
	 symbole de la capitale de france,
	   et un site touristique de premier plan .
	  </article>
	   <figure> 
	    <img src="../images/toure-eiffel.jpg" alt="Régions de France" width="100">
	    <figcaption>Fig.1 - La toure eiffel.</figcaption>
	  </figure>
	  </body>
	  </html>
	  

 Resultat :

La tour Eiffel est une tour de fer de 324 mètres de hauteur (avec une antennes) située à Paris, à l’extrémité nord-ouest du parc du Champ-de-Mars en bordure de la Seine. Construite par Gustave Eiffel et ses collaborateurs pour l’Exposition universelle de Paris , initialement nommée « tour de 300 mètres », ce monument est devenu le symbole de la capitale de france, et un site touristique de premier plan .
Régions de France
Fig.1 - La toure eiffel.

Appui de navigateur

Internet  Explorer Firefox Opera Google Chrome  Safari

La balise <figure> est prise en charge dans Internet Explorer 9, Firefox, Opera, Chrome et Safari.

Remarque : Internet Explorer 8 et versions antérieures, ne supportent pas la balise <figure> .

Différences entre HTML 4.01 et HTML5

La balise <figure> est nouvelle en HTML5.

astuceAstuce : L'élément <figcaption> est utilisé pour ajouter une légende pour l'élément <figure> .

Attributs globaux

La balise <figure> prend également en charge les  attributs globaux HTML.

Attributs de l'événement

La balise <figure> prend également en charge les Attributs de l'événement au format HTML.


Retour à l'accueil du site

Par carabde 10 mars 2014

  • Trafic Booster
    hebergement web

    SCREEBER - Logiciel de copywriting

    SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


    HTML5, CSS3, JavaScript pour débutants Tome 1
    HTML5, CSS3, JavaScript
    pour débutants Tome 1

    Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    Utiliser les class et id en css

    Affecter des styles différents à de mêmes balises. Le concept des attributs: class et id....

    HTML les attributs globaux

    Certains attributs sont définis de manière globale et peuvent être utilisés sur n'importe quel élément, tandis que d'autres sont définis pour des éléments spécifiques seulement....

    Balise noframes

    Non pris en charge HTML5. Définit un autre contenu pour les utilisateurs qui ne supportent pas les cadres



    Rentabilisez efficacement votre site