HTML5 Element – figure
<figure> <img src="./images/image.gif" /> <figcaption> <p>Some text to describe your image as a caption.</p> </figcaption> </figure>
The figure element is used in combination with the figcaption element to add a caption to any given image. The example above shows the use of the alt and title attributes to the image element which gives an alternative text to display if the image is not found and a title which appears when hovering over the image. The opening figure tag goes before the image and caption. The figcaption element is placed after the image and holds the caption text. Prior to this HTML5 addition, image caption’s have been rather difficult to implement. The figure element makes this very easy.
<figure style="margin-left: 15px"> <img src="./images/image.gif" alt="Image Description" title="Image #1" /> <figcaption><p>Some text to describe your image as a caption.</p></figcaption> </figure>
Here is the code in action:
The figure element is supported by most browsers: