# Heading

A heading names a page or a part of it, and the set of headings is the map of the page.

## Playground

```html
<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

### The four levels

In Alegreya Sans. Size comes from the level; there is no "heading 2 dressed as a heading 1".

Show code

```html
<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.