How to add caption for the parent content in HTML5?

It might not come to your surprise that web designers of today are continually exploring innovative ways to enhance the user engagement and interaction on their sites, thereby creating a lasting impact on the users. An effective way to achieve this is by incorporating captions for the multimedia present on their webpages. By including captions for the images, videos, and other visual aids, the web developer can offer additional context and essential details to the users, facilitating better accessibility to the website content, particularly for users who might have difficulties comprehending the visual information.


   <img src="...">

When adding self-contained material to a document, such as diagrams, photographs, or code listings, the HTML <figure> tag is utilised. The figure fits with the document's flow and may be removed without affecting the flow of the document even if it is tied to the primary flow and can be utilised in any location of the content. While the <figcaption> tag can be used to add caption to the <figure> tag. We can put the <figcaption> tag as the first or the final child of <figure> tag to accomplish this.


We are going to make use of the <figure> and <figcaption> tag. Using the <figcaption> tag we are going to add the caption to the <figure> tag.


The following code consists of two parts −

  • HTML document

  • CSS Stylesheet

Let us now try to understand each of these components individually. In the HTML document, I have added an image and a title caption. I have used the above mentioned figure and figcaption elements to accomplish the coupling of this. I have used 'figcaption' tag to define the caption content, while the ‘figure’ tag is used as a parent container.

Coming to CSS stylesheet, I have added styling to the image to make it look better.

<!DOCTYPE html>
   <title>How to add caption for the parent content in HTML5?</title>
         height: 200px;
         width: 300px;
   <h4>How to add caption for the parent content in HTML5?</h4>
      <img src=" "/>
      <figcaption>TutorialsPoint Logo</figcaption>

Now I will explain the above code.


To conclude, the procedure of supplementing a heading for the ascendant material in HTML5 can be expounded as an uncomplicated and effortless chore. Through the application of the aforementioned technique, web developers can elevate the convenience and user acquaintance of their website, thus amplifying the comprehensive functionality and user involvement. It is of utmost importance to acknowledge that the integration of this characteristic can furnish a prompt resolution for visually impaired users and enhance the overall comprehensiveness of the website. Hence, it is incumbent on web developers to utilize this attribute and give paramount significance to the user's experience by assimilating captions into their website composition.

Updated on: 10-Apr-2023


Kickstart Your Career

Get certified by completing the course

Get Started