Was ist der Unterschied zwischen header und h1?
Grundlegende Bedeutung und Zweck
Das <header>-Element ist ein semantisches HTML5-Element, das verwendet wird, um einen Kopfbereich einer Sektion oder eines Dokuments darzustellen. Es dient als Container für Einführungsinhalte wie Überschriften, Navigationslinks oder Logos. Das <header> kann mehrfach auf einer Seite vorkommen, um z.B. den Header einer gesamten Seite, eines Artikels oder eines Abschnitts zu definieren.
Das <h1>-Element hingegen ist ein Überschriften-Element, das die höchste Ebene einer Überschrift darstellt. Es zeigt inhaltlich den wichtigsten Titel oder die Hauptüberschrift eines Abschnitts oder Dokuments an. Es handelt sich um ein Inline-Element, das typischerweise in einem <header> oder anderen Bereichen eingesetzt wird, um den Titel zu kennzeichnen.
Struktur und semantische Rolle
Ein <header> ist ein Block-Element, das andere Elemente enthalten kann, darunter Überschriften (<h1>-<h6>), Navigationsleisten (<nav>), Logos oder Suchformulare. Es definiert keinen spezifischen Inhaltstyp, sondern eine klare semantische Rolle als Kopfbereich.
Ein <h1> gibt speziell die Bedeutung einer Hauptüberschrift an. Suchmaschinen und Screenreader nutzen diese Überschriften, um die inhaltliche Gliederung einer Seite besser zu verstehen. Es ist also ein inhaltliches Element, das Text mit besonderer Wichtigkeit kennzeichnet.
Verwendung im Kontext
Typischerweise wird das <h1> innerhalb eines <header>-Elements eingefügt, wenn man z.B. den Titel eines Artikels oder einer Webseite als Überschrift anzeigen möchte. Dies zeigt, dass das <header> den Bereich definiert, während das <h1> den wichtigen Überschriftentext innerhalb dieses Bereichs darstellt.
Es ist aber nicht zwingend, dass ein <h1>-Element immer in einem <header> steht. Ebenso kann ein <header> auch ganz ohne Überschrift auskommen, indem er z.B. nur Navigationselemente enthält.
Zusammenfassung
Zusammenfassend ist <header> ein semantisches Container-Element für Kopfbereiche einer Seite oder Sektion, während <h1> ein Überschriften-Element ist, das die wichtigste Überschrift innerhalb dieser oder anderer Bereiche definiert. Sie ergänzen sich also in ihrer Verwendung, haben aber unterschiedliche Funktionen und Bedeutung im HTML-Dokument.