What is the figure element and how is it used with figcaption in HTML5?

The <figure> element in HTML5 is used to mark up self-contained content like images, diagrams, or code snippets that can stand independently within a document. It can be paired with the optional <figcaption> element to provide a caption or title, which may appear as the first or last child inside <figure>. This combination enhances accessibility and SEO by offering a clear, semantic structure. The <figcaption> typically labels or describes the content, such as "Figure 1: Annual sales growth," while the alt attribute in remains essential for screen readers. Common uses include images with captions, code listings, and quotations. Importantly, <figure> is not limited to images—it applies to any standalone media block. 1. Use <figure> for self-contained content. 2. Optionally include <figcaption> at the start or end for a caption. 3. Maintain accessibility with proper alt text and semantic structure. 4. Apply to images, code, quotes, or illustrations. 5. Ensure content remains meaningful even when moved. This approach improves both document organization and user experience.

The <figure></figure> element in HTML5 is used to mark up self-contained content, such as images, diagrams, photos, code snippets, or illustrations, that can be referenced as a single unit within a document. It's especially useful because it allows the content to be moved around in a document (like in a sidebar or appendix) without affecting the main flow.

One of the key features of <figure></figure> is that it can be paired with the <figcaption></figcaption> element to provide a caption or title for the content inside the figure.

How <figure></figure> and <figcaption></figcaption> Work Together

The <figcaption></figcaption> element is optional but recommended when you want to add a descriptive caption. It can be placed as the first or last child inside the <figure></figure> element. If present, it gives a title or explanation for the figure content.

Basic Syntax:

<figure>
  <img src="/static/imghw/default1.png"  data-src="chart.png"  class="lazy" alt="Sales growth chart">
  <figcaption>Figure 1: Annual sales growth from 2020 to 2023.</figcaption>
</figure>

In this example:

• The <figure> wraps the image and its caption.
• The <figcaption> clearly labels the image as "Figure 1" and describes what it shows.
• The alt attribute in the <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175566998882086.jpeg" class="lazy" alt="What is the figure element and how is it used with figcaption in HTML5?" > tag remains important for accessibility, describing the image for screen readers.

Common Use Cases

• Images with captions: The most common use.
• Code snippets:

  <figure>
    <pre class="brush:php;toolbar:false"><code>function hello() {
  console.log("Hello, world!");
  }</code>

  <figcaption>Listing 1: A simple JavaScript function.
• Quotations:

  <figure>
    <blockquote cite="https://example.com/book">
      It was the best of times, it was the worst of times...
    </blockquote>
    <figcaption>— Charles Dickens, <cite>A Tale of Two Cities</cite></figcaption>
  </figure>

  Key Points to Remember

  • The <figure></figure> element is not just for images — it’s for any standalone media or content block.
  • It’s semantically independent, meaning it makes sense even if moved away from surrounding text.
  • <figcaption></figcaption> can appear at the top or bottom of the <figure></figure> — though bottom is more common.
  • Using these elements improves accessibility and SEO by providing clearer document structure.

  Basically, <figure></figure> and <figcaption></figcaption> help make your content more meaningful and organized, both for browsers and users.

  

  The above is the detailed content of What is the figure element and how is it used with figcaption in HTML5?. For more information, please follow other related articles on the PHP Chinese website!