Table of contents
- 1. Summary
- 1.1. Usage context
- 1.2. Attributes
- 1.3. DOM Interface
- 1.4. Examples
- 1.5. Compatibility
- 1.6. See also
Summary
The HTML Figure Element (<figure>) represents self-contained content, frequently with a caption. While it is related to the main flow, its position is independent of the main flow. Usually this is an image, an illustration, a diagram, a code snippet, or a schema that is referenced in the main text, but that can be moved to another page or to an appendix without affecting the main flow.
Usage notes:
- Being a sectioning root, the outline of the content of the <figure> element is excluded from the main outline of the document.
- A caption can be associated with the <figure> element by inserting a
<figcaption>inside it (as the first or the last child).
Usage context
| Type | Sectioning root |
|---|---|
| Permitted content | A
<figcaption> element, followed by flow content; or flow content followed by a
<figcaption> element |
| Tag omission | None, both the start tag and the end tag are mandatory |
| Permitted parent elements | Any element that accepts flow elements. |
| Normative document | HTML5, section 4.5.11 |
Attributes
This element has no other attributes than the global attributes, common to all elements.
DOM Interface
This element implements the HTMLElement interface.
Examples
<!-- Just a figure --> <figure> <img src="picture.jpg" alt="An awesome picture"> </figure> <!-- Figure with figcaption --> <figure> <img src="picture.jpg" alt="An awesome picture"> <figcaption>Caption for the awesome picture</figcaption> </figure>
Compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | (Supported) | 4.0 (2.0) | 9.0 | 11.0 | 4.0 |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | 4.0 (2.0) | ? | ? | ? |
See also
- The
<figcaption>element.