Zum Inhalt springen

HTML5: Überschriften

Links hinzufügen
Aus Wikibooks


Überschriften sind wichtig, um Texte zu strukturieren.

Klassisch ist eine Überschrift als Kurzzusammenfassung des folgenden Inhaltes aufzufassen. Allgemeiner ist es einfach ein Bezeichner und Strukturmerkmal für eine zusammengehörige Struktur. Die klassische Bedeutung, daß die Überschrift den Inhalt kurz repräsentiert, ist nach wie vor empfehlenswert für Sachtexte.

Bei belletristischen Werken steht eher die Funktion des Bezeichners im Vordergrund. Eine Überschrift kann allerdings auch ein Stilmittel sein, um Spannung zu erzeugen. Das Publikum kann und soll damit jedenfalls durch den Text geleitet werden, wenn dieser in mehrere Kapitel oder Abschnitte unterteilt ist.

Die Funktion als signifikanter Bezeichner ist für das Publikum insbesondere dann relevant, wenn es darum geht, über Abschnitte des Werkes zu diskutieren, sich darüber auszutauschen. Dabei helfen eine Strukturierung und eindeutige Bezeichnung enorm. Von daher sind Überschriften als Bezeichner ebenfalls wichtig, selbst wenn die Autoren keine zusammenfassende Funktion vorsehen, in solchen Fällen kann eine simple Numerierung der Inhalte oder eine ähnlich abstrakte Form der Bezeichnung ausreichen, um dem Publikum die Orientierung zu erleichtern.

Typisch werden Überschriften zu Beginn eines Gruppierungselementes oder eines Elementes wie div, article, header, footer mit ähnlicher Funktion notiert.

Im einfachsten Falle etwa eines Kapitels eines einfachen Buches, welches durch das gesamte Dokument repräsentiert wird, mag der Inhalt eines Elementes lediglich aus der Kapitelüberschrift bestehen, die in einem Element h1 notiert ist, worauf der Rest des Inhaltes aus Absätzen besteht.

Bei Buchkapiteln mit reichhaltigerer Struktur oder auch anderen Texten mit reichhaltiger Struktur wird es weitere Gruppierungselemente wie section für Unterabschnitte geben, die jeweils eine Überschrift haben werden. Sofern solch eine Strukturierung mit Gruppierungselementen konsequent durchgeführt wird, reicht das Element h1 für die semantische Auszeichnung einer Überschrift.

Beispiel: 

<?xml version="1.0" encoding="UTF-8" ?>
<html xml:lang="de" 
      xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Im Fluß</title>
    <link href="hellaufdunkel.css" type="text/css" 
      title="hell auf dunkel" rel="Stylesheet" />
    <link href="dunkelaufhell.css" type="text/css" 
      title="dunkel auf hell" rel="Alternate Stylesheet" />
    <link href="kein.css" type="text/css" 
      title="kein CSS" rel="Alternate Stylesheet" />
    <meta name="author" content="Lasse Machen" />
  </head>
  <body>
    <h1>Im Fluß</h1>
    <p>
    Novelle über die Menschen am Fluß in der Zeit nach dem Klimawandel.
    </p>
    <address>
      Lasse Machen<br />
      Auf der kleinen Insel 7c<br />
      012345 Stromhausen<br />
      email: <a href="mailto:lasse.machen@example.org">lasse.machen@example.org</a>
    </address>

    <section>
     <h1>1. Mit der Flut leben</h1>

     <p>…</p>
     <p>…</p>

    </section>
    <section>
     <h1>2. Orkan!</h1>

     <p>…</p>
     <p>…</p>

    </section>
    <section>
     <h1>3. …</h1>

     <p>…</p>
     <p>…</p>

    </section>
  </body>
</html>

Frühere Versionen von (X)HTML hatten noch keine speziellen Gruppierungselemente wie section oder article, daher gibt es auch noch ein weiteres Modell für Überschriften, welches unabhängig davon eingesetzt werden kann, ob semantisch reichhaltig gruppiert wurde oder nicht:

Es steht zu dem Zwecke eine Kaskade von sechs Elementen für Überschriften zur Auswahl. Dabei gibt eine Zahl im Elementnamen die Stellung in der Kaskade an, grob also, ob es sich um einen Seitentitel, ein Kapitel, einen Abschnitt, einen Unterabschnitt etc handelt. Dazu gibt es die Elemente h1, h2, h3, h4, h5, h6. Der Buchstabe 'h' steht für englisch headline (auf Deutsch 'Überschrift'). Die Zahl gibt die Stellung der jeweiligen Überschrift in der Dokumentstruktur oder Abschnittskaskade des Dokumentes an. 1 ist am höchsten und 6 am niedrigsten. Bei einer graphischen Darstellung wird als Kennzeichen für die Stellung in der Kaskade die Größe geändert. 1 ist hierbei die größte und 6 die kleinste.

Die Überschriftenelemente selbst sind Blockelemente und können dort stehen, wo fließender Inhalt erwartet wird. Im Sinne einer sinnvollen Struktur werden Überschriftenelemente immer nur Geschwister von anderen Blockelementen sein. Der Inhalt ist Phraseninhalt.

In dem Modell der Kaskade werden Dokumente so strukturiert, daß mit der h1 begonnen wird, die nächste Unterstruktur h2 verwendet etc. Im allgemeinen ist es nicht sinnvoll, in der Struktur von 1 auf 3 zu springen oder mit 2 zu beginnen und mit 4 fortzufahren. Die Zahlen bilden also die logische Struktur ab. Dabei ist es auch relevant anzumerken, dass HTML kein Element für etwas wie Untertitel vorsieht, welcher vor oder nach dem eigentlichen Titel zu notieren wäre. Dazu dient die Kaskade der Überschriften nicht, dies müßte zum Beispiel nach der Überschrift mit div und CSS realisiert werden oder in der Überschrift mit inzeiligen Elementen und CSS, nicht mit einer Kombination aus zwei verschiedenen Überschriftelementen.

Beispiel für alte Methode ohne Gruppierung (daher wenig empfehlenswert): 

<?xml version="1.0" encoding="UTF-8" ?>
<html xml:lang="de" 
      xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Im Fluß</title>
    <link href="hellaufdunkel.css" type="text/css" 
      title="hell auf dunkel" rel="Stylesheet" />
    <link href="dunkelaufhell.css" type="text/css" 
      title="dunkel auf hell" rel="Alternate Stylesheet" />
    <link href="kein.css" type="text/css" 
      title="kein CSS" rel="Alternate Stylesheet" />
    <meta name="author" content="Lasse Machen" />
  </head>
  <body>
    <h1>Im Fluß</h1>
    <p>
    Novelle über die Menschen am Fluß in der Zeit nach dem Klimawandel.
    </p>
    <address>
      Lasse Machen<br />
      Auf der kleinen Insel 7c<br />
      012345 Stromhausen<br />
      email: <a href="mailto:lasse.machen@example.org">lasse.machen@example.org</a>
    </address>

     <h2>1. Mit der Flut leben</h2>

     <p>…</p>
     <p>…</p>

     <h2>2. Orkan!</h2>

     <p>…</p>
     <p>…</p>

     <h2>3. …</h2>

     <p>…</p>
     <p>…</p>

     <h3>3.1 …</h3>

      <p>…</p>
      <p>…</p>

     <h3>3.2 …</h3>

      <p>…</p>
      <p>…</p>

     <h3>3.3 …</h3>

      <p>…</p>
      <p>…</p>

      <h4>3.3.1 …</h4>

       <p>…</p>
       <p>…</p>

      <h4>3.3.2 …</h4>

       <p>…</p>
       <p>…</p>

     <h3>3.4 …</h3>

      <p>…</p>
      <p>…</p>

     <h2>4. …</h2>

     <p>…</p>
     <p>…</p>

  </body>
</html>

Ohne Gruppierung können zum Beispiele die Unterabschnitte nicht als solche per Stilvorlage hervorgehoben werden. Inhaltlich stellt sich die Frage, wie etwa nach dem Ende eines Unterabschnittes weiterer Inhalt des übergeordneten Abschnittes abgesetzt werden kann. Das kann man zwar auch als stilistisch fragwürdig ansehen, kann aber immerhin logisch in einer Struktur vorkommen.

Besser ist das Beispiel folglich so umgesetzt: 

