<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
Here’s an example of how to use the
<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.
<figure> element can contain any type of self-contained content that is meaningful on its own. This could include multimedia elements, such as
<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
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
<figcaption> together improves accessibility and provides a clear visual and semantic representation of the content and its associated information.