Heading
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
_labelenthä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
_secondaryHeadlinekann 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
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 |
|---|---|
"expert" | Custom label content, e.g. for rich text or icons. https://public-ui.github.io/docs/concepts/expert-slot |