Add Captions to the Images in HTML5

Traditionally, every image is associated with a caption, which may be a short text description or a legend for that image.

With HTML, two new semantic elements have been introduced that allow you to obtain this result by associating text with an image that acts as its legend.

The elements that allow you to associate a caption to an image are <figure> and <figcaption>. The <figure> tag is a container for images:

<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwyu1y49lup6sD1gmlHMArpvNaEn7yh3ZJYuvQYhtz5uGVXqPbbUYvN31IX85idGxbIhplm2XWDyw8f13lb1pfTAGpGi6Ier5k0bMwyfSW0LGuJxR4coKjtAn8qvhjghZ_KWlkZ15N9aE/s1600/logo1.png" alt="my website Logo">
</figure>

The <figcaption> is the text associated with the image that acts as a caption:

<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwyu1y49lup6sD1gmlHMArpvNaEn7yh3ZJYuvQYhtz5uGVXqPbbUYvN31IX85idGxbIhplm2XWDyw8f13lb1pfTAGpGi6Ier5k0bMwyfSW0LGuJxR4coKjtAn8qvhjghZ_KWlkZ15N9aE/s1600/logo1.png" alt="my website Logo">
<figcaption>My Website Logo !</figcaption>
</figure>

It’s also possible to nest multiple images in a single caption:

<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwyu1y49lup6sD1gmlHMArpvNaEn7yh3ZJYuvQYhtz5uGVXqPbbUYvN31IX85idGxbIhplm2XWDyw8f13lb1pfTAGpGi6Ier5k0bMwyfSW0LGuJxR4coKjtAn8qvhjghZ_KWlkZ15N9aE/s1600/logo1.png" alt="my website Logo">
<img src="http://www.flickr.com/photos/44124469126@N01/5431316371/" alt="Visiting Google's
headquarters">
<figcaption>My Website Logo !</figcaption>
</figure>

One of the advantages of using the <figure> and <figcaption> tags is that you can apply a CSS to them via an external or internal style sheet, just as you do for any other container tag.

With HTML5, it is very important to plan the structure of the web page carefully. With all the new tags you have been provided, you can give an unambiguous semantic value to each element.

In this solution, you will create a simple business card with a picture, name, surname, and role, by specifying the text as a caption for the image. Then you will apply some simple style sheets, just to improve the final effect.

Let’s begin by declaring the container figure, where you will declare the image:

<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwyu1y49lup6sD1gmlHMArpvNaEn7yh3ZJYuvQYhtz5uGVXqPbbUYvN31IX85idGxbIhplm2XWDyw8f13lb1pfTAGpGi6Ier5k0bMwyfSW0LGuJxR4coKjtAn8qvhjghZ_KWlkZ15N9aE/s1600/logo1.png" alt="my website Logo">
</figure>
This image is loaded from the LinkedIn server. Add the caption by using the <figcaption> tag:
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwyu1y49lup6sD1gmlHMArpvNaEn7yh3ZJYuvQYhtz5uGVXqPbbUYvN31IX85idGxbIhplm2XWDyw8f13lb1pfTAGpGi6Ier5k0bMwyfSW0LGuJxR4coKjtAn8qvhjghZ_KWlkZ15N9aE/s1600/logo1.png" alt="my website Logo">
<br /> <figcaption class="profile-header">Logo Of My Website </figcaption>
</figure>

We’ve used a <br> to send the text of the caption as a new paragraph; otherwise it would have appeared next to the image.

Now you can create style sheets to re-create the border effects, define the margins, and set the background color for the image:

img
{
padding:2px;
border:1px solid #e6e6e6;
background-color:#fff;
}

Finally, add styles for the container and the caption text:

figure, figcaption {
display: block;
background-color:#ddf0f8;
border:1px solid #666;
text-align: center;
}
figcaption {
font-face: Arial;
font-size: 12px;
font-style: italic;
background-color:#ddf0f8;
padding:2px;
min-height:10px;
margin:0 0 3px;
border:1px solid #FFF
}