Which HTML element is typically used to wrap a diagram, illustration, or code listing along with an optional caption?

Which HTML element is typically used to wrap a diagram, illustration, or code listing along with an optional caption?

• A. figure
• B. section
• C. aside
• D. article

Answer: (A)

When you have a diagram, illustration, or code listing that you want to accompany with a caption, wrap it in a figure element. The figure element is a semantic container for self-contained media, and it pairs naturally with a caption using the figcaption element. This makes the relationship between the visual/content and its description explicit for both sighted users and assistive technologies, and it keeps the content easily movable or reusable as a unit. Other containers have different roles: a section groups related content in a thematic unit, an aside holds tangential or supplementary material, and an article represents a self-contained piece that could stand alone or be distributed independently. For a code listing or diagram, placing the media inside a figure and adding a figcaption provides a clear, accessible caption that travels with the media.

When you have a diagram, illustration, or code listing that you want to accompany with a caption, wrap it in a figure element. The figure element is a semantic container for self-contained media, and it pairs naturally with a caption using the figcaption element. This makes the relationship between the visual/content and its description explicit for both sighted users and assistive technologies, and it keeps the content easily movable or reusable as a unit.

Other containers have different roles: a section groups related content in a thematic unit, an aside holds tangential or supplementary material, and an article represents a self-contained piece that could stand alone or be distributed independently. For a code listing or diagram, placing the media inside a figure and adding a figcaption provides a clear, accessible caption that travels with the media.