HTML/Seitenstrukturierung/header

Aus SELFHTML-Wiki
< HTML‎ | Seitenstrukturierung(Weitergeleitet von Header)
Wechseln zu: Navigation, Suche

Dieser Artikel behandelt das strukturierende HTML-Element header.


Das header-Element enthält den sichtbaren Kopfbereich einer Webseite oder eines Teils einer Seite. Dabei soll es einleitende Inhalte gruppieren, etwa Firmenlogos, ein Motto, Links zum Impressum oder zur Kontaktseite, aber nicht Links zu externen Seiten, etwa sozialen Netzwerken.

  • HTML5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beachten Sie: header mit nur einer Überschrift sind semantisch sinnlos. Sie blähen nur das Markup unnötig auf und sollten weggelassen werden.

Allgemeines[Bearbeiten]

Beispiel ansehen …
<body> <header> <img src="http://wiki.selfhtml.org/mediawiki/images/3/39/Selfhtml-Logo-Neu.png" alt="SELFHTML - Die Energie des Verstehens"> <h1>Herzlich Willkommen!</h1> </header> <article> <h1>selfhtml.org</h1> <p>Die offizielle Heimatadresse ... </p> </article>
Das header-Element gruppiert das Logo und eine Begrüßung. Zur besseren Veranschaulichung erhält das header-Element einen grauen Hintergrund. Der Textabsatz wird größer dargestellt und erhält eine rote Textfarbe.
Empfehlung:
Die Angabe des role-Attributs: <header role="banner"> ist nicht nötig, da dies der implizite Standardwert ist.
Beispiel: header mit Skiplink
<header>
	<a href="#main">Navigation überspringen</a>
	<img id="site-logo" src="logo.svg" alt="example dot com"/>
	<p id="claim">Wir stecken den Claim ab.</p>
	<nav></nav>
</header>

header für Seitenstrukturierungselemente[Bearbeiten]

Auch einzelne Teile einer Internetseite (aber nicht der footer) können ein header-Element besitzen.

Beispiel ansehen …
<body> <header> <h1>Man kann kein Buch aufschlagen, ohne daraus zu lernen.</h1> <p>Betrachtungen über den Sinn des Lesens</p> </header> <article> <header> <h1>Untersuchungen zur Mediennutzung von Jugendlichen</h1> <p>Eine Studie von Max Mustermann</p> <nav> <ul> <li><a href="">Alle Artikel von Max Mustermann</a></li> <li><a href="">Ähnliche Artikel</a></li> </ul> </nav> </header> <h1>Einleitende Überlegungen</h1> <p>Der Medienkonsum in Deutschland ist ... </p> </article> </body>
Der Kopf der Seite enthält einen header mit einer Überschrift h1 und einem Untertitel, der nicht als Überschrift, sondern als p-Element ausgezeichnet wird.
Auch der folgende article enthält einen header, der dazu noch einige Links enthält.

siehe auch[Bearbeiten]

Weblinks[Bearbeiten]