Learn HTML – Part 59 – figure Tag – Media Content

The HTML figure tag is used to group media content such as images, illustrations, or diagrams.

It is often used together with the figcaption tag to provide a caption for the content.

What is the figure Tag?

The figure element represents self-contained content that can be referenced independently.

This includes images, charts, code snippets, or diagrams.

Basic Syntax

<figure>

   <img src="image.jpg" alt="Image">

   <figcaption>Caption text</figcaption>

</figure>

Example – Image with Caption

<figure>

   <img src="https://via.placeholder.com/300" alt="Sample Image">

   <figcaption>This is an example image</figcaption>

</figure>

Output:

What is the figcaption Tag?

The figcaption element defines a caption for the content inside the figure.

It can be placed at the top or bottom of the figure.

Example – Caption at Top

<figure>

   <figcaption>Sample Image</figcaption>

   <img src="https://via.placeholder.com/300" alt="Image">

</figure>

Output:

Why Use figure?

• Groups related media content
• Adds captions using figcaption
• Improves semantic structure
• Makes content easier to understand

The figure tag groups media content with an optional caption using figcaption.

Common Mistakes Beginners Make

• Not using figcaption for captions
• Using figure for unrelated content
• Forgetting alt text for images

Conclusion

The HTML figure tag is used to group media content such as images with captions.

It improves the structure and readability of web content.

What’s Next?

Now that you understand the figure tag, the next step is learning about the figcaption tag, which provides captions for figures.

Next: Learn HTML – Part 60 – figcaption Tag – Figure Caption →

Series: Learn HTML Series