<figure>

Definition

The HTML <figure> element represents self-contained content, potentially with an optional caption, which is typically referenced as a single unit. It can be used to group together images, videos, diagrams, code snippets, or any other type of content that can be referenced as a single entity. The <figure> element can be accompanied by a <figcaption> element to provide a caption or description for the content. This can be useful for accessibility, as well as for providing additional context or information to the user.

Examples

Here's an example of how the <figure> element could be used to group together an image and a caption:

<figure>
  <img src="example.jpg" alt="An example image">
  <figcaption>This is an example of the <code>&lt;figure&gt;</code> element in HTML.</figcaption>
</figure>

In this example, we have an image with the source file example.jpg that is wrapped in the <figure> element. The <figcaption> element provides a caption for the image, which reads "This is an example of the <figure> element in HTML." Note that the <code> element is used to indicate that the tag name <figure> is being referred to in the caption.

Attributes

This element only includes the global attributes.

Best Practices

• Use the <figure> element when the content can be treated as a single unit. The <figure> element is meant to group together self-contained content that can be referenced as a single entity. Avoid using it for content that does not have a clear relationship, or for content that does not benefit from being grouped together.
• Use the <figcaption> element to provide a caption or description for the content. The <figcaption> element is intended to be used in conjunction with the <figure> element, and provides a way to add context or description to the content.
• Use the alt attribute for images within a <figure> element. As with any image on a web page, it's important to provide an alt attribute that describes the content of the image. This is especially important for images within a <figure> element, as these may be referenced as a single unit and need to be accessible to users with assistive technology.
• Avoid using the <figure> element for layout purposes. While it may be tempting to use the <figure> element for layout purposes, it is not intended for this use case. Instead, use CSS to control the layout of your content.
• Use the <figure> element sparingly. While the <figure> element can be a useful way to group together content, it should be used judiciously. Overuse of the <figure> element can make your content harder to read and understand, and may lead to confusion for users.

Accessibility Considerations

• Use the alt attribute for images within a <figure> element. As with any image on a web page, it's important to provide an alt attribute that describes the content of the image. This is especially important for images within a <figure> element, as these may be referenced as a single unit and need to be accessible to users with assistive technology.
• Use the <figcaption> element to provide context and description for the content. The <figcaption> element is intended to be used in conjunction with the <figure> element, and provides a way to add context or description to the content. This can be especially useful for users who are using assistive technology to access the content.
• Ensure that the <figcaption> element is associated with the content it describes. One way to do this is to use the aria-labelledby attribute to associate the <figcaption> element with the <figure> element.
• Avoid using the <figure> element for layout purposes. While it may be tempting to use the <figure> element for layout purposes, it is not intended for this use case. Instead, use CSS to control the layout of your content.
• Ensure that the <figure> element and its contents are keyboard accessible. This means that users should be able to navigate to and interact with the <figure> element and its contents using only the keyboard.
• Consider the use of audio or video descriptions for multimedia content within a <figure> element. If your <figure> element includes audio or video content, consider providing audio or video descriptions for users who are visually impaired or blind. This can be done using the <audio> or <video> element's track element, which allows for the inclusion of descriptions in various formats.

Browser Compatibility