HTML and CSS Reference
In-Depth Information
In the world of print, most images, charts, and diagrams include a caption to explain what it is they represent.
HTML5 introduces two new elements,
<figure>
and
<figcaption>
, that allow you to add captions to the fig-
ures used in your web pages. This can help to give computer programs more information about what a figure con-
tains.
The
<figure>
and
<figcaption>
elements are not supported by older versions of Internet Explorer and Moz-
illa Firefox.
The <figure> Element
This element should contain your content element and can optionally contain a
<fig
caption>
element. Here is the earlier image example, this time contained within a
<figure>
element.
<figure>
<img src="pepperoni-pizza.jpeg"
alt="A pepperoni pizza presented on a wooden chopping board.">
</figure>
Most browsers will add a margin around your figure element; you can override this
using CSS.
The <figcaption> Element
Often when you are using the
<figure>
element, you will want to add a short caption to describe the content of
the figure. HTML5 brings the new
<figcaption>
element that allows you to do just that.
The
<figcaption>
element should only be used within a
<figure>
element and can be placed either above or
below the contents of the figure.
Here is the image figure again, this time with a caption.
<figure>
<img src="pepperoni-pizza.jpeg"
alt="A pepperoni pizza presented on a wooden chopping board.">
<figcaption>Joe's Special Pepperoni Pizza</figcaption>
</figure>
In your browser, this example should look like Figure 4-12.
