Images and figures

Last reviewed Jun 1, 2026 Content v20260601

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

beginner

This lesson

This lesson teaches Images and figures—the ideas, syntax, and habits you need before moving on in Pico CSS.

Class-light frameworks teach when semantic HTML alone should carry the design.

You will apply Images and figures in contexts like: Documentation sites, blogs, internal tools, and side projects where you want polish without a large class vocabulary.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Images and figures in your own words.

Use figure with img and figcaption for captioned media—Pico constrains width and styles captions consistently. Always set meaningful alt text per HTML images guidance.

Media tips

Content images — figure → img alt="…" → figcaption
Decorative images — empty alt="" so screen readers skip them
Dark UI lessons — preview with data-theme="dark" to check contrast on photos and diagrams

Unlike utility stacks where rounded-xl shadow-lg wraps every image, Pico keeps presentation tied to semantic figure markup—add custom CSS only for hero banners or art-directed crops.

Self-check

What is the difference between figure and a bare img in the flow?
When is empty alt appropriate?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

figure figcaption?
Alt text quality?

No discussion yet. Be the first to ask a question.