Is the figure tag overused in WordPress?

Introduction

In WordPress development, especially using the block editor, wrapping every image in a <figure> tag is common. While it is often used to improve styling or accessibility, it isn’t always the right choice.

Using HTML elements incorrectly can create “noise” for people using screen readers and may not provide the SEO benefits you expect. This guide helps you decide when to use <figure> and how to optimise your images for the modern web.

Why semantic HTML matters

Semantic HTML elements like <img src="" alt="descriptive text alternative">, <figure> and <figcaption> add meaning to your content. They help:

• Assistive technologies (like screen readers) understand the relationship between an image and its caption.
• Search engines index your content more accurately.
• Browsers render pages more efficiently.

Understanding the “Image Family”

To use the right element, it helps to visualise a graduation photo:

• The Image (<img>): The actual photograph
• The Figure (<figure>): The frame around the photo
• The Figcaption (<figcaption>): The descriptive plaque underneath the frame.

When to use the <figure> tag

Use the <figure> element for self-contained content. This means the image (or diagram/code snippet) is referenced in your text but could be moved to an appendix without losing its meaning.

Rules for the <figcaption>

If you use a caption, follow these requirements:

• It must be the first or last element inside the <figure>
• It cannot be nested inside a <div> within the figure.
• Do not replace “Alt text” with a caption; Alt text describes the image, while the caption provides context.

When NOT to use <figure>

Avoid the <figure> tag if the image is part of a sentence or a direct link. For example:

• Site Logos: A logo is usually a link (<a>) and does not need a figure wrapper.
• Decorative Images: Icons or background separators should use plain <img> tag or CSS.

• Literally part of a sentence: If the image is literally a part of the preceding sentence. For example:

  <p>This case centered on some sort of "intellectual property"
  infringement related to a comic (see Exhibit A). The suit started
  after a trailer ending with these words:
  
  <blockquote>
   <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!">
  </blockquote>
  
  <p>...was aired. A lawyer, armed with a Bigger Notebook, launched a
  preemptive strike using snowballs. A complete copy of the trailer is
  included with Exhibit B.

Conclusion

The WordPress Gallery block often nests <figure> tags, which can cause repetitive screen reader announcements when paired with some browsers like Firefox. While Semantic HTML is a goal, the priority should always be the user experience.

Action point: Before you wrap an image in a <figure> tag, ask: “If I moved this image to the end of the post or article, would the text still make sense?” If yes, use a <figure>. If no, skip the tag.