The HTML <figure> tag is used to represent a self-contained content, such as an image, a video, or a diagram, that is referenced in the main text of a document. The <figure> tag is often used in conjunction with the <figcaption> tag, which provides a caption or description for the content within the <figure> element.
The <figure> tag is a semantic tag that helps to structure the content of a web page. It is used to group together related content, such as an image and its caption, and to provide additional information about the content to assistive technologies, such as screen readers. The <figure> tag is also useful for search engine optimization, as it helps search engines to understand the context and relevance of the content on a web page.
The <figure> tag can be used to represent a wide range of content, including:
When using the <figure> tag, it is important to include a <figcaption> element to provide a caption or description for the content within the <figure> element. The <figcaption> element should be placed immediately after the <figure> element and should be enclosed within the <figure> element.
The following code demonstrates how to use the <figure> and <figcaption> tags to display an image with a caption:
<figure>
<img src="image.jpg" alt="A beautiful sunset">
<figcaption>A beautiful sunset</figcaption>
</figure>
The following code demonstrates how to use the <figure> and <figcaption> tags to display a video with a caption:
<figure>
<video src="video.mp4" controls></video>
<figcaption>A funny cat video</figcaption>
</figure>
The following code demonstrates how to use the <figure> and <figcaption> tags to display a diagram with a caption:
<figure>
<img src="diagram.png" alt="A diagram of the water cycle">
<figcaption>The water cycle</figcaption>
</figure>
The following code demonstrates how to use the <figure> and <figcaption> tags to display a code snippet with a caption:
<figure>
<pre>
<code>
function addNumbers(a, b) {
return a + b;
}
</code>
</pre>
<figcaption>A function that adds two numbers</figcaption>
</figure>