Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 803
diEcho Avatar asked Sep 17 '12 05:09

diEcho


People also ask

What is the use of figure tag in html5?

The <figure> tag in HTML is used to add self-contained content like illustrations, diagrams, photos, or codes listing in a document.

What is IMG used for in HTML?

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.

Should I use figure for images?

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.


2 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," 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."

like image 123
NullPoiиteя Avatar answered Oct 06 '22 03:10

NullPoiиteя


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

like image 27
Viral Jain Avatar answered Oct 06 '22 01:10

Viral Jain