<figure> Tag in HTML

The <figure> tag is used to encapsulate content such as images, illustrations, diagrams, or other media that are referenced in the content of the page. It is often used together with the <figcaption> tag to provide a caption for the media.

Key Points on <figure> Tag:

• The <figure> tag is a block-level element.
• It can contain media elements such as images, videos, audio, or illustrations.
• It is often paired with the <figcaption> tag to provide a description or caption for the media content.
• It helps to group the content with its caption, making it more accessible and organized.

Syntax of <figure> Tag:

<figure>
            <img src="image.jpg" alt="Description of image">
            <figcaption>This is an image description</figcaption>
        </figure>

Example of <figure> Tag in HTML:

This example demonstrates how to use the <figure> tag to encapsulate an image and its caption using the <figcaption> tag.

<figure>
    <img src="B1.jpg" alt="A beautiful butterfly">
    <figcaption>This is a beautiful butterfly having multiple colours.</figcaption>
</figure>
        
    

Output

The <figure> tag helps in organizing media content along with a caption. It is particularly helpful in ensuring that media content such as images and videos are semantically grouped with their descriptions, making your content more accessible and search-engine-friendly.