Let's group an image with the caption that explains what the image represents.
- <figure> creates a self-contained piece of content such as an image, diagram, code sample, or illustration. - Put the main content inside <figure>. - Use <figcaption> for a visible caption that describes or identifies that content. - Keep the caption connected to the thing it describes rather than placing unrelated text outside the figure. - The image still needs a useful alt attribute when it conveys information. - A caption and alt text do different jobs: the caption is visible context, while alt text is the text alternative for the image itself. - A figure can contain more than one related item when they belong together.
The practical idea is that <figure> groups the content and <figcaption> gives that group a visible explanation.