HTML5 Figure / FigCaption Example


Figure/ FigCaption

The <figure> and <figcaption> elements should be used in combination to identify one or more images which have associated captions. Think of this as an enhancement to the alternate text attribute associated with an image to increase accessibility. So, should one use alternate text with an image? I believe so. Many individuals may not have audio browsers which support the emerging HTML5 elements. Also, I think it best to use these in conjunction. For example, the alternate text for an image can contain a short phrase and the <figcaption> element can contain more details. Question for visitors to this page - if one turns off images (using capabilities in your browser), will the figure caption still display? Try it to find out.

View the source code of this page to better understand how these elements are used.

Example <figure> and <figcaption>

orchid blossom
A close-up of an orchid taken at the Changi Airport in Singapore.

In the above example, you see both the use of alternate text for each image as well as the new HTML5 elements. If you use <figcaption>, it should either be the first child (or last child) of the <figure> element. Note also, that I am not applying much styling to these pages. Yes, I could make the image float or position it in a certain spot. However, that is why I also have a section on CSS-3 at this site.