Auszeichnung der Inhalte

Überschriften und Absätze

Überschriften: Die Elementtypen h1, h2, h3, h4, h5 und h6

Eine Überschrift beschreibt einführend das Thema eines Abschnitts. Dokumente enthalten ein oder mehrere h1, die die Hauptüberschriften (Überschriften der ersten Ordnung) der jeweiligen Abschnitte auszeichnen. Die Überschriften h2 sind dann die gering weniger wichtigen Überschriften (die Überschriften zweiter Ordnung) der Unterabschnitte. Überschriften dritter Ordnung h3 unterteilen wiederum diese Unterabschnitte. Dieses Prinzip lässt sich hierarchisch weiter fortführen bis zur Überschrift h6, der geringstwichtigen Überschrift.

Wenn Sie einen Blick auf Abbildung 5.1 werfen, werden Sie sehen, dass Ihr Browser die Überschriften je nach Ordnung unterschiedlich groß und fett oder kursiv darstellt. Die Darstellung lässt sich allerdings beliebig mit CSS beeinflussen. Ihr individuelles Empfinden der einzelnen Schriftgrößen als zu groß, zu klein oder genau richtig sollte Sie daher nicht davon abhalten, Überschriften inhaltlich und logisch richtig einzusetzen. Dabei sollten Sie folgende Regeln beachten:

Wenn das Dokument für sich allein steht, also ein in sich abgeschlossenes Thema behandelt, sollte es genau eine Überschrift h1 geben, die dem title-Element des Dokuments entspricht.
In Bedingung 3.5 der BITV heißt es:

»Zur Darstellung der Struktur von mittels Markup-Sprachen geschaffener Dokumente sind Überschriften-Elemente zu verwenden.«

Für Nutzer assistiver Technologien, beispielsweise Screenreader, gehören Überschriften zu den wichtigsten Strukturelementen eines Dokuments. So kann aus den Überschriften ein Inhaltsverzeichnis generiert oder von Überschrift zu Überschrift gesprungen werden – nicht zu unterschätzende Navigationshilfen!
Überschriften bilden eine Hierarchie ab. Daher gilt es als schlechter Stil, Überschriftenebenen zu überspringen. So sollte beispielsweise auf eine Überschrift erster Ordnung niemals eine Überschrift dritter Ordnung folgen, sondern stets nur Überschriften zweiter Ordnung. Ein Durcheinander der Überschriftenhierarchie verwirrt vor allem Nutzer von Screenreadern, die sich anhand von Überschriften orientieren.

Zum Seitenanfang

Absätze: Der Elementtyp p

Das Element p zeichnet einen Textabsatz aus. Es darf keine Blockelemente enthalten. Absätze dienen primär der Strukturierung des Texts Ihrer Website.

Zwischen Textabsätzen hält der Browser automatisch einen gewissen Abstand ein. Sehen Sie sich dazu einfach Abbildung 5.1 an.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Überschriften und Absätze</title>
  </head>
  
  <body>
    <h1>Überschrift erster Ordnung</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer (...)</p>
    <p>Duis autem vel eum iriure dolor in hendrerit (...)</p>
    <h2>Überschrift zweiter Ordnung</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer (...)</p>
    <h3>Überschrift dritter Ordnung</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer (...)</p>
    <h3>Überschrift dritter Ordnung</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer (...)</p>
    <h2>Überschrift zweiter Ordnung</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer (...)</p>
  </body>
</html>

Listing 5.1: Überschriften und Absätze

Abb. 5.1: Die Darstellung von Listing 5.1

Automatischer Umbruch

Spätestens hier, wenn Sie einen längeren Text mit p ausgezeichnet haben, werden Sie eine der Stärken von XHTML festgestellt haben: Der Browser bricht den Text automatisch am Fensterrand um. Wenn Sie das Browserfenster verkleinern und in der Größe verändern, wird der Text mit der Fenstergröße skaliert. Dieses Verhalten werden Sie bei fast allen Elementen beobachten. Diese Fähigkeit von XHTML, sich an das Ausgabemedium anzupassen, ist ein Grund für die Plattformunabhängigkeit des Mediums World Wide Web.

Lorem ipsum dolor sit amet

Sie werden sich vielleicht fragen, was der Text in diesem Beispiel bedeuten soll. Es handelt sich hierbei um einen klassischen, in ähnlicher Form seit Jahrhunderten verwendeten Lückenfüller zum Testen des Schriftsatzes im Druckbereich, siehe http://www.lorem-ipsum.info/blindtext-lorem-ipsum. Der Hintergrund ist, zu vermeiden, dass die Information im Text vom Layout ablenkt. Für diese Einführung ist der Text gut geeignet, schließlich steht in den Beispielen die Anwendung der XHTML-Elemente (und später der CSS-Eigenschaften und -Werte) im Vordergrund, nicht der textuelle Inhalt. Viele Beispiele werden diesen Dummy-Text verwenden.

Zum Seitenanfang

Zeilenumbrüche: Der Elementtyp br

Das leere Element br umbricht (beendet) zwingend die aktuelle Textzeile.

Ein Gedicht, beispielsweise »Der Panther« (1903) von Rainer Maria Rilke, könnten Sie wie folgt auszeichnen:

<p>Sein Blick ist vom Vorübergehn der Stäbe<br />
  so müd geworden, dass er nichts mehr hält.<br />
  Ihm ist, als ob es tausend Stäbe gäbe<br />
  und hinter tausend Stäben keine Welt.</p>
  
<p>Der weiche Gang geschmeidig starker Schritte,<br />
  der sich im allerkleinsten Kreise dreht,<br />
  ist wie ein Tanz von Kraft um eine Mitte,<br />
  in der betäubt ein großer Wille steht.</p>
  
<p>Nur manchmal schiebt der Vorhang der Pupille<br />
  sich lautlos auf –. Dann geht ein Bild hinein,<br />
  geht durch der Glieder angespannte Stille –<br />
  und hört im Herzen auf zu sein.</p>

Listing 5.2: Sinnvoller Einsatz des Elements br

Mehrere Zeilenumbrüche hintereinander sollten Sie vermeiden. Eine Leerzeile erreichen Sie durch Absätze, vertikale Abstände zwischen Elementen mit CSS.