In traditional printed material like books and also magazines, an image, chart, or code instance would it is in accompanied through a caption. Before now, us didn’t have actually a means of semantically noting up this kind of content straight in our HTML, rather resorting come CSS class names. HTML5 wishes to resolve that problem by presenting the and also elements. Let’s explore!

The element

The facet is intended come be offered in conjunction with the element to note up diagrams, illustrations, photos, and code examples (among various other things). The spec claims this around :

The figure facet represents a unit of content, optionally v a caption, that is self-contained, that is commonly referenced together a single unit native the main flow of the document, and that have the right to be moved away from the main circulation of the document without affecting the document’s meaning.

You are watching: The html5 figure element is typically used as a container for

W3C Specification

The element

The facet has been the subject of lot debate. The spec initially wanted come repurpose rather than introduce a brand-new element. Various other suggestions consisted of , , or the – elements. was changed, so us then used a combination of and also inside at Jeremy’s suggestion. Most of these suggestions failed since there was no backwards compatibility because that styling with CSS.

Regular readers will understand that a new element was freshly introduced, specific . Who knows if it’ll stick, yet for now here’s what the spec says about :

The figcaption element represents a inscription or legend for a figure.

See more: What Is The Final Speed Of The White Ball? ? Solved:A White Billiard Ball With Mass Mw = 1

W3C Specification

The facet is optional and can show up before or after ~ the contents within the . Only one element may be nested in ~ a , back the aspect itself may contain multiple various other child elements (e.g.,

*

Here’s the password for that:

*

Figure with an image and caption

An image within a facet with one explanatory caption:

*
A cheeky macaque, lower Kintaganban River, Borneo. Original by Richard Clark

and the password that us used:

*
A cheeky macaque, lower Kintaganban River, Borneo. Original by Richard Clark

A number with lot of images

Nesting multiple images within one aspect with a single caption:

*
*
*
Australian Birds. Native left to right, Kookburra, Pelican and also Rainbow Lorikeet.Originals through Richard Clark

The code:

*
*
*
Australian Birds. Native left to right, Kookburra, Pelican and Rainbow Lorikeet. Originals by Richard Clark

Figure through a code block

The aspect may likewise be used for code examples:

Creative Commons Attribution Share-alike license

Using roughly a an innovative Commons license attach with rel="license"

Here’s the code for that:

Creative Commons Attribution Share-alike license

Using about a an innovative Commons license link with rel="license"

Differences in between and also

We extended in an earlier article, however it is necessary to keep in mind the difference between the two. You must choose between or by asking yourself if the content is vital to knowledge the section:

If the content is simply related and not essential, usage . If the content is essential however its place in the circulation of content isn’t important, use .

Having claimed that, if its position relates come previous and also subsequent content, usage a an ext appropriate facet — e.g., a
, a plain old

*