Definition
The <figure> HTML element is used to encapsulate self-contained content, such as images, illustrations, diagrams, videos, or code snippets, within an HTML document. It provides a way to group and semantically associate the content with its caption or description using the <figcaption> element.
Here’s an example of how to use the <figure> element:
<figure>
<img src="image.jpg" alt="A beautiful landscape" />
<figcaption>A beautiful landscape captured at sunset.</figcaption>
</figure>
In this example, the <figure> element wraps an image and its corresponding caption using the <figcaption> element. This creates a semantic relationship between the image and its description, making it clear that they are part of the same content unit.
The <figure> element can contain any type of self-contained content that is meaningful on its own. This could include multimedia elements, such as <img>, <video>, or <audio>, as well as code snippets, diagrams, or other visual or interactive content.
By using the <figure> element, you provide a clear grouping of the content and enable assistive technologies to properly identify and associate the content and its description.
It’s worth noting that the <figcaption> element is optional within the <figure> element. If you have no caption or description for the content, you can omit the <figcaption> element.
In summary, the <figure> element is used to group and semantically associate self-contained content within an HTML document. It allows for the inclusion of images, multimedia, code snippets, and more, along with their captions or descriptions using the <figcaption> element. Using <figure> and <figcaption> together improves accessibility and provides a clear visual and semantic representation of the content and its associated information.