Navigation



Seitenaufbau

Jede HTML-Seite besteht aus mehreren Inhaltsblöcken, wie Header, Navigation, Inhalt oder Footer. Diese müssen irgendwie richtig angeordnet werden. Dazu bietet HTML mehrere Möglichkeiten, welche optisch zum gleichen Resultat führen, aus Sicht der Barrierefreiheit jedoch grosse Unterschiede darstellen.

  • Tabellen sind nicht empfohlen
    Layouttabellen haben zwei entscheidende Nachteile: Erstens ist ein durch Tabellen erstelltes Layout absolut starr, und kann durch Stylesheets nicht mehr angepasst werden. Zweitens wurden Tabellen für Daten entworfen und nicht für Layoutzwecke, deshalb werden sie von Screenreadern auch fix zeilenweise vorgelesen und Inhalte damit verstückelt.
  • Frames sind eingeschränkt empfohlen
    Frames stellen eine Alternative zum Layout einer Seite dar, da sie grundsätzlich von allen modernen Browsern und mittlerweisen auch von den meisten assistiven Technologien verstanden werden. Der Nachteil ist jedoch, dass sie von einem Screenreader nacheinander vorgelesen werden. Auch das Setzen von Lesezeichen ist problematisch.
  • <div>-Container sind die bevorzugte Methode
    <div>-Container stellen eine moderne und flexible Art dar, Inhalte zu strukturieren. Die Inhalte lassen sich über CSS flexibel anordnen, die dargestellte Reihenfolge muss nicht der Reihenfolge im HTML entsprechen und sogar Textbrowser können sie interpretieren.

Verwendung von <div>-Containern

Das Layout über <div>-Container ist zwar anfangs etwas komplexer als es mit Tabellen oder Frames wäre, es zahlt sich jedoch mit der Zeit aus. Beispielsweise wenn das Layout angepasst, ein zweites Design angeboten oder eine auf dem selben HTML-Code basierende mobile Lösung erstellt werden soll.

Das folgende Beispiel zeigt ein einfaches Layout mit zwei Spalten: einer Navigations- und einer Inhalts-Spalte. Diese teilen sich die Breite im Verhältnis 30% zu 70%.

CSS

html, body
{ 
  margin: 0; 
  padding: 0; 
  text-align: center; 
}
 
#container
{ 
  width: 100%; 
  text-align: left; 
  margin: 0 auto; 
}
 
#navigation
{
  width: 30%; 
  float: left; 
  position: relative; 
}
 
#content
{
  position: relative; 
  width: 70%;
  float: right; 
}
 
 

HTML

<div id="container">
   <div id="navigation"></div>
   <div id="content"></div>
</div>