Most browsers will display the element with the following default values:
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
HTML, or Hypertext Markup Language, is used to create web pages and define their structure and content. HTML has varieties of elements to create a web page. The image element is one of the essential elements of web content. Images are a powerful tool for presenting ideas and feelings on a web page and enhancing the visual appeal of a web page. Additionally, Image captions make this even more powerful because images alone are not enough to convey a message or provide context. Captions are short descriptions that provide additional information to the viewer along with the images.
Syntax
Below is a syntax for image caption −
Introduction to HTML Image Captions
Image captions are an important part of web design images because it provides additional information to the viewer. In HTML, it is a very simple and effective way to add captions to images on a web page.
HTML allows setting a caption for an image using the and elements. The element groups the image and its caption together, while the element is used to define the caption text.
Here is an example of how to add a caption to an image using HTML −
16-Bit RGB Image
In the above example, an image is added to the figure element, along with a caption using the figcaption element.
Example
Below is the full code example to set the caption for an image using HTML.
Caption for an image using HTML
Fig: 16-Bit RGB Image
Creating a Responsive Caption for an Image in HTML
It is important that the added image should be responsive and adapt to different screen sizes for a better user experience. CSS allows developers to create a responsive image caption. We can create a responsive image caption by styling the and elements. For example to create a responsive caption for an image, we can use the below CSS code −
In the above CSS code, we have set center alignment for the whole body, and then set the display property to block and the margin and padding properties to 0.
After that we have styled the figcaption element by setting the font family, size, and weight, as well as the color and alignment of the text. Finally, we have added a margin-top property to create some space between the image and the caption.
Example
Below is the full code example to set the responsive caption for an image.
In the above article, we have discussed adding captions to images using HTML. Adding captions to images is a simple and effective way of providing additional information to the viewer. We can add the caption with an image by using the figure and fig caption elements.
Add Captions to Multiple Images Using the and Tags
Add Captions to Multiple Images Using the 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 and Tags
HTML has a specific tag used to insert a caption to an image. The represents a caption for a element, which can be placed as the first or last child of the element in HTML.
and are two new elements introduced as tags in HTML5. Here, the tag is best used to display images and graphics, whereas tells the viewers what they are looking at.
The tag also supports the HTML’s Global Attributes and Event Attributes.
In the following example, we are using an element to mark up an image on a web page or a document and an element to define a caption for the image:
Here we can adjust the image’s resolution (height and width) using the style attribute of the tag in HTML.
Here, the resolution of the image is set to its original size.
Because and 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 and as in the following example:
Here, we can edit the and 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 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:
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 Tag
With the aid of the 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.
html>head>style>#picturestext-align:center;margin:50pxauto;>#picturesamargin:0px50px;display:inline-block;text-decoration:none;color:black;>style>head> body>divid="pictures">ahref="">imgsrc="/img/DelftStack/logo.png"width="480px"height="90px">divclass="caption">Fig 1 - DelftStack Logodiv> a> ahref="">imgsrc="/img/DelftStack/logo.png"width="480px"height="90px">divclass="caption">Fig 2 - DelftStack Logodiv> 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 and 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.
