Heading

Diese Dokumentation wird aktuell überarbeitet und befindet sich im Beta-Status. Inhalte können sich noch ändern.

Diese Komponente wird erneut auf Barrierefreiheit getestet. Der vollständige Test steht noch aus und kann erst nach einem abgeschlossenen Release erfolgen.

Synonyme: Überschrift, Titel, Heading-Level, H1–H6

Beschreibung: Die Heading-Komponente dient zur semantischen strukturierten Gliederung von Seiteninhalten. Sie ermöglicht es, verschiedene Überschriftenebenen (1–6) zu kombinieren und trennt dabei Styling von semantischer Bedeutung. Dies unterstützt die Barrierefreiheit und Suchmaschinenoptimierung.

Beispiel

Darstellung einer Überschrift der Ebene 1 ohne optional gesetzte Felder. Code kann eingeblendet werden.

<KolHeading _label="Heading Level 1" _level={1} />

Barrierefreiheit

• Semantische Struktur: Die Komponente nutzt echte HTML-Heading-Elemente (H1–H6), um die Dokumentstruktur für assistive Technologien korrekt abzubilden.
• Logische Verschachtelung: Überschriften sollten logisch verschachtelt sein (H1 → H2 → H3 etc.), um eine konsistente Dokumentgliederung zu gewährleisten.
• Label-Attribut: Das erforderliche Attribut _label enthält den Überschriftentext und wird von Screenreadern vorgelesen.
• Suchmaschinenoptimierung: Richtig strukturierte Headings unterstützen die Suchmaschinenoptimierung und verbessern die Auffindbarkeit von Inhalten.
• Flexible Darstellung: Mit _level="0" kann die Komponente als visuell Bold-Text dargestellt werden, während die Semantik neutral bleibt.

Links und Referenzen

Verwendung

Best Practices / Empfehlungen

• Hierarchische Struktur: Beginnen Sie mit einer H1-Überschrift pro Seite und nutzen Sie H2, H3 etc. für Unterkategorien. Vermeiden Sie Sprünge in der Hierarchie (z.B. H1 direkt zu H3).
• Aussagekräftige Texte: Verwenden Sie klare, prägnante Überschriftentexte, die den Inhalt des folgenden Abschnitts präzise beschreiben.
• Nicht für Styling nutzen: Verwenden Sie Headings nicht nur wegen ihrer visuellen Größe. Nutzen Sie dafür stattdessen CSS oder andere Komponenten für reine Designzwecke.
• Sekundäre Überschriften: Die optionale _secondaryHeadline kann für Untertitel oder ergänzende Informationen genutzt werden.
• Suchmaschinen unterstützen: Relevante Keywords in Headings können die Suchmaschinenoptimierung unterstützen, sollten aber nicht erzwungen wirken.

Anwendungsfälle

• Seitenkopf: Hauptüberschrift einer Seite oder eines Inhaltsbereichs
• Abschnittsgliederung: Strukturierung längerer Inhalte in thematische Abschnitte
• Dialog- und Modal-Titel: Überschriften für Modal-Fenster und Dialoge
• Artikelüberschriften: Titel von Artikeln, Blogbeiträgen oder News-Items
• Unterabschnitte: Gliederung komplexer Inhalte in mehreren Ebenen

Konstruktion / Technik

Playground

<KolHeading _label="Heading" _level={1} />

Funktionalitäten

Standardüberschriften

Überschriften mit verschiedenen Ebenen von Level 1 bis 6:

<KolHeading _label="Level 1 Überschrift" _level={1} />

Mit sekundärer Überschrift

Eine Hauptüberschrift kann mit einer sekundären Überschrift kombiniert werden:

<KolHeading _label="Hauptüberschrift" _level={1} _secondaryHeadline="Subheading oder Untertitel" />

Heading ohne semantisches Level

Mit _level="0" wird die Komponente ohne semantisches Heading-Element dargestellt und erscheint visuell als Bold-Text:

<KolHeading _label="Text ohne Heading-Semantik" _level={0} />

API

Properties

Property	Attribute	Description	Type	Default
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to false to enable the expert slot.	string	undefined
_level	_level	Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.	0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined	0
_secondaryHeadline	_secondary-headline	Defines the text of the secondary headline.	string | undefined	undefined

Slots

Slot	Description
	Inhalt der Überschrift.

---