Revision 1806 of <figure>

  • Revision slug: HTML/Element/figure
  • Revision title: figure
  • Revision id: 1806
  • Created:
  • Creator: dhodder
  • Is current revision? No
  • Comment 1 words added

Revision Content

{{ HTMLVersionHeader("5") }}

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 {{ HTMLElement("figcaption") }} inside it (as the first or the last child).

Usage context

Type Sectioning root
Permitted content A {{ HTMLElement("figcaption") }} element, followed by flow content; or flow content followed by a {{ HTMLElement("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

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 8 {{ CompatGeckoDesktop("2.0") }} 9.0 11.10 5.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 {{ CompatGeckoMobile("2.0") }} 9.0 11.0 5.1 (iOS 5.0)

See also

  • The {{ HTMLElement("figcaption") }} element.

Revision Source

<p>{{ HTMLVersionHeader("5") }}</p>
<h2>Summary</h2>
<p>The <em>HTML Figure Element</em> (<span style="font-family: Courier New;">&lt;figure&gt;</span>) 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.</p>
<div class="note"> <p><em>Usage notes: </em></p> <ul> <li>Being a <a href="/en/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="en/Sections and Outlines of an HTML5 document#sectioning root">sectioning root</a>, the outline of the content of the <span style="font-family: Courier New;">&lt;figure&gt; </span>element is excluded from the main outline of the document.</li> <li>A caption can be associated with the <span style="font-family: Courier New;">&lt;figure&gt; </span>element by inserting a {{ HTMLElement("figcaption") }} inside it (as the first or the last child).</li> </ul>
</div>
<h3>Usage context</h3>
<table class="standard-table"> <tbody> <tr> <th>Type</th> <th><a href="/en/Sections_and_Outlines_of_an_HTML5_document#sectioning_root" title="en/Sections and Outlines of an HTML5 document#sectioning root">Sectioning root</a></th> </tr> <tr> <td>Permitted content</td> <td>A {{ HTMLElement("figcaption") }} element, followed by <a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#flow content">flow content</a>; or flow content followed by a {{ HTMLElement("figcaption") }} element</td> </tr> <tr> <td>Tag omission</td> <td>None, both the <span title="syntax-start-tag">start tag</span> and the <span title="syntax-end-tag">end tag</span> are mandatory</td> </tr> <tr> <td>Permitted parent elements</td> <td>Any element that accepts flow elements.</td> </tr> <tr> <td>Normative document</td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-mark-element" rel="external nofollow" target="_blank" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-mark-element">HTML5, section 4.5.11</a></td> </tr> </tbody>
</table>
<h3>Attributes</h3>
<p>This element has no other attributes than the <a href="/en/HTML/Global_attributes" rel="internal">global attributes</a>, common to all elements.</p>
<h3 class="editable">DOM Interface</h3>
<p>This element implements the <code><a href="/en/DOM/element" title="en/DOM/element">HTMLElement</a></code> interface.</p>
<h3>Examples</h3>
<pre class="brush: html">&lt;!-- Just a figure --&gt;
&lt;figure&gt;
	&lt;img src="picture.jpg" alt="An awesome picture"&gt;
&lt;/figure&gt;

&lt;!-- Figure with figcaption --&gt;
&lt;figure&gt;
	&lt;img src="picture.jpg" alt="An awesome picture"&gt;
		
	&lt;figcaption&gt;Caption for the awesome picture&lt;/figcaption&gt;
&lt;/figure&gt;
</pre>
<h3>Compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>8</td> <td>{{ CompatGeckoDesktop("2.0") }}</td> <td>9.0</td> <td>11.10</td> <td>5.1</td> </tr> </tbody> </table> </div> <div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>3.0</td> <td>{{ CompatGeckoMobile("2.0") }}</td> <td>9.0</td> <td>11.0</td> <td>5.1 (iOS 5.0)</td> </tr> </tbody> </table> </div>
</div>
<h3>See also</h3>
<ul> <li>The {{ HTMLElement("figcaption") }} element.</li>
</ul>
Revert to this revision