Headings and prose blocks

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 Headings and prose blocks—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 Headings and prose blocks 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 Headings and prose blocks in your own words.

Long-form content lives inside article or section with a proper heading ladder. Pico’s header grouping inside an article collapses margins between the title and subtitle so the top of the page feels tight and intentional.

Prose building blocks

hgroup — optional wrapper when a title and tagline belong together
hr — thematic break between sections
Nested headings — never skip levels for visual sizing alone (HTML headings)

Important interview questions and answers

Q: Should you use h4 because it “looks right”?
A: Pick the level that matches document structure; Pico already scales headings—skipping levels hurts accessibility.
Q: How is Pico typography different from Bulma’s title is-4 helpers?
A: Bulma decouples visual size from tag via classes; Pico primarily styles native heading tags and a few grouping elements.

Self-check

What does a header inside article typically contain?
When is hr appropriate vs a new section?

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

h1 count on page?
Prose in article only?

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