How to Add Captions to Images in HTML
-
Use of the
<figcaption>and<figure>Tags - Add Captions on the Top of an Image
-
Add Captions to Multiple Images Using the
<figure>and<figcaption>Tags -
Add Captions to Multiple Images Using the
<div>Tag - Conclusion
This article discusses the different approaches to writing a caption under or above an image or images on a web page using HTML and CSS properties.
Use of the <figcaption> and <figure> Tags
HTML has a specific tag used to insert a caption to an image. The <figcaption> represents a caption for a <figure> element, which can be placed as the first or last child of the <figure> element in HTML.
<figure> and <figcaption> are two new elements introduced as tags in HTML5. Here, the <figure> tag is best used to display images and graphics, whereas <figcaption> tells the viewers what they are looking at.
The <figcaption> tag also supports the HTML’s Global Attributes and Event Attributes.
In the following example, we are using an <figure> element to mark up an image on a web page or a document and an <figcaption> element to define a caption for the image:
<!DOCTYPE html>
<html>
<body>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo">
<figcaption>DelftStack Logo</figcaption>
</figure>
</body>
</html>
Here we can adjust the image’s resolution (height and width) using the style attribute of the <img> tag in HTML.
Here, the resolution of the image is set to its original size.
Because <figure> and <figcaption> are new HTML5 tags, old version browsers cannot understand the process of these two tags. So these tags get rendered on the web page as inline tags, which means those tags won’t get an automatic line break for figure captions where they will just be set side-by-side with the images.
So, as a solution, we can use CSS properties to style <figure> and <figcaption> as in the following example:
<!DOCTYPE html>
<html>
<head>
<style>
figure {
border: 5px #4257f5 solid;
padding: 4px;
margin: auto;
}
figcaption {
background-color:grey;
color: white;
font-style: italic;
padding: 2px;
text-align: center;
}
</style>
</head>
<body>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo" style="width:100%">
<figcaption>DelftStack Logo</figcaption>
</figure>
</body>
</html>
Here, we can edit the <figcaption> and <figure> tags as per the necessity by using different properties of CSS and values.
Add Captions on the Top of an Image
Without any CSS guidelines to the contrary, the caption will appear at the figure’s top or bottom depending on whether the <figcaption> element is the first or last element inside the figure.
In this example, we will set the caption of the image at the top of it as follows:
<!DOCTYPE html>
<html>
<head>
<style>
figure {
border: 5px #4257f5 solid;
padding: 4px;
margin: auto;
}
figcaption {
background-color:grey;
color: white;
font-style: italic;
padding: 2px;
text-align: center;
}
</style>
</head>
<body>
<figure>
<figcaption>Fig.2 - DelftStack Logo</figcaption>
<img src="/img/DelftStack/logo.png" alt="logo" style="width:100%">
</figure>
</body>
</html>
Add Captions to Multiple Images Using the <figure> and <figcaption> Tags
We can add captions to multiple images with the aid of <figcaption> :
<!DOCTYPE html>
<html>
<body>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo">
<figcaption>DelftStack Logo</figcaption>
</figure>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo">
<figcaption>Fig.2 - DelftStack Logo</figcaption>
</figure>
</body>
</html>
We can use CSS properties to format the captions of the images by adding different styles or colors to the text.
Add Captions to Multiple Images Using the <div> Tag
With the aid of the <div> tag and CSS properties, we can add captions to multiple images at the same time. In the below example, we will add captions to two images, and optionally, we can add a link that directs to another web page or website once clicked on the image.
<!DOCTYPE html>
<html>
<head>
<style>
#pictures{
text-align:center;
margin:50px auto;
}
#pictures a{
margin:0px 50px;
display:inline-block;
text-decoration:none;
color:black;
}
</style>
</head>
<body>
<div id="pictures">
<a href="">
<img src="/img/DelftStack/logo.png" width="480px" height="90px">
<div class="caption">Fig 1 - DelftStack Logo</div>
</a>
<a href="">
<img src="/img/DelftStack/logo.png" width="480px" height="90px">
<div class="caption">Fig 2 - DelftStack Logo</div>
</a>
</div>
</body>
</html>
When using this method, we can add the caption of the images at the top with further implementations.
Conclusion
Different approaches can be used to caption an image or images using HTML together with CSS properties, as mentioned above. Still, some methods, like adding an image or images and their captions in a table format, are not currently appropriate.
New tags such as <figure> and <figcaption> in HTML5 have made the task of captioning an image easier.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.