Figures and Captions

The <figure> and <figcaption> elements group self-contained content with an optional caption, perfect for images, diagrams, code snippets, and more.

Basic Figure Usage

The <figure> element:

• Groups content that's referenced from main content
• Can be moved without affecting document flow
• <figcaption> provides a caption

Figure vs Regular Image

Use <figure> when:

• Content is referenced from text
• Content could be moved to appendix
• You need a visible caption

Caption Placement

The <figcaption> can appear:

• Before or after the figure content
• Only one figcaption per figure

Multiple Images in One Figure

A single figure can contain multiple related images.

Figure for Code Snippets

Figures work for any self-contained content:

• Code examples
• Diagrams
• Equations
• Poems

Figure for Quotes

Styling Figures

Exercise: Create an Image Gallery

Create a gallery using figures with captions:

Figures provide semantic structure for self-contained content with captions!