HTML <figure> Tag

The HTML <figure> tag is used to represent self-contained content, such as images, illustrations, diagrams, code snippets, or other media that is referenced in the main content of a webpage. The key advantage of using the <figure> tag is that it semantically associates the content with an optional <figcaption> element, which provides a caption or description for the figure. This tag enhances the structure and accessibility of web content, making it easier for users and search engines to understand the context of the media.

Syntax of the <figure> Tag

The syntax of the <figure> tag is straightforward and allows optional inclusion of the <figcaption> tag.

html
<figure>
    <img src="image.jpg" alt="Description of the image">
    <figcaption>Caption for the image or media</figcaption>
</figure>
  • Content inside the <figure> tag: Typically includes media like images, videos, charts, or code blocks.
  • Optional <figcaption> tag: Provides a description or title for the content inside the <figure> tag, enhancing clarity for users and accessibility.

Attributes of the <figure> Tag

The <figure> tag supports global attributes like class, id, lang, and style, which can be used to apply specific styling, identification, or language specifications. However, the tag itself does not have any unique attributes.

AttributeDescription
Global AttributesThe <figure> tag supports global attributes such as class,id, lang, and style.
<figcaption>Used to add a caption or description to the figure content.
  • class: Used to assign a CSS class for styling.
  • id: Unique identifier for the figure element.
  • lang: Specifies the language of the content inside <figure>.
  • style: Inline CSS styles for the figure.

Examples of HTML <figure> Tag

Example 1: Using the <figure> Tag with an Image and Caption

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Figure Tag Example</title>
</head>
<body>
    <figure>
        <img src="mountains.jpg" alt="Beautiful mountain landscape">
        <figcaption>A scenic view of the mountains.</figcaption>
    </figure>
</body>
</html>

In this example, the image is wrapped inside the <figure> tag, and the <figcaption> provides a caption that describes the image.

Example 2: Using the <figure> Tag for a Code Snippet

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Snippet Example</title>
</head>
<body>
    <figure>
        <pre>
<code>
function sayHello() {
    console.log("Hello, world!");
}
</code>
        </pre>
        <figcaption>JavaScript function to print "Hello, world!" to the console.</figcaption>
    </figure>
</body>
</html>

Here, a JavaScript code block is placed inside a <figure> tag, with a <figcaption> describing what the code does.

FAQs About HTML <figure> Tag

Q1: What is the purpose of the HTML <figure> tag?
A: The <figure> tag is used to group self-contained media content such as images, diagrams, and code snippets, along with an optional caption provided by the <figcaption> tag.

Q2: Is the <figcaption> tag mandatory when using <figure>?
A: No, the <figcaption> tag is optional, but it is recommended when you need to provide a caption or description for the content inside the <figure> tag.

Q3: Can I use multiple images inside a single <figure> tag?
A: Yes, you can include multiple images or other media within a single <figure> tag, and use a single <figcaption> to describe the grouped content.

Q4: Does the <figure> tag improve accessibility?
A: Yes, the <figure> tag, especially when used with <figcaption>, helps provide context for media content, improving accessibility for screen readers and search engines.

Q5: Is the <figure> tag supported in all browsers?
A: Yes, the <figure> tag is supported in all major modern browsers, including Chrome, Firefox, Safari, and Edge.

tools

HTML

Related Articles