The <figure>
element
A piece of content which is referenced from the main part of the document. Usually something like a picture or graph, and can have a descriptive caption.
Usage
This element will mostly be used for images (graphs, diagrams, screen-shots, etc.), but can also be used for tables of data, or examples of source code.
You don't need to use a <figure>
element for these things if they're just part of the flow of the document.
So for example, you wouldn't use a figure if there was a paragraph of text before an image introducing the image, and a paragraph of text afterwards continuing the discussion assuming the user had now seen the image.
A figure would be more appropriate when the main text refers to it as something separate, not part of the narrative flow of the text.
In other words, a figure is something that you could move around in the document without making it meaningless.
For that reason figures might often be contained in an <aside>
element.
Captions for figures
A figure can have a caption in a <figcaption>
element, which should either be the first or last thing inside the <figure>
element.
The caption should describe the other content of the figure.
Whether or not you need a caption, and how specific it needs to be in its description, will depend on the text that refers to it, and what other figures you have in your document.
As a rule of thumb, it should be obvious to the reader which figure the text is referring to.
If your document has lots of figures then it might be necessary to number them, in which case the <figcaption>
would contain the number, and the text might say things like “see graph 3.2”.
For a simpler document, a simple description might be a good enough caption.
If it's obvious what you're referring to just from the figure itself, then you don't really need a caption.
For example, a document with only one graph image in could have the graph in a <figure>
element with no caption, and the text could refer to it by saying simply “see the graph”.
Full list of attributes
All the usual HTML global attributes are available