HTML5 - Figcaption Tag

First Page
Next Page

HTML5 Figcaption Tag

FIGCAPTION Element is used to put an additional information about the image. As if we have to give a discription about the image, we don't need to embed an another paragraph to define the description.

It may slightly complex also, to use another paragraph and style it with the displayed image.

So with FIGCAPTION Element, we can define a description and it will automatically adjust its surrounding style according the image.

HTML element <figure> is used to contain images and associate a caption to it. You can even have multiple images within a single <figure> element as long as they have a same caption

The <figure> element is self contained within itself and can be moved away from the main flow of the document without affecting the flow of the document.

A <figure> element usually contains a <figcaption> within it to add a caption to the image.

Example

<!DOCTYPE html>
<html>
<body>
<h2>Places to Visit</h2>
<p>Switzerland is a mountainous Central European country, home to numerous lakes, villages and the high peaks of the Alps. Its cities contain medieval quarters, with landmarks like capital Bern’s Zytglogge clock tower and Lucerne’s wooden chapel bridge.</p>
<figure>
  <img src="img/switzerland.jpg" alt="Switzerland.jpg" style="width:100%">
  <figcaption>Fig.1 - Switzerland is a Mountainous Central European country.</figcaption>
</figure>
</body>
</html>

Result

Places to Visit

Switzerland is a mountainous Central European country, home to numerous lakes, villages and the high peaks of the Alps.

Its cities contain medieval quarters, with landmarks like capital Bern’s Zytglogge clock tower and Lucerne’s wooden chapel bridge.

Switzerland.jpg
Fig.1 - Switzerland is a Mountainous Central European country.
First Page
Next Page