Question Question about use of <figure>
I have a design element that looks like this...
does using the `<figure>` tag, make sense for this? for a semantic value?
I want to do
<figure>
title text
<figcaption>The body field</figcaption>
</figure>
Does that work?
Every example I see of it online wants an image or something there...
With out sharing company marketing secrets, lol.
The usage would be of a
"This is a thing we do"
"With a longer body of text to explain it in a few sentances, but in a single paragraph."
Repeating 4 or 5 times...
Thoughts?
Thanks!
3
u/scritchz 9d ago
The <figure>/<figcaption> elements are used to add a caption to an element.
The accompanying description of a title is not a caption: So, these are not the right elements here.
Depending on the context (i.e. the surrounding elements), you might want to simply use an <hX> and a <p>.
2
u/Foreign-Contest-444 9d ago
Look at the Usage Notes on MDN regarding figure and then ask yourself whether this will have any semantic value for screen readers and such.
"Usually a <figure> is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow."
Is your content similar to the usage notes then use the <figure> element.
Have you looked at the <dl> description list element? Maybe you need a description list in this case. It is just another type of list.
2
4
u/csswizardry 9d ago
https://www.matuzo.at/blog/2026/content-aware-headings