I am an advanced developer stuck with a simple question. Is the position of a <figure> element on a webpage Important or not? And what are some good use-cases of the figure element?

Generally, they say a <figure> element is used for photos, codeblock, diagrams, etc. While the content of the element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

According to these articles from Pluralsight:
Use <figure> if the content is essential, but it's exact position on the page is important.

When I look at the article from html.com:
the <figure> is for content directly related to the main content, while <aside> is for “tangentially related” content.

So a <figure> element:

  1. Contains self-contained content (content with meaning on itself).
  2. It can be removed and would not affect an article for example.
  3. It is only used for content directly related to the main content.
  4. The position within a article is important.

Please explain me why and when I should wrap my <img> inside a <figure> when a <figcaption> isn't needed.

  • Questions about HTML usage are off topic here except in regards to SEO. When in doubt about element usage, use the source, Luhn. The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document. html.spec.whatwg.org/dev/…
    – Rob
    Dec 9, 2019 at 11:47
  • 1
    For your last question, I wrap images in figures (or asides) to make them easier to handle, with "img" always being width:100%; height:auto. Dec 9, 2019 at 14:41
  • 1
    Since you have the accessibility tag and this popped back onto the front page, it's worth noting a lot of screenreader/browser combinations don't deal well with figcaptions on imgs within figures: powermapper.com/tests/screen-readers/labelling/img-figcaption
    – Reve
    Nov 30, 2020 at 15:45

2 Answers 2


Imagine you have a camera manual printed on paper.

You can have a diagram of all elements on page 1, this diagram is figure no. 1.

On page 16 you can write "look at figure No. 1"

This implies that a figure can be on another part of the page because you need to have it on that other part of the page.

But for the SEO point of view, a figure can have (and should have) identifiable text content, that is why you need to have a "figcaption" element.

I doubt the AI of search engines is capable of measuring the "distance" to the text you are illustrating with the image, but as all SEO strategies, if you want to position a term, and you have good content, and figures with proper captions it is good for you.

  • I understand the context where the figure element came from. Especially how you explain it. The typical referencing in a book to a specific image on another page. The same goes for typical websites like Wikipedia (even though don't use it). But when is it right to use when creating a webshop for example? I see some webshop just use it as a container element for the cover image of a product.
    – Luhn
    Nov 21, 2020 at 18:25
  • People use tags just because. Probably a better container could be the picture element. But using figure tries to be more semantic. Yes, the cover image of a product could be referenced later, so it is not a bad thing to do that. It is like the label tag. It is semantically correct next to an input tag, but useless if you do not reference it to the correct ID with the for atribute.
    – Rafael
    Nov 21, 2020 at 19:33

I found a pretty nice explaination on HTML5doctor - <figure>

The spec describes <figure> as being "some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document."

If it’s a purely presentational image and not referenced elsewhere in the document, then it’s definitely not a <figure>. Other use cases vary, but as a start, ask yourself, Is this image required to understand the current context? If not, it’s probably not a <figure>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.