# Heading

Ein Überschriftsnamen eine Seite oder einen Teil davon, und die Menge der Überschriften ist die Karte der Seite.

## Playground

```html
<h1>Termine</h1>
```

## Wann verwenden

-   Eine Überschrift 1 pro Seite, sagend was die Seite ist.
-   Überschriften 2, 3 und 4 um Teile zu teilen, in Reihenfolge, niemals ein Level überspringen.

## Wann nicht verwenden

-   **Um Text groß oder fett zu machen:** benutze Text mit `data-size="lead"`, oder `<strong>`. Das Level ist Struktur, nicht Größe.
-   **Als ein Großbuchstaben-Kicker** über einer anderen Überschrift: es existiert nicht in Feitio.

## Beispiele

### Die vier Ebenen

In Alegreya Sans. Größe kommt aus dem Level; es gibt kein "Überschrift 2 als Überschrift 1 verkleidet".

Code anzeigen

```html
<h1>Agendamentos</h1>
<h2>Esta semana</h2>
<h3>Terça-feira</h3>
<h4>Manhã</h4>
```

## Do and don't

Do

### Erlinnerungen

Three active reminders.

Eine kurze Überschrift, die sagt was darunter kommt.

Don’t

Organization

### Erlinnerungen

Der all-caps-Kicker ist Dekoration und ein Zeichen für generische Seiten.

Do

### Computer-Backup

Ganz Überschrift in derselben Farbe und Schriftstärke.

Don’t

### Computer Backup

Ein Wort in Orange oder Kursiv lenkt die Aufmerksamkeit auf den falschen Ort.

## Schreiben

-   Ein Substantiv oder kurzer Satz ohne Punkt: "Termine", "Diese Woche".
-   Nur der erste Buchstabe großgeschrieben. Keine Großschreibung des gesamten Wortes.

## Barrierefreiheit

-   Screenreader navigieren über Überschriften: die Reihenfolge muss Sinn ergeben, ohne den Bildschirm zu sehen.
-   Nie einen Level überspringen (von 2 auf 4): Menschen, die mit Überschriften navigieren, denken, sie haben einen Teil verpasst.

## Attribute

Attribut

Werte

Zum Zweck

`<h1>` bis `<h4>`

das Level

Keine Klasse: die Basis-CSS-Stile regeln es, und die Größe ergibt sich aus dem Level.