Pico assumes your page reads like a document: a single main for primary content, optional header and footer for chrome, and nested section / article blocks for grouped topics—not anonymous div stacks.
Landmarks Pico cares about
header— site or section intro; often holds branding and top-levelnavmain— unique page content; one per page in most layoutsfooter— meta links, copyright, secondary actionsaside— tangential content (side notes, related links)
These choices mirror HTML semantic structure. Pico’s spacing and typography rhythm align with that outline—wrong tags still render, but you lose free polish.
Important interview questions and answers
- Q: Can you have two
mainelements?
A: HTML allows only one visiblemainwithouthidden; assistive tech and Pico both expect a single primary landmark. - Q: Does Pico replace semantic HTML with classes?
A: No. Classes likecontaineradjust layout; meaning still comes from elements and ARIA when needed.
Self-check
- Which element should wrap the unique content of a documentation page?
- Where does primary navigation usually live?