The `figure` Tag in HTML: Explained#

The <figure> tag in HTML is used to group media content, such as images, diagrams, or code snippets, along with their captions. This guide explains the usage of the <figure> tag.

Basic Syntax#

The <figure> tag is used in conjunction with the <figcaption> tag to provide a caption for the content:

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

Use Cases#

Images with Captions#

The <figure> tag is commonly used to group images with their captions:

<figure>
  <img src="image.jpg" alt="Description of the image">
  <figcaption>Image caption goes here.</figcaption>
</figure>

Code Snippets with Captions#

You can also use the <figure> tag to group code snippets with their descriptions:

<figure>
  <pre><code>console.log("Hello World");</code></pre>
  <figcaption>JavaScript code snippet</figcaption>
</figure>

Conclusion#

The <figure> tag is a useful HTML element for grouping media content with captions. It provides semantic meaning and improves the accessibility of your content.

The figure Tag in HTML: Explained#