figureelement 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.
"Self-contained" in this context does not necessarily mean independent. For example, each sentence in a paragraph is self-contained; an image that is part of a sentence would be inappropriate for
figure, but an entire sentence made of images would be fitting.
The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc.
[...] The first
figcaptionelement child of the element, if any, represents the caption of the
figureelement's contents. If there is no child
figcaptionelement, then there is no caption.
figureelement's contents are part of the surrounding flow. If the purpose of the page is to display the figure, for example a photograph on an image sharing site, the
figcaptionelements can be used to explicitly provide a caption for that figure. For content that is only tangentially related, or that serves a separate purpose than the surrounding flow, the
asideelement should be used (and can itself wrap a
figure). For example, a pull quote that repeats content from an
articlewould be more appropriate in an
asidethan in a
figure, because it isn't part of the content, it's a repetition of the content for the purposes of enticing readers or highlighting key topics.
- We can use
<figcaption>to caption non-image elements, such as description lists (
[...] when presenting a set of related key-value attributes, what would be more appropriate from a semantic point of view: a table, a definition list or something else?
[...] So from a semantic (and quite strict) point of view, definition lists should be used for data that have a key-value relationship, while the tables would be more suitable for data in which the keys and values also have meaning as a list.