HTML <figure> Tag

The <figure> element is a semantic HTML tag used to encapsulate self-contained content that is typically referenced in the main flow of a document but could also be moved or removed without affecting the surrounding content. It is commonly used for illustrations, diagrams, photos, code snippets, charts, or any media that complements the main content.

A key feature of <figure> is that it often works in tandem with the <figcaption> element, which provides a caption or description for the content inside the <figure>. This pairing enhances accessibility and semantic meaning, making it clear to both users and assistive technologies that the caption describes or explains the figure.

Using <figure> helps structure content logically and improves the clarity and readability of a webpage. It allows authors to group media and its caption together in a way that makes the content more meaningful, supports proper referencing, and maintains consistency in document structure.

For example, a photograph in an article can be wrapped in a <figure> with a <figcaption> that describes the image. This ensures that the image and its description are treated as a single, coherent unit.