HTML figure Tag

The <figure> tag in HTML is used to represent self-contained content, such as images, illustrations, diagrams, videos, or any other media, along with an optional caption provided by the <figcaption> tag. It allows you to group together the content and its associated caption for better semantic structure.

Here’s an example of how the <figure> tag is used:

<figure>
      <img src="image.jpg" alt="Description of the image">
      <figcaption>Caption or description for the image</figcaption>
</figure>

In this example, the <figure> element contains an <img> tag representing an image. The src attribute specifies the image source, and the alt attribute provides alternative text for accessibility purposes. The <figcaption> tag is used to provide a caption or description for the image.

The <figure> tag can also be used with other types of content, such as videos or illustrations. For example:

<figure>
      <video src="video.mp4" controls></video>
      <figcaption>Caption or description for the video</figcaption>
</figure>

<figure>
     <svg>...</svg>
     <figcaption>Caption or description for the SVG illustration</figcaption>
</figure>

In these examples, the <figure> element is used to group a video element and an SVG illustration, respectively. The <figcaption> tag is used to provide captions or descriptions for the associated content.

By using the <figure> and <figcaption> tags, you provide a clear association between the content and its caption, enhancing the semantic structure and accessibility of your document. It also helps style or position the content and caption together, ensuring they are visually presented as a cohesive unit.

It’s important to note that the <figure> tag is not limited to containing only a single media element. You can include multiple elements within a <figure> if they are all related and share a common caption.

Overall, the <figure> tag in HTML is used to group self-contained content, such as images, videos, or illustrations, along with an optional caption provided by the <figcaption> tag. It helps create a semantic structure and improve the accessibility and presentation of the content within your HTML document.