Lists and blockquotes

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

beginner

This lesson

This lesson teaches Lists and blockquotes—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 Lists and blockquotes 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 Lists and blockquotes in your own words.

Ordered and unordered lists, definition lists, and blockquote receive spacing and markers automatically—ideal for tutorials, API notes, and pull quotes in blog posts.

Patterns

Task steps — ol inside article
Feature bullets — ul; nest lists only when hierarchy is real
Quotations — blockquote with optional footer / cite for attribution

Definition lists (dl, dt, dd) work well for glossaries—Pico styles them without Bootstrap’s list-group classes.

Self-check

How do you attribute a quote in semantic HTML Pico expects?
When is ol preferable to ul?

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

blockquote citation?
Nested lists ok?

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