Überschriften und Absätze

HTML hat sechs Überschriftenebenen, h1 bis h6, und Screenreader-Nutzer springen oft von Überschrift zu Überschrift, um sich auf einer Seite zurechtzufinden.

Eine Gliederung aus Überschriften

Denk an ein Kochbuch. Das Buch hat einen Titel, jedes Rezept hat einen Namen, und jedes Rezept hat kleinere Teile wie Zutaten und Zubereitung. HTML drückt dieselbe Gliederung mit sechs Überschriften-Elementen aus, <h1> bis <h6>. <h1> ist die oberste Ebene, meist der Titel der Seite. <h2> markiert die Hauptabschnitte, <h3> die Teile innerhalb eines Abschnitts und so weiter. Die meisten Seiten brauchen nie mehr als drei oder vier Ebenen.

<h1>Weekend Baking</h1>
<p>Three simple breads you can make at home.</p>

<h2>Soda bread</h2>
<h3>Ingredients</h3>
<p>Flour, baking soda, salt and buttermilk.</p>
<h3>Method</h3>
<p>Mix, shape into a round and bake for 40 minutes.</p>

<h2>Flatbread</h2>
<p>Ready in 20 minutes, no oven needed.</p>

Wähle die Ebene nach der Struktur, nicht nach der Größe

Browser zeichnen <h1> groß und <h6> klein, und es ist verlockend, eine Überschrift wegen ihrer Größe auszuwählen. Widersteh dem. Die Ebene sagt Software, wie die Seite aufgebaut ist. Screenreader können alle Überschriften einer Seite auflisten und den Nutzer direkt zu einer springen lassen, ähnlich wie ein Inhaltsverzeichnis. Auch Suchmaschinen nutzen Überschriften, um zu verstehen, worum es auf einer Seite geht. Wenn ein h2 kleiner aussehen soll, lass es ein h2 und ändere seine Größe mit CSS.

Zwei Gewohnheiten halten die Gliederung sauber. Erstens: Verwende pro Seite ein <h1> für den Haupttitel. MDN empfiehlt das, und die meisten Nutzer erwarten es so. Zweitens: Überspring auf dem Weg nach unten keine Ebenen. Nach einem h2 kommt ein h3, kein h5. Nach oben zurückzugehen ist in Ordnung: Auf ein h3 kann ein neues h2 folgen, wenn der nächste Abschnitt beginnt.

Absätze

Fließtext gehört in <p>-Elemente, eines pro Absatz. Weil HTML Leerraum zusammenfasst, entsteht durch zweimaliges Drücken der Eingabetaste in deiner Datei kein neuer Absatz auf dem Bildschirm. Das schafft nur ein neues <p>. Browser setzen standardmäßig über und unter jeden Absatz einen Abstand, den CSS ändern kann. Ein Absatz kann keinen anderen Absatz und keine Überschrift enthalten. Wenn du ein schließendes </p> vergisst, schließt der Browser den Absatz für dich, sobald das nächste Blockelement beginnt.

Manchmal gehören die Zeilenumbrüche selbst zum Inhalt, etwa bei einer Postanschrift oder einem Gedicht. Dafür setzt du <br> ans Ende jeder Zeile innerhalb eines Absatzes oder eines <address>. Verwende keinen Stapel von <br>-Elementen, um vertikalen Abstand zu schaffen. Das ist eine Aufgabe für CSS-Außenabstände (margin). Um innerhalb eines Abschnitts einen Themenwechsel zu markieren, etwa einen Szenenwechsel in einer Geschichte, verwende <hr>, den thematischen Umbruch, den Browser als waagerechte Linie zeichnen.

Zitate

Ein längeres Zitat aus einer anderen Quelle gehört in <blockquote>, das Browser einrücken. Setz die zitierten Absätze hinein, und im Attribut cite kannst du die Adresse der Quelle angeben. Ein kurzes Zitat innerhalb eines Satzes verwendet <q>, und der Browser setzt die Anführungszeichen für dich. Das Element <cite> markiert den Titel eines Werks, etwa eines Buchs oder Films.