How to add caption for the parent content in HTML5 ?

Last Updated : 06 Apr, 2022

HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between web pages. A markup language is used to define the text document within the tag which defines the structure of web pages.

In this article, we will learn how to add captions for the parent content.

In HTML, we have a tag <figcaption> which is used to give a caption to the parent content. This parent content is defined under the tag <figure>. Let us learn more about both tags.

figure: This is used to include self-contained information such as illustrations, diagrams, photographs, or code listings in a document. A caption can be connected with the <figure> element by putting an <figcaption> as the first or final child inside it. The figure’s caption is given as the first <figcaption> element found in the figure.

Syntax:

<figure>
   <img src="...">
   <figcaption>...</figcaption>
</figure>

Parameters:

img src: This tag is used in the document to include an image source.
figcaption: This element is used to specify the image’s caption.

figcaption: The <figcaption> tag in HTML is used to set a caption to the figure element in a document. This tag is new in HTML5.

Syntax:

<figcaption> Figure caption </figcaption>

Let’s see examples of how can we add a caption to the parent component.

Example 1: In this example, to mark up a “geeksforgeeks “ image in a document, we will use the <figure> element and the <figcaption> element to specify a caption for the image.

HTML

<!DOCTYPE html> 
<html> 
    <body> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h2>Adding caption for the parent content.</h2> 
        <figure> 
            <h3 style="color:red">I am a Parent Content</h3> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"
            alt="gfglogo" style="width:50%,height:50%"> 
            <!--HTML figcaption tag starts here-->
            <figcaption> 
                GeeksforGeeks Logo 
            </figcaption> 
            <!--HTML figcaption tag ends here-->
        </figure> 
    </body> 
</html>                     

Output:

Example 2: In this example, we will use a figure tag with multiple images nested within a single <figure> element with a single caption.

HTML

<!DOCTYPE html> 
<html> 
    <body> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h2>Adding caption for the parent content.</h2> 
        <figure> 
            <h3 style="color:red">I am a Parent Content</h3> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png"
            alt="gfglogo" style="width:50%,height:50%"> 
            <!--HTML figcaption tag starts here-->
            <figcaption> 
                GeeksforGeeks Logo 
            </figcaption> 
            <!--HTML figcaption tag ends here-->
        </figure> 
    </body> 
</html>                     