HTML5 <figure> Tag

Topic: HTML5 Tags Reference« Prev|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:

HTML / XHTML: <figure> ... </figure>

The example below shows the <figure> tag in action.

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

Browsers Icon

Basic Support—

  • Firefox 4+
  • Google Chrome 6+
  • Internet Explorer 9+
  • Apple Safari 5.1+
  • Opera 11.1+

Further Reading

See tutorial on: HTML Images.

Related tags: <figcaption>, <img>.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.