HTML5-Serie: neue Elemente für die Seitenstruktur
0 0 0 
Matthias Apsel
0 
Robert B.
0 Matthias Apsel
HTML5-Serie: neue Elemente für die Seitenstruktur
Im ersten Teil haben wir an dieser Stelle einen Blick auf die Entwicklung von HTML5 geworfen. Vor allem vor dem Hintergrund der Semantik. Mit der neuen Version der allgemeinen Standardsprache für das Internet soll die Semantik zurückkehren. Elemente sollen nicht mehr einfach nur ihrer Form wegen, sondern vor allem auf Grund ihrer Bedeutung innerhalb einer Webseite eingesetzt werden.
Es gibt derzeit mehr als 30 neue Elemente, die alle eine wichtige Bedeutung in einem HTML-Dokument haben. Wie schon im ersten Teil erwähnt, nutzte man früher div-Elemente, oder „Container“, die eigentlich keinerlei eigene Bedeutung hatten, designtechnisch aber genutzt werden mussten. Nun gibt es für jede „Lebenslage“ ein eigenes HTML-Element, so dass man auf die bekannten div-Konstrukte komplett verzichten kann und soll.
Wir werfen an dieser Stelle einen Blick auf all die Elemente, die Webdesignern bei ihrer täglichen Arbeit immer wieder über den Weg laufen werden und die zur Struktur vieler Webseiten einfach dazu gehören.
Das header-Element
Ein Header oder auch Kopfbereich einer Webseite ist heutzutage so etwas wie ein Standard im modernen Webdesign. Nahezu alle Webseiten sind mit einem Kopfbereich ausgestattet, in dem gewöhnlich Logos, Suchfelder, Navigationen oder auch Überschriften der Seite zu finden sind. Wichtig zu erwähnen ist unter anderem auch, dass das Element header nicht mit dem Dokumentenkopf head verwechselt werden darf.
In Bezug auf den header streiten sich manche Puristen zudem immer noch, ob man ihn nur einmal oder mehrfach in einem neuen Dokument nutzen darf. Allgemeine Auffassung sollte jedoch eigentlich sein, dass eben auch ein reiner Inhalt einen eigenen Kopfbereich beinhalten könnte, womit die mehrfache Verwendung des Elements auch semantisch durchaus zu vertreten ist.
Codebeispiele
<body><header> <h1> <img alt="Logo" src="..."> Herzlich Willkommen </h1> <p>Wir begrüßen Sie ... </p> </header> ... </body>
<article>
<header>
<h1>
<img class="autor" alt="Foto des Autors" src="...">
Artikelüberschrift
</h1>
</header>
<p>Das header-Element kann sowohl im Kopfbereich einer Seite,
als auch in den Kopfbereichen verschiedener Inhalte erscheinen.</p>
</article>
Navigationen mit dem nav-Element
Da wir schon die ganze Zeit von Struktur sprechen, wollen wir auch in diesem Artikel weiterhin strukturiert vorgehen. Eine Navigation ist die Essenz einer jeden Webseite. Mit ihr kann der User bzw. Leser durch die verschiedenen Teilbereiche und Inhalte einer Webseite „navigieren“. Häufig werden Navigationen, die ja eine Liste verschiedener Verweise sind, semantisch korrekt als ungeordnete Liste ausgezeichnet. Diese Liste wurde früher dann oft in einen div-Container gepackt, die einen entsprechenden Klassenbezeichner oder eine ID bekamen. Oft hatte das aber weniger den Zweck, dem Browser die Struktur klar zu machen, sondern war eine Hilfe der Webdesigner für sich selbst, um sich innerhalb der Dokumente zurechtzufinden. Manchmal wurden richtigerweise in diesem div-Element etwa noch Überschriften, weitere Listen (um die Schwierigkeit der Verschachtelung zu umgehen) oder andere ergänzende Informationen untergebracht, denn eine Liste darf nur Listenelemente (li) enthalten.
Genau an dieser Stelle zeigt sich der Vorteil des neuen nav-Elements. In dieses Strukturelement kann man nun seine Seitennavigation einbauen, die nach wie vor korrekterweise aus einer oder mehreren Listen bestehen sollte. Auch zusätzliche Elemente sind kein Problem.
Eine mehrfache Nutzung des nav-Elementes ist ebenso semantisch korrekt, denn tatsächlich habe heute ja viele Webseiten mehrere Navigationen, vielleicht eine im Kopfbereich, diverse kontextabhängige Navigationen oder auch verschiedene Bearbeitungs- oder Filtermöglichkeiten.
Nicht zu verwechseln ist das nav-Element allerdings mit dem neuen alten menu-Element, das seit HTML5 wieder mit dabei ist.
Codebeispiel
<nav>
<h2>Navigation</h2>
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
<small>Bitte die AGB beachten</small>
</nav>
Kontextmenüs mit dem menu-Element
Das Element menu war einst schon einmal in HTML zu finden. Mit HTML4 wurde es wieder abgeschafft, von vielen Browsern aber dennoch interpretiert. Das Element arbeitet wie eine Liste, d.h. man kann darin Listenelemente unterbringen. Im Gegensatz zu ul-Elementen darf ein menu-Element aber auch andere Elemente, wie etwa input-Elemente. So könnte beispielsweise ein Menü Radio- oder Checkboxen zur Auswahl bestimmter Optionen enthalten.
Von vielen Webdesignern, die schon mit HTML5 arbeiten, wird das menu-Element derzeit jedoch falsch eingesetzt. Sie nutzen dieses Element anstelle eines nav-Elements. Allerdings, und das ist wichtig zu beachten, hat das menu-Element die Funktion eines Kontextmenüs, also Menüs, die meist mit der rechten Maustaste aufgerufen werden. Ein menu-Element soll eben keine Liste von Verweisen repräsentieren, sondern eine Liste von Befehlen oder Werkzeugen.
Codebeispiele
<menu type="context">
<li>
<menu label="download">
<li>Bild herunterladen</li>
<li>Linkziel kopieren</li>
</menu>
</li>
<li>
<menu label="öffnen">
<li>In neuem Fenster</li>
<li>In neuem Tab</li>
</menu>
</li>
</menu>
<menu type="toolbar"> <li><label>Schriftgröße:</label><input type="text" ...></li> <li><label>Schriftfarbe:</label><input type="text" ...></li> </menu>
Derzeit verstehen nicht alle Browser das menu-Element so wie es gedacht ist, die meisten kennen noch das veraltete Element, weswegen es auch durchaus möglich ist, menu als „normale“ Navigation zu benutzen. Aus semantischen Gesichtspunkten ist das jedoch falsch, auch wenn es korrekt angezeigt wird.
Für Seiten, die ihre Inhalte in mehreren Sprachen zur Vefügung stellen, sollte das Sprachauswahlmenu aus semantischer Sicht mithife von menu-Elementen realisiert werden, da man zwar zu einer anderen Seite navigieren kann, diese aber denselben Inhalt lediglich in einer anderen Sprache darstellt und darüberhinaus die gewählte jetzt eingestellt ist, möglicherweise sogar dauerhaft, sodass Sie diese Sprache auch bei Ihren künftigen Besuchen dieses Webangebots vorfinden.
Der Aufruf eines Kontextmenüs über die rechte Maustaste kann mit HTML und CSS allein nicht umgesetzt werden, hier muss auf den Einsatz von JavaScript zurückgegriffen werden.
Das footer-Element
Das header-Element enthält einleitende, struktierende Informationen zu einem Dokument oder einem Abschnitt. Wie weiter oben beschrieben, können das sinnvollerweise Logos, Überschriften oder auch Navigationen sein. Doch wohin mit dem Autor, mit Hinweisen zum Urheberrecht, mit dem Link zum Impressum? Diese Informationen werden meistens am Schluss der Internetseite untergebracht, daher hat das Element auch seinen Namen bekommen: footer. Allerdings muss ein footer nun nicht zwangsläufig ganz unten stehen, denn wir erinnern uns, nicht die Gestaltung bestimmt das zu verwendende Element, sondern die Semantik. Nichts spricht dagegen, ein footer-Element etwa neben einen Blogbeitrag zu setzen, wenn es denn Informationen über den Autor und den Beitrag enthält. Diese Anordnung findet man relativ häufig etwa in Foren.
Codebeispiele
<body>.. <footer> <p> © <a href="...">SELFHTML</a> <a href="...">Impressum</a> </p> </footer> </body>
<article>
<p>Das footer-Element kann sowohl zur gesamten Seite,
als auch zu einzelnen Beiträgen gehören.</p>
<footer>Übernahme von <a href="...">SELFHTML</a></footer>
</artice>
Mit den Elementen header, nav und footer können Sie nun die Grundstruktur vieler Internetseiten semantisch korrekt abbilden und so dafür Sorge tragen, dass Ihre Internetseite in unterschiedlichsten Browsern aber auch von nicht visuellen Medien optimal dargestellt wird.
Einige Elemente zur Strukturierung von Seiten fehlen noch, etwa die in den Codebeispielen schon auftauchenden article und section oder das aside-Element. Auch über das umstrittene Element main wird zu reden sein.
Lesen Sie weiter
Teil 3: Inhalte strukturieren
-
Sehr cool! Bitte mehr davon :-)
-
Vielen Dank, das verspricht echt interessant zu werden. Habt Ihr einen Tipp, wo ich mehr über dieses problematische menu-tag erfahren kann?
-
Erste Anlaufstelle ist immer die Spezifikation. Btw: Verwechsle nicht Tag und Element.
-
Wenn ich eine so genannte „Brotkrumen-Navigation“ verwende, wäre doch eine geordnete Liste sinnvoller als eine ungeordnete, oder?
-
Ich hatte eine Diskussion im Forum angestoßen. Die meisten haben sich dort der Argumentation einer geordneten Liste angeschlossen, obwohl eine ungeordnete Liste sicher auch nicht völlig verkehrt ist (siehe Forumsthread). Glücklicherweise ist Semantik kein starres Gebilde.