what is the usage of HTML5 figure with img
I think <figure> is useless without <figurecaption>, isn't it?
It will be helpful if explain with an example.
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
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.
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>