XML-Know How

Überschriften

Überschriften sind die Gliederungselemente in Texten, die am stärksten zu gestalterischer Vielfalt anregen. Sie bilden die Inhaltsstruktur und ­-hierarchie ab und haben gleichzeitig eine ästhetische Funktion. Neben den hierarchisch wirksamen Überschriften, die die Strukturtiefe festlegen, gibt es Unter- sowie Zwischenüberschriften. Für die eindeutige Differenzierung der Überschriftshierarchien haben Schriftgröße, Ausrichtung und Abstände zentrale Bedeutung. Einige typografische Regeln der Überschriftengestaltung lassen sich aufgrund des Reflowable-Konzepts nicht auf digitale Medien übertragen.

Insbesondere gilt dies für die Mindestanzahl der Textzeilen vor oder nach einer Überschrift bei einem Seitenwechsel sowie für feste Zeilenwechsel innerhalb der Überschrift.

Zur Definition von Hauptüberschriften stehen in HTML die Elemente h1 bis h6 zur Verfügung. Direkt aufeinanderfolgende Überschriftselemente können mit Hilfe des HTML 5-Elements hgroup gruppiert werden. In Kombination mit den strukturierenden Containerelementen können weitere Hierarchien umgesetzt werden. Für die Strukturierung von Zwischenüberschriften und Untertiteln außerhalb einer hierarchischen Gliederung ist in HTML kein semantisches Element vorgesehen. Hierfür müssen generische div-Container und/oder Absatzelemente mit einem entsprechenden class-Attribut verwendet werden.

In wissenschaftlichen Texten wird die Überschriftshierarchie häufig durch eine Nummerierung systematisiert. Die typografische Umsetzung kann hinsichtlich der Überschriftsposition und der Auszeichnung und Abstände der Zählung sehr unterschiedlich sein.


<div class="u-block1">
  <h1>
    <span class="u-zaehler">1.</span>
    <span class="u-text">Überschrift</span>
  </h1>
  <p class="untertitel">Unterüberschrift</p>
</div>
Listing 4.16 Beispielstruktur einer Hauptüberschrift mit Zähler und Untertitel

Durch die Vergabe der Klassenattribute lassen sich die einzelnen Block- und Inlineelemente per CSS ansprechen und individuell formatieren. Um die einzelnen Überschriftsebenen voneinander unterscheiden zu können, sollten unterschiedliche Schriftgrößen sowie relative Abstände vor und nach den Elementen gesetzt werden.

Bei layoutintensiven Büchern kommt es vor, dass Überschriften grafisch aufwändig gestaltet sind. Trotz der neuen Möglichkeiten der Schrifteinbettung lässt sich eine solche Gestaltung oftmals nicht über HTML und CSS abbilden. In diesen Fällen muss auf die Verwendung einer Abbildung als Überschriftselement zurückgegriffen werden. Um die Barrierefreiheit zu gewährleisten, sollte in diesem Fall eine Textalternative mit dem alt-Attribut angegeben werden.