Sections and articles

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 Sections and articles—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 Sections and articles 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 Sections and articles in your own words.

Use article for self-contained content (blog post, card-like story, changelog entry) and section for thematic grouping inside a page. Pico applies card-like spacing and borders to article in many themes—free visual separation without a .card class.

Composition patterns

Blog index — main containing multiple article elements, each with its own header and footer
Docs page — one article with nested section per chapter
Marketing band — section with h2 plus paragraphs; optional aside for pull quotes

Utility frameworks often use div.rounded-lg.shadow for the same effect; Pico encodes the look in element selectors—fewer classes, tighter coupling to good HTML.

Self-check

When should content be an article vs a section?
How does Pico visually distinguish multiple articles on one page?

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

section vs article choice?
Nested articles ok?

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