Heading
A heading names a page or a part of it, and the set of headings is the map of the page.
On this page
Playground
Schedules
Level
Background
<h1>Schedules</h1>When to use
- One heading 1 per page, saying what the page is.
- Headings 2, 3 and 4 to divide into parts, in order, never skipping a level.
When not to use
- To make text big or bold: use Text with
data-size="lead", or<strong>. The level is structure, not size. - As an all-caps kicker above another heading: it does not exist in Feitio.
Examples
Schedules
This week
Tuesday
Morning
The four levels
In Alegreya Sans. Size comes from the level; there is no "heading 2 dressed as a heading 1".
Show code
<h1>Agendamentos</h1>
<h2>Esta semana</h2>
<h3>Terça-feira</h3>
<h4>Manhã</h4>Do and don’t
Do
Reminders
Three active reminders.A short heading that says what comes below.
Don’t
Organization
Reminders
The all-caps kicker is decoration, and a mark of generic pages.
Do
Computer backup
The whole heading in the same color and weight.
Don’t
Computer backup
One word in orange or italics draws attention to the wrong place.
Writing
- A noun or short phrase, without a period: "Schedules", "This week".
- Only the first letter capitalized. No all caps.
Accessibility
- Screen readers navigate by headings: the order must make sense without seeing the screen.
- Never skip a level (from 2 to 4): people navigating by headings think they missed a part.
Attributes
| Attribute | Values | What for |
|---|---|---|
<h1> to <h4> | the level | No class: the base CSS styles it, and size comes from the level. |