what is the usage of HTML5 figure with img

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.

Answers


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. and the The 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


HTML5 figure is used whenever you use img, video tag with caption (figcaption) on it

If you have a number of related images (or other content) with caption text, you can use nested figure elements to associate both a group caption and an individual caption to each instance using the figcaption element.

<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>

Here are some examples


Need Your Help

Background Location Services not working in iOS 7

ios objective-c ios7 core-location ios-background-mode

I've recently upgraded my iOS devices to use iOS 7. One of the apps that we're developing uses background location services to track device location and all of our testers have reported that the ap...

Charles proxy SSL connections won't show hostnames, only ips

ios debugging ssl ip charles-proxy

I'm using Charles to debug my apps- on both android and ios.