Überschriften

Überschriften strukturieren Ihren Webauftritt und bieten Ihren Besuchern einen Überblick über den Inhalt Ihrer Seiten. Viele TYPO3-Funktionen, Suchmaschinen und sogenannte assistive Technologien (z.B. Screenreader für blinde Menschen) greifen darauf zurück. Unterteilen Sie die Inhalte in kleinere Abschnitte (Contentelemente in TYPO3) und tragen Sie jeweils eine treffende Überschrift ein. Damit können Nutzer den Inhalt der Webseite schneller „querlesen“, indem sie nur die Überschriften lesen, das verbessert die Barrierefreiheit und Sie können die Inhalte im Admin-Bereich von TYPO3 besser verwalten (z.B. verschieben).

Überschriftenebenen

Nutzen Sie Überschriften entsprechend ihrer Überschriftenebenen.
Die Hauptüberschrift einer Seite ist die wichtigste Überschrift und hat die Überschriftenebene 1 (H1).  Setzen Sie die H1 nur einmal pro Seite ein. Jede Überschrift leitet einen neuen Abschnitt auf der Seite ein. Eine Überschrift mit geringerer Ebene (H1 > H2 > H3 > H4) leitet einen Unterabschnitt ein.

Inkonsistente Überschriftenhierarchien sind verwirrend; sowohl Screenreader-Nutzer sowie Suchmaschinen können die Inhalte nicht richtig zuordnen.

Ein gute Überschriftenhierarchie funktioniert wie ein Inhaltsverzeichnis in einem Buch. Der Nutzer sieht schnell, welche Abschnitte es gibt und was Haupt- bzw. Unterabschnitte sind.

Wählen Sie Überschriftenebenen immer entsprechend ihrer korrekten Hierarchie in der Seite und nicht nach gestalterischen Gesichtspunkten aus.

Zurzeit ist die Prüfung der korrekten Überschriftenhierarchie in TYPO3 nicht möglich. Es gibt aber Browsererweiterungen, die eine Prüfung im Frontend ermöglichen. Mit der kostenlosen Erweiterung HeadingsMap können Sie sich die Überschriftenhierarchie anzeigen lassen.
HeadingsMap für Chrome installieren
HeadingsMap für Firefox installieren

Grafische Darstellung

Die Überschriftenebene 2 (H2) gibt es in drei Varianten (normal, groß, mit grüner Linie) und die Überschriftenebene 3 (H3) in zwei Varianten (graue und grüne Linie). Wählen Sie den Überschriften-Typ immer zuerst nach der richtigen Überschriftenebene aus und anschließend nach der gewünschten grafischen Darstellung.
Eine Besonderheit ist „H2, accordion function“: An diesen Überschriften-Typ ist die Akkordeon-Funktionalität gebunden.

Versteckte Überschrift (Header Type „Hidden“)

Sie können die Ausgabe der Überschrift unterbinden, indem Sie den Typ auf „Hidden“ setzen. Das brauchen Sie, wenn das Element keine eigene Überschrift hat, sondern inhaltlich eine Fortsetzung des vorherigen Elements, nur Dekoration oder sehr kurz ist.

Vergeben Sie trotzdem einen beschreibenden Titel. So behalten Sie (und andere) in den Auflistungen im Backend leichter den Überblick. Wir empfehlen, Klammern um versteckte Überschriften zu setzen, damit man sie in der List-Ansicht leicht als solche erkennt.

Auswahl der Überschriftenebene

Die Formatierung der Überschriften eines Inhaltselements erfolgt über das Feld Type (Bild 3). Die Darstellung variiert je Umgebung (z.B. Platzierung in Haupt- oder rechter Spalte). Wählen sie die Überschriftenebene entsprechend dem Inhalt und nicht nach gestalterischen Gesichtspunkten aus.

Es folgen Beispiele für die zur Verfügung stehenden Typen. Es ist absichtlich kein Abstand gesetzt, damit man den voreingestellten Mindestabstand erkennen kann.


Dies ist Header H1

Wählen Sie dazu Header Type „H1“. Verwenden Sie immer nur eine Überschrift H1 pro Seite!

Auswahl eines Subheaders

Unter General im Bereich Headlines gibt es ein Textfeld, um einen Subheader einzutragen. Der Subheader wird jeweils automatisch um eine Hierarchie kleiner als der Header abgestuft. Zum Beispiel: Header H2 wird im Subheader zu H3. Einige weitere Beispiele, wie dies konkret aussieht, finden Sie hier.

Dies ist Header H2

Wählen Sie dazu Header Type „H2“.

Dies ist Header H3

Unter der Überschrift ist eine graue Linie, der Header wird (in der Hauptspalte) komplett in Großbuchstaben gesetzt. Wählen Sie dazu Header Type „H3“

Dies ist Header H4

H4 hat die gleiche Größe wie H3, jedoch eine Linie links statt unten. Wählen Sie dazu Header Type „H4“.

Dies ist Header H5

H5 hat die gleiche Größe wie H3 und H4, ist aber heller und nicht fett. Wählen Sie dazu Header Type „H5“.

Dies ist Header H6

H6 ist klein, hell und kursiv. Wählen Sie dazu Header Type „H6“.

Dies ist Header H2.large

Eine größere Variante der H2-Überschrift. Wählen Sie dazu Header Type „H2.large“.

Dies ist Header H2 with green line

Eine Überschrift H2 mit einer dünnen grünen Linie. Der Abstand zwischen Linie und Überschrift kann nicht festgelegt werden. Wählen Sie dazu Header Type „H2 with green line“.

Dies ist Header H3 with green line

Eine Überschrift H3 mit einer dünnen grünen Linie und Großbuchstaben. Der Abstand zwischen Linie und Überschrift kann nicht festgelegt werden. Wählen Sie dazu Header Type „H3 with green line“.

Dies ist Header H2, accordion function

Dieser Header-Typ bewirkt die Aktivierung der „Accordeon“-Funktion: Die Überschrift wird in einen Kasten gesetzt; der Inhalt anfänglich nicht angezeigt. Er wird erst eingeblendet, wenn man auf die Überschrift klickt. Wählen Sie dazu den Header Type "H2, accordion function".

Überschriften mit dem Rich Text Editor (nicht zu empfehlen)

Mit dem Rich Text Editor (RTE) können Sie Textteile als Überschriften formatieren. Besser ist es aber, so ein Element in mehrere Inhaltselemente aufzuteilen und die Überschrift jeweils in das Header-Feld zu schreiben.

Wenn Sie Überschriften innerhalb des RTE verwenden, müssen Sie auf folgende Funktionen verzichten:

  • Sie können keine Links setzen, die direkt zu dieser Überschrift springen.
  • Diese Überschriften erscheinen nicht in generierten Menüs (Section index).
  • Einzelne Abschnitte können nicht umsortiert, ausgeblendet oder mit Abschnittsformatierungen (z.B. Frames) versehen werden.

Im RTE sind die Überschriften im Feld Styles (Bild 5, Nr. 1) wählbar. Wenn man „Header H2“ gewählt hat, stehen im Feld Block style (Bild 5, Nr. 2) zusätzlich die Optionen „large“ und „with green line“ zur Verfügung; bei „Header H3“ zusätzlich „with green line“. Links in so formatierten Überschriften werden nicht korrekt dargestellt!