Is there any specific advantage/usage of using HTML5 <figure>
over <img>
?
I think <figure>
is useless without <figurecaption>
, isn't it?
It will be helpful if explain with an example.
The <figure> tag in HTML is used to add self-contained content like illustrations, diagrams, photos, or codes listing in a document.
The <IMG> tag is used to incorporate in-line graphics (typically icons or small graphics) into an HTML document. This element is NOT intended for embedding other HTML text. For large figures with captions and text flow see FIG element.
The difference between the figure and the image tag is pretty simple. The image tag is used to embed the image in an HTML document whereas the figure tag is used to semantically organize the content of an image in the HTML document. It is critical to note that these two elements are not interchangeable.
Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img>
tag creates a holding space for the referenced image.
While the content of the <figure>
element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document
From http://dev.w3.org/
"The img element represents an image," while "[t]he figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning."
The tag provides a container for content that is equivalent to a figure or diagram in a book. It can be used to group a caption with one or more images, a block of code or other content.
In other words, enables us to work more freely, realistically with images, diagrams by enabling to group them & caption one or images with a single caption.
Source: http://www.html-5.com/tags/figure-tag/index.html
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With