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. Dieser ist für einleitende Inhalte gedacht, etwa Firmenlogos, Links zum Impressum oder zur Kontaktseite, aber nicht Links zu externen Seiten, etwa sozialen Netzwerken.

  • HTML5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Beispiel zum header-Element</title> <style> body {margin: 3em;} header {background: #eee; padding: 1em;} article {padding: 2em;} </style> </head> <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> </body> </html>
Zur besseren Veranschaulichung erhält das header-Element einen grauen Hintergrund.


Empfehlung:
Die Angabe des role-Attributs: <header role="banner"> ist nicht nötig, da dies der implizite Standardwert ist.

Auch einzelne Teile einer Internetseite können ein header-Element besitzen.

Beispiel ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Beispiel zum header-Element</title> <style> body {margin: 3em;} header {background: #eee; padding: 1em;} article {margin: 2em; border: thin solid #eee;} article > h1 {margin-left: 30px; font-size: 100%;} article p {margin-left: 30px;} </style> </head> <body> <header> <h1>Man kann kein Buch aufschlagen, ohne daraus zu lernen.</h1> </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> </html>
Zur Veranschaulichung sind die header-Elemente grau eingefärbt und das article-Element umrahmt.

siehe auch[Bearbeiten]