The Figure Element

What is the figure element

The figure element is a semantic HTML container used to hold self contained content and a caption. It is designed for content that requires explanation or additional context while remaining distinct from the primary topic of the page. The figure element improves clarity by pairing visual or even referenced material with descriptive text that helps users understand its purpose or meaning.

Where do you use the figure element?

You use the figure element when adding content that benefits from a caption or explanation, such as images, illustrations, code samples, or references. It is especially useful in articles, tutorials, documentation, and technical content where including visuals helps users understand the topic more clearly. The figure element ensures that this supplemental content is both easy to identify and connected to the page’s primary topic.

What does the figure element convey to search engines?

To search engines, the figure element signals that the enclosed content is a complete visual or referenced unit that includes its own descriptive context. This makes it easier for search engines to understand what the media represents and how it relates to the page. By pairing visuals with captions in this way, the figure element provides stronger clarity semantically and improves how search engines interpret and rank the surrounding material. Figure elements when done well can help to strengthen the perceived relevance of your content, so you want to use these elements whenever possible.

Examples of content that belongs in a figure

The figure and figcaption elements are powerful Semantic elements in that they can contain types of content and media you aren’t able to place anywhere else. We’ll go through some examples specific to figures, and some that aren’t.

Code snippets

Code snippets always belong inside a figure element because they often need an explanation or label to give context for one, but for two, they are able to be formatted much more nicely when built this way. The figure and figcaption pairing helps clarify what the snippet represents and how it fits into the topic being discussed.

Images that need captions

Images that need explanation fit naturally in a figure element. A caption can describe the image and help search engines understand exactly what is being shown without blending that description into the main text.

Charts or graphs

Charts and graphs work well inside a figure element because they need descriptive context to be fully understood. A figure element creates a clear relationship between the visual and its description.

Diagrams and illustrations

Diagrams and illustrations are good educational reference materials within the content, especially if you couple them with cited sources for the data being displayed. Placing these content types in a figure element highlights their role as supporting visuals and ensures search engines interpret them correctly.

Tables requiring descriptive context

Tables can be data-heavy content types, so having the functionality to come complete with a descriptive caption is great for all users. Pairing tables with a helpful caption will ensure more of your user base can take full advantage of the table. Certain users will easily understand the table without the caption, but ensuring you are taking care of users who might not be as advanced or knowledgeable in the topic, including that figcaption element for supplementary explanations, will help dramatically.

Embedded media and caption

Embedded media such as videos or interactive elements fit well within the figure element when you also include a caption with them. This ensures that both the user and the search engine understand the purpose and relevance of the media within the context of the page. Search still can discern the relevance of the video, but by using a figcaption in addition, you’ll make it easier for crawlers to parse.

What are the benefits of using the figure element

Using the figure element enhances clarity and strengthens your user’s ability to understand and follow your content. These elements also allow you to communicate more effectively with search engines, and to present your data in a more professional, clean, and easy-to-digest way.