web-dev-qa-db-fra.com

à quoi sert la figure HTML5 avec img

Y a-t-il un avantage/usage spécifique à utiliser HTML5 <figure> sur <img> ?

Je pense <figure> est inutile sans <figurecaption> , n'est-ce pas?

Il serait utile d'expliquer avec un exemple.

38
diEcho

Techniquement, les images ne sont pas insérées dans une page HTML, les images sont liées à des pages HTML. Le <img> tag crée un espace d'attente pour l'image référencée.

Alors que le contenu du <figure> L'élément est lié au flux principal, sa position est indépendante du flux principal et, s'il est supprimé, il ne devrait pas affecter le flux du document

De http://dev.w3.org/

L'élément img représente une image. et l'élément La figure représente une unité de contenu, éventuellement avec une légende, qui est autonome, qui est généralement référencée comme une seule unité à partir du flux principal du document, et qui peut être éloigné du flux principal du document sans affecter la signification du document.

19
NullPoiиteя

La balise fournit un conteneur pour un contenu équivalent à une figure ou un diagramme dans un livre. Il peut être utilisé pour regrouper une légende avec une ou plusieurs images, un bloc de code ou autre contenu.

En d'autres termes, nous permet de travailler plus librement, de manière réaliste avec des images, des diagrammes en permettant de les regrouper et sous-titrer une ou des images avec une seule légende.

Source: http://www.html-5.com/tags/figure-tag/index.html

8
Viral Jain

HTML5 figure est utilisé chaque fois que vous utilisez la balise img, video Avec caption (figcaption) dessus

Si vous disposez d'un certain nombre d'images associées (ou d'un autre contenu) avec du texte de légende, vous pouvez utiliser des éléments de figure imbriqués pour associer à la fois une légende de groupe et une légende individuelle à chaque instance à l'aide de l'élément figcaption.

<figure role="group">
 <img src="castle-etching.jpg" alt="The castle has one tower, and a tall wall around it.">
 <figcaption>Charcoal on wood. Anonymous, circa 1423.</figcaption>
</figure>

Voici quelques exemples

1
Dipak