Information Technology Reference
In-Depth Information
Wenn Sie Navigationsblöcke zur Seitennavigation über Sprungmarken inner-
halb eines Dokuments oder nach außen zu verwandten Seiten aufbauen wollen,
steht
nav
zur Verfügung. So wie bei
footer
darf
nav
, wie Sie bei der Randspalte
noch sehen werden, auch an anderen Stellen eines Dokuments vorkommen -
einzige Ausnahme: Innerhalb des
address
-Elements ist
nav
nicht erlaubt.
<footer>
<p>
<nav>
<h3>
<div>
<a>
</div>
</nav>
</footer>
Abbildung 2.4:
Das Grundgerüst der HTML5-Blog-Fußzeile
Die Fußzeile unseres HTML5-Blogs weist CSS-technisch ein paar kleine Beson-
derheiten auf. So ist der gesamte
footer
im Hellgrau des Seitenhintergrunds
eingefärbt, und nur die Links sind mit
background-color: white
formatiert.
Das Copyright im ersten
p
benötigt
float: left
, und die Navigation
text-align:
right
sowie das
h3
-Heading im
nav
-Block werden über
display: none
ausge-
blendet. Warum an dieser Stelle überhaupt ein
h3
-Element steht, werden Sie in
Abschnitt 2.5, Der Outline-Algorithmus, noch sehen. Zum besseren Styling der
Links sind diese noch in ein umgebendes
div
eingebettet.
display: block
für
header
und
nav
sind schließlich ebenso selbstverständlich wie die Reduzierung
der Breite im
footer
-Element auf 79 %.
2.4
Randspalte mit »aside« und »section«
Für Bereiche einer Seite, die mit dem Hauptinhalt nur peripher zu tun haben
und aus diesem Grund eher als
von ihr abgetrennt
angesehen werden können,
steht
aside
zur Verfügung. In unserem Beispiel ist dies die klassische Rand-
spalte rechts mit drei Blöcken für Umfrage, Login und Links. Ist die Liste mit
weiterführenden Links wie zu erwarten als
nav
realisiert, sind die beiden ersten
Blöcke in ein weiteres neues Element eingebettet -
section
.
