HTML5 <figure> Tag
Topic: HTML5 Tags ReferencePrev|Next
Description
The <figure> element represents a unit of content, optionally with a caption, that is self-contained and typically referenced as a single unit. Usually this is an image, an illustration, a diagram, or a code snippet that is referenced in the main text.
The following table summarizes the usages context and the version history of this tag.
| Placement: | Block |
|---|---|
| Content: | A <figcaption> element, followed by the Block, Inline, and text elements and vice versa |
| Start/End Tag: | Start tag: required, End tag: required |
| Version: | New in HTML5 |
Syntax
The basic syntax of the <figure> tag is given with:
The example below shows the <figure> tag in action.
Example
Try this code »<figure>
<img src="discovery.jpg" alt="Space Shuttle">
<figcaption>NASA - Space Shuttle Discovery</figcaption>
</figure>Note: The content of the <figure> element is however related to the main flow, but its position is independent of the main flow and it can be moved away from the main flow of the document without affecting the document's meaning.
Tag-Specific Attributes
The <figure> tag doesn't have any specific attribute.
Global Attributes
Like all other HTML tags, the <figure> tag supports the global attributes in HTML5.
Event Attributes
The <figure> tag also supports the event attributes in HTML5.
Browser Compatibility
The <figure> tag is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: HTML Images.
Related tags: <figcaption>, <img>.