<?xml version="1.0" encoding="UTF-8" ?>
<html xml:lang="de" 
      xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Im Fluß</title>
    <link href="hellaufdunkel.css" type="text/css" 
      title="hell auf dunkel" rel="Stylesheet" />
    <link href="dunkelaufhell.css" type="text/css" 
      title="dunkel auf hell" rel="Alternate Stylesheet" />
    <link href="kein.css" type="text/css" 
      title="kein CSS" rel="Alternate Stylesheet" />
    <meta name="author" content="Lasse Machen" />
  </head>
  <body>
    <h1>Im Fluß</h1>
    <p>
    Novelle über die Menschen am Fluß in der Zeit nach dem Klimawandel.
    </p>
    <address>
      Lasse Machen<br />
      Auf der kleinen Insel 7c<br />
      012345 Stromhausen<br />
      email: <a href="mailto:lasse.machen@example.org">lasse.machen@example.org</a>
    </address>

    <section>
     <h2>1. Mit der Flut leben</h2>

     <p>…</p>
     <p>…</p>

    </section><!-- Ende 1. -->
    <section>
     <h2>2. Orkan!</h2>

     <p>…</p>
     <p>…</p>

    </section><!-- Ende 2. -->
    <section>
     <h2>3. …</h2>

     <p>…</p>
     <p>…</p>

     <section>
      <h3>3.1 …</h3>

      <p>…</p>
      <p>…</p>

     </section><!-- Ende 3.1 -->
     <section>
      <h3>3.2 …</h3>

      <p>…</p>
      <p>…</p>

     </section><!-- Ende 3.2 -->
     <section>
      <h3>3.3 …</h3>

      <p>…</p>
      <p>…</p>

      <section>
       <h4>3.3.1 …</h4>

       <p>…</p>
       <p>…</p>

      </section><!-- Ende 3.3.1 -->
      <section>
       <h4>3.3.2 …</h4>

       <p>…</p>
       <p>…</p>

      </section><!-- Ende 3.3.2 -->
      
      <!-- eventuell weiterer Inhalt von 3.3 -->
     </section><!-- Ende 3.3 -->
     <section>
      <h3>3.4 …</h3>

      <p>…</p>
      <p>…</p>

     </section><!-- Ende 3.4 -->

      <!-- eventuell weiterer Inhalt von 3. -->
    </section><!-- Ende 3. -->
    <section>
     <h2>4. …</h2>

     <p>…</p>
     <p>…</p>

    </section><!-- Ende 4. -->

  </body>
</html>

Weil hier einige Elemente section verschachtelt sind, ist jeweils als Hilfe am Ende eines jeden Abschnitts als Kommentar angegeben, welcher Abschnitt gerade geschlossen wurde. So ist es effizienter möglich, zügig weitere Inhalte an der richtigen Stelle zu ergänzen.

Als Tip für das Schreiben sei angemerkt, daß immer mal wieder überprüft werden sollte, ob der zur Überschrift gehörende Text noch inhaltlich zur Überschrift paßt. Im Laufe des Schreibens passiert es schnell, daß Autoren vom Thema abschweifen. Eine Kontrolle anhand der Überschrift kann sie schnell wieder auf den richtigen Pfad bringen. Abweichungen können natürlich auch darauf hinweisen, daß Kapitel oder Unterkapitel fehlen, die dann noch nachträglich hinzugefügt werden können. Dies kann wiederum eine Umstrukturierung des Textes bewirken. Somit sind Überschriften auch für Autoren eine gute Hilfe, um die Gedanken zu strukturieren, wobei eine zuvor skizzierte Überschriftenliste, ein grobes Inhaltsverzeichnis hilft zu überschauen, ob der Inhalt in einer schlüssigen Reihenfolge angeordnet ist oder wo in der Argumentation noch Lücken sind.

Um Mehrdeutigkeiten zu vermeiden, ist es fast immer sinnvoll, jede Stufe der Struktur mit einem Gruppierungselement, notfalls mit einem div zu umgeben, die inhaltliche Struktur also gemäß des ersten Modells zusätzlich klar zu kennzeichnen, zusammengehörige Inhalte so zu gruppieren. Es kann auch helfen, das Layout oder die Ergonomie des Dokumentes mit CSS zu verbessern.

Die Reflexion darüber, was die Struktur des zu schreibenden Inhaltes ist, die bewußte Auseinandersetzung damit, was zu welcher Überschrift, zu welchem Kapitel gehört, kann bereits die Qualität von Texten deutlich verbessern.



Abgerufen von „https://de.wikibooks.org/w/index.php?title=HTML5:_Überschriften&oldid=904207“