Semantisch korrekter Header

Er hielt es für redundant, ein H1-Element für die Seitenüberschrift als Titel zu verwenden, denn das Title-Element der Seite übernimmt diese Aufgabe schon.

Dann haben Wolfgang und ich uns in Verbindung gesetzt, um zu überlegen, wie so ein semantisch korrekter Header eigentlich formuliert werden sollte. Dies erwies sich schwerer als erwartet, doch wir sind zu einem akzeptablen Ergebnis gekommen.

Benutzerfreundlichkeit

Wir waren uns einig, dass die sogenannten 'Skiplinks' sehr sinnvoll sind um den Besucher die Möglichkeit zu geben, gezielt auf einen bestimmten Bereich der Seite zu springen. Also kommt diese kleine Liste mit den Skiplinks zustande:

<ul id="quickskip">
  <li><a href="#maincontent">skip to primary content</a></li>
  <li><a href="#sidebar">skip to secondary content (Sidebar)</a></li>
  <li><a href="#search">skip to the search</a></li>
</ul>

Diese kann man jedoch beruhigt mit dem Style Sheet verstecken, da man ja davon ausgeht, dass das Layout bei visuellen Browsern die Seite übersichtlich genug macht. Doch ohne Stil kann man so auch schnell die Navigation überspringen um beispielsweise direkt zur Sidebar zu kommen. Damit man das Logo der Seite grafisch darstellt, kann man dieses als Hintergrund der Liste 'quickskip' zuteilen.

Navigation

Nach wie vor ist es klar, dass die Navigation eine Auflistung von Menüpunkten ist, also sollte sie durch eine ungeordnete Liste realisiert werden. Hier der entsprechende Codeabschitt:

<ul id="navigation">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

Struktur

Der Header ist eine primäre Sektion der Website und sollte darum auch zusammengefasst werden. Da bietet sich eine Division sehr gut an, da sie dank der neutralen Eigenschaften Sektionen einer Seite einteilen kann. Hier wird der bisherige Code zusammengefasst:

<div id="header">
  <ul id="quickskip">
    <li><a href="#maincontent">skip to primary content</a></li>
    <li><a href="#sidebar">skip to secondary content (Sidebar)</a></li>
    <li><a href="#search">skip to the search</a></li>
  </ul>
  <ul id="navigation">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</div>

CSS

Um das ganze auch für visuelle Browser ansprechender zu gestalten, vergeben wir dem HTML die nötigen CSS-Eigenschaften. Wie schon gesagt, geben wir der Division 'header' eine feste Größe und ein zum Logo passendes Hintergrundbild:

#header {
  background: #1e2b4d url(bg_header.gif) repeat-x 0px 100%;
  margin-bottom: 30px;
  height: 105px;
  overflow: hidden;
  position: relative;
}

Nun müsste dieses Ergebnis zustande gekommen sein. Jetzt verstecken wir die Skiplinks. Dabei ist zu beachten, nicht 'display:none' als Versteckmethode zu verwenden, da Screenreader solche Abschnitte/Elemente auch nicht vorlesen.

#quickskip li {
  position: absolute;
  visibility: hidden;
}

Navigation stylen

Sicherlich möchte keiner die Aufzählungspunkte vor den Menüelementen haben. Deswegen nutzen wir die Eigenschaft 'list-style:none' um diese verschwinden zu lassen. Gleich danach kann man, wenn man möchte, die Menüelemente nebeneinander statt untereinander platzieren:

#navigation,
#navigation li {
  float: left;
  list-style: none;
}

Wie man seine Navigation gestaltet liegt ganz an einem selbst. Wer mehr über List-Styling erfahren möchte, liest doch einfach Wolfgangs Artikel 'Listen stylen mit CSS'.

Das Logo

Als letztes legen wir das Logo als Hintergrund der 'quickskip' fest:

#quickskip {
  background: transparent url('logo.jpg') no-repeat 0px 0px;
  height: 70px;
  width: 390px;
}

Dies ist nun unser Ergebnis. Fragen dazu sind jederzeit willkommen.