Content Structure - HTML QuickStart Guide: The Simplified Beginner's Guide to HTML - page 80

Semantic Images with <figure> and <figcaption>
The ability to add images on the web influenced the growth of the WWW from academia to
a worldwide wonder. The <img> element has existed since the early days of the World Wide
Web. From a semantic perspective, the <img> element is greatly limited when it comes to
associating explanatory text with the image. While the 'alt' attribute does partially deal with
this issue, this text is neither visible nor functional beyond its accessibility features.
To address this issue, HTML5 offers the <figure> and <figcaption> elements. The <figure>
element groups the figure with its corresponding caption. For example, we can use the <fig-
ure> and <figcaption> elements to add greater semantic meaning to the image in our sample
CV.
<figure>
<img src="images\cv_picture.jpg" alt="Scott Johnson's profile picture" width="100" height ="150">
<figcaption>Scott Johnson</figcaption>
</figure>
Physically, the figure itself does not necessarily have to be an <img> element. It can be an
SVG drawing, a <canvas> element or even an ASCII graphic, generally anything that can
be interpreted as a figure.
Note: The <canvas> element is a new HTML5 element that acts as a container for
graphics. The graphics themselves are created or drawn via scripting, and the prac-
tical application of this element goes beyond the scope of this topic.