Ohne CSS werden nav und aside im normalen Textfluss angezeigt
Ebenso wie viele Webseiten oben und unten einen erkennbaren Kopf- bzw. Fußbereich haben, haben sie außerdem eine oder mehrere Navigationsleisten und häufig auch eine Spalte oder einen Bereich für zusätzliche Informationen, Werbung usw. Auch für diese Bereiche sieht HTML5 entsprechende Elemente vor.
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Titel</title> </head> <body> <h1>Aktuelles</h1> <nav> <h2>Navigation</h2> <ul> <li><a href="index.html">Startseite</a></li> <li><a href="produkte.html">Produkte</a></li> <li><a href="referenzen.html">Referenzen</a></li> <li><a href="geschaeftskunden.html">Geschäftskundenbereich</a></li> </ul> </nav> Viele Neuigkeiten usw. <aside> <p>ICH twittert:<br> <a href="http://twitter.com/ICH">ICH auf Twitter</a></p> usw. </aside> </body> </html>
Um einen Navigationsbereich zu definieren, notieren Sie an der gewünschten Stelle ein nav-Element in der Form <nav>…</nav>. Sie können auch mehrere Navigationsbereiche auf einer Seite notieren. Der Inhalt des Navigationsbereichs kann aus Text und anderen HTML-Elementen bestehen. Sinnvollerweise enthält er HTML-Code für eine Liste mit Hyperlinks zu anderen Seiten der Website. Im obigen Beispiel ist das eine ungeordnete ul-Liste. Es spricht jedoch nichts dagegen, innerhalb des Navigationsbereich auch noch eine passende Überschrift zu notieren, wie im obigen Beispiel die Überschrift 2. Ordnung Navigation.
Um eine Seitenleiste oder einen Bereich für Marginaltext zu definieren, notieren Sie an der gewünschten Stelle ein aside-Element in der Form <aside>…</aside>. Dazwischen können Sie Text und andere HTML-Elemente notieren. Der Sinn des aside-Elements ist, ergänzende Inhalte zu einer umgebenden Information zu markieren. Das kann eine kleine Einzelinformation zu einem Fließtext sein, etwa so:
<p>Klaus Aschekowski hat heute mal wieder den Montag nach einer Wochenendschicht hinter sich. Seit die blöde neue Bauingenieurin seiner Kolonne vorsteht, hat er keine ruhige Minute mehr und muss schlimmer ranklotzen als je zuvor.</p> <aside>aus dem Krimi <strong>Lose Fugen</strong></aside> <p>Das allein wäre ja nur halb so schlimm, wenn seine neue Vorgesetzte nicht ausgerechnet jene Schiedsrichterin wäre, die vor Jahren bei dem Spiel Altona 93 gegen den SV Meppen, bei dem Klaus zwei Tore schoss, einen seiner Treffer nicht gewertet hat.</p>
Der HTML-Standard stellt jedoch keine Vorschriften auf, welche Dimension der Bezugsrahmen für einen aside-Bereich haben soll. Es kann sich also ebensogut um einen Bereich handeln, der dem gesamten Hauptinhalt einer Webseite beigeordnet ist und im fertigen Seitenlayout z.B. als „rechte Spalte“ erscheint.
Optisch haben auch die Elemente nav und aside keine andere Wirkung, als eine neue Zeile im Textfluss zu erzeugen. Um solche Bereiche z.B. seitlich umfließend oder in einer eigenen Spalte darzustellen, müssen Sie CSS bzw. CSS-Eigenschaften darauf anwenden.
Zum Thema Browser-Unterstützung dieses Elements siehe auch:
Arbeiten mit Browsern unbekannten Elementen
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.