HTML & CSS Interview Question #19

What are figure and figcaption used for?

HTML Fundamentals, Structure, Semantics, Links, Images, Tables & Forms Junior Beginner

Quick Interview Answer

figure represents self-contained content that is referenced as a unit, such as an illustration, diagram, code listing, photograph, or chart. figcaption provides a caption or legend for that figure.

Detailed Explanation

figure represents self-contained content that is referenced as a unit, such as an illustration, diagram, code listing, photograph, or chart. figcaption provides a caption or legend for that figure.

The figure can often be moved away from the main flow without changing the meaning of the surrounding text. figcaption must be associated with its figure and can appear as the first or last child.

Code Example

<figure>
    <img src="architecture.png"
         alt="Three-layer application architecture">
    <figcaption>
        Figure 1: Presentation, application and data layers.
    </figcaption>
</figure>