HTML5 <figure> and <figcaption> Elements.
The <figure> element specifies content (figures) that is self-contained such as a photo, illustration, diagram or code-listing. This content is related to the flow of
the main document but could be removed from the document and placed in an appendix or reference section without altering the flow of the main body of the document.
The <figcaption> element provides a caption for the content contained by the <figure> element and if not set then the content in
the <figure> element has no caption.
The <figcaption> element is always a child of the <figure> element although it can be
placed before or after the main content and a <figure> element cannot have more than one <figcaption> child.
Examples of <figure> and <figcaption> in use.
Here are two examples of the <figure> element using a photo and adding a caption with <figcaption>. They are totally unstyled, which you can change as you wish,
but illustrate how browsers respond to these two elements. The placement of <figcaption> in the code before or after the <img> element
dictates whether the caption is displayed above or below the image.
Using <figcaption> before the content.
Code:
<figcaption>Example with the caption before the image<figcaption/>
<img src="figexample.jpg"
<figure/>
Result:
Using <figcaption> after the content.
Code:
<img src="figexample.jpg"
<figcaption>Example with the caption after the image<figcaption/>
<figure/>
Result:
NOTE: Versions of Internet Explorer before IE9 do not support this element and the caption is positioned to the side of the content instead of above or below.