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 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
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
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 captionAn image within a facet with one explanatory caption:
and the password that us used:
A number with lot of imagesNesting multiple images within one aspect with a single caption:
Figure through a code blockThe aspect may likewise be used for code examples:
Creative Commons Attribution Share-alike licenseUsing roughly a an innovative Commons license attach with rel="license"
Here’s the code for that:
Creative Commons Attribution Share-alike licenseUsing 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