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.

| improve this question | | | | |
  • 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 '19 at 11:47
  • 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. – Ray Butterworth Dec 9 '19 at 14:41

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.

| improve this answer | | | | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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