14.4 Beez HTML 

Wenn Sie sich das HTML des Beez-Templates ansehen, werden Sie feststellen, dass es relativ einfach gebaut ist. Es wurde Wert darauf gelegt, dass die Struktur leicht verständlich ist und semantischen Sinn ergibt. Auffällig sind zwei Bereiche. Direkt unter dem Logo findet sich ein Bereich mit Sprungmarken:
<ul> <li><a href="#content" class="u2">… <li><a href="#mainmenu" class="u2">… <li><a href="#additional" class="u2">… </ul>
Listing 14.1 Die Sprungmarken
Diese sind in der Anzeige nicht sichtbar. Sie helfen jedoch Menschen, die mit nichtgrafischen Browsern arbeiten (z. B. mit Screenreadern oder einfach Textbrowsern) dabei, schnell an den gewünschten Ort zu kommen. Stellen Sie sich vor, Sie lassen sich den Inhalt einer Seite vorlesen. Die linke Spalte besteht aus fünf Modulen. Bei jedem Klick kommt vor dem eigentlichen Inhalt die Ausgabe dieser fünf Module, die sich eigentlich ja nicht ändert. Da wird man spätestens nach dem dritten Link wahnsinnig. Visuell ist das einfach zu vermeiden, da sich der Content-Bereich einfach in der Mitte oben befindet. Aber wenn man die Seite linear ausgibt, sind diese Sprungmarken unverzichtbar.
Daneben findet sich noch ein Bereich, in dem die Schriftgröße einfach veränderbar ist:
<div id="fontsize">
Mithilfe eines JavaScripts, das hier sehr sinnvoll eingesetzt wird, lässt sich die Ausgabe so einstellen, dass auch Menschen mit eingeschränktem Sehvermögen sie leicht lesen können.
Im Rest des Templates sehen Sie, dass keinerlei Layout-Elemente verwendet werden. Der gesamte Code ist mit <div>-Tags beschrieben und folgt einer logischen Struktur.