Document outline and headings

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 Document outline and headings—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 Document outline and headings 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 Document outline and headings in your own words.

A clear heading hierarchy (h1 → h2 → h3) is both an accessibility requirement and Pico’s typographic map. Pico scales headings responsively—skipping levels confuses screen readers and makes visual rhythm feel random.

Outline rules of thumb

One h1 per page (or per article in multi-article views)
Do not pick heading levels for font size—use the correct level, then CSS only if design truly requires an exception
Wrap a title plus subtitle in header inside article; Pico collapses margins inside heading groups

Compare Bootstrap’s grid, where visual hierarchy often comes from utility classes; Pico ties size to semantic heading tags by default.

Self-check

Why should h3 not follow h1 directly?
What Pico element group benefits from a nested header with title + tagline?

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

Skipped heading levels?
Outline still logical?

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