Das HTML5 viele Neuerungen mitsich bringt wissen wir bereits, eine große Neuerung ist die Einführung von neuen semantischen HTML Elementen. In diesem Artikel wird ein genauerer Blick auf diese semantischen Elemente geworfen.
Momentan wird in den meisten Fällen, die komplette Struktur einer Webseite mit div Containern modelliert. Dabei wird je nach Bedeutung des Containers, diesem dann zum Beispiel eine id zugewiesen. Die semantische Unterscheidung findet also vor allem auf Basis der id statt.
Navigation
<div id="navigation" class="navigation_container"> ….. </div> <div id="content"> …. </div>
HTML5 bietet neue Elemente für die Strukturierung einer Seite, so dass die Semantik nicht mehr über die id festgelegt werden muss, sondern direkt implizit aus dem Element folgt. Grundsätzlich unterscheidet man zwischen zwei Arten von semantischen HTML5 Elementen, zum einen gibt es sogenannte text-semantische und zum anderen struktur-semantische Elemente.
Text-semantische Elemente sind vergleichbar mit inline Elementen, diese dienen nicht zur Strukturierung der Seite. Bei struktur-semantischen Elementen handelt es sich um Elemente, mit denen die Struktur der Seite festgelegt werden kann. Dies sind block Elemente wie zum Beispiel, header, footer, navigation usw.
In den nachfolgenden Abschnitten werden jeweils einige text-semantische und struktur-semantische Elemente und ihre Verwendung vorgestellt. Es gibt jedoch noch einige mehr, eine komplette Liste samt Spezifikation findet man auf der Seite von W3C.
Text-semantische Elemente
Wie bereits angedeutet, sind text-semantische Elemente, inline Elemente. Vergleichbar mit einem span Element, welches aber keine semantische Funktion hat.
Mark
Das mark – Element ist dazu da, um einen Satz oder ein Wort, in einem Text hervorzuheben. Man kann sich dieses Element wie einen Textmarker vorstellen. Eine Suchfunktion, bei der das gesuchte Wort hervorgehoben wird ist zum Beispiel eine Einsatzmöglichkeit für diesen Tag.
Das gleiche Ergebnis könnte auch mit einem span Tag und den entsprechenden CSS Styles erreicht werden.
Das ist ein <mark style="background:yellow">Highlight</mark>
So sieht das Ganze dann live aus.
Time
Dieses Element ist dazu da, um temporäre Informationen zu kennzeichnen. Es kann zur Angabe einer Uhrzeit, eines Datums oder zu beidem verwendet werden.
<time datetime="14:00">14Uhr</time> <time datetime="2011-11-21">11 November, 2011</time> <time datetime="2011-11-21T14:00">11 November, 2011 um 14Uhr</time>
Das datetime Attribut ist nicht unbedingt notwendig, aber wenn man darauf verzichtet, sollte die Angabe des Datums ein maschinenlesbares Format haben.
<time>2011-07-14</time>
Eine Demo zu diesem Tag findet ihr hier.
Wenn man einen Laden besitzt und seine Öffnungszeiten angeben will ist dieser Tag ideal, Suchmaschinen können auf diese Weise viel einfacher solche Informationen zu ordnen.
Meter
Mit dem meter Element lassen sich Teil-Vom-Ganzen Beziehungen, Messwerte oder Zahlenspannen darstellen. Wichtig ist dabei, dass der maximale Wert bekannt sein muss. Es ist also kein Element, dass dazu gedacht ist, einfach nur Zahlen darzustellen.
Zunächst mal ein einfaches Beispiel:
<meter>9 von 10</meter> <meter>5 von 6</meter>
Der maximale Wert ist bekannt, in diesem Fall 10 und 6. Damit kann zum Beispiel der freie Speicherplatz einer Festplatte angeben werden.
Es gibt 6 Attribute, welche im meter Tag erlaubt sind.
Value
Dieses Attribut gibt den Wert des Elements an, also welche Zahl aus dem Element geparsed wird. Wenn das value Attribut nicht explizit angeben ist, wird automatisch die erste Zahl innerhalb des Elementes verwendet – in dem oberen Beispiel 9 und 5. Sollte keine reelle Zahl als erstes innerhalb des Tags stehen, dann wird automatisch 0 verwendet.
<meter value="5">5 von 6</meter>
Min
Mit dem min Attribut wird der minimal annehmbare Wert festgelegt, wenn nichts weiter angeben wird, dann wird min automatisch auf 0 festglegt.
Max
Analog zum min Attribut, nur das hier der maximale Wert festgelegt wird. Wenn das max Attribut jedoch kleiner angeben wird, als das min, dann wird automatisch der min Wert als max gesetzt. Wenn nichts angeben wird, wird der max Wert automatisch auf 1 gesetzt.
Low
Das low Attribut steht für den Punkt, ab dem die Zahlenspanne anfängt. Low ist in diesem Fall zu übersetzen mit „von“. Wenn der low Wert kleiner dem min Wert ist, dann wird der low Wert automatisch auf den min Wert gesetzt.
High
Analog zum low Wert, gibt high den Punkt an, an dem die Zahlenspanne aufhört und ist damit quasi die obere Schranke. High ist in diesem Fall zu übersetzen mit „bis“. Damit ergibt sich mit low ein „von“ … „bis“ … Wert. Wird high größer als max gesetzt, wird high automatisch auf max gesetzt.
Optimum
Der Optimale Wert welcher zwischen min und max liegen soll. Er muss nicht zwischen low und high liegen. Bei einer Festplatte könnte zum Beispiel der optimale Wert 0 GB sein, also dass die Festplatte noch komplett leer ist.
Progress
Das progress Element ist dazu da, um den Fortschritt einer bestimmten Aktion darzustellen. In vielen Browsern wird der Fortschritt mit dem Standardfortschrittsbalken des Betriebssystems dargestellt.
Dieses Element ist eigentlich nur dann interessant, wenn es mit Hilfe von Javascript on-the-fly geupdatet wird. Auf diese Weise können dann zum Beispiel Downloadprozesse dargestellt werden.
Der Download ist zu <progress value="0.57">57%</progress> fertig.
Demo:
Der Download ist zu
fertig.
Der progress Tag hat 3 Attribute, min steht für den minimal annehmbaren Wert, max für den maximalen Wert und value für den aktuellen Wert.
Struktur-semantische Elemente
Struktur-semantische Elemente dienen dazu, die Seitenstruktur zu definieren. Dies sind alles block Elemente, die dazu gedacht sind, unsemantische div Container mit id‘s und Klassen zu ersetzen.
Section
Das section Element repräsentiert einen Abschnitt eines Dokuments, typischerweise einen mit einer Überschrift. Das section Element muss keinen bestimmten Inhalt enthalten und ist vergleichbar mit einem normalen div Container.
Trotzdem gibt es einen Unterschied, normalerweise sollte der Inhalt von verschiedenen section Elementen in irgendeiner Weise zusammenhängen.
Header
Das header Element enthält Navigationslinks, oder Inhalte die zur Einführung eines Abschnittes, Dokuments etc. dienen.
Die meisten Webseiten enthalten nur ein einziges header Element, es ist jedoch durchaus erlaubt, mehrere header Elemente zu verwenden.
Zum Beispiel kann jede section einen eigenen header haben.
Header Elemente dürfen jedoch nicht verschachtelt, oder in <footer> und <address> Tags verwendet werden.
<header> <h1>Willkommen</h1> <p>Ich bin Horst</p> </header>
Footer
Ähnlich wie das header Element enthält das footer Element Inhalte, die eben zum Footer gehören. Genau wie das header Element, ist der footer nicht eindeutig und kann durchaus mehrfach in einem HTML5 Dokument vorkommen. Zum Beispiel am Ende jeder section.
Um das footer Element semantisch richtig zu verwenden, sollten vor allem Metainformationen zu den Inhalten auf die sich das footer Tag bezieht enthalten sein. Dies können Links zu ähnlichen Inhalten, Informationen über den Autor oder Copyrightinformationen sein.
<footer> <p>© 2011 example.com</p> </footer>
Aside
Das aside Element enthält Informationen und Links, welche nicht oder nur bedingt mit dem Hauptthema zu tun haben. Es ist semantisch also in etwa wie eine Sidebar zu verstehen.
Genau wie bei den anderen struktur-semantischen Elementen kommt es nicht darauf an, an welcher Position das Element sich befindet. Es kommt vielmehr auf die semantischen Beziehung zu den anderen Elementen an. Die Sidebar muss also nicht rechts oder links an der Seite platziert sein, sondern kann überall sein.
Der aside Tag hilft außerdem Suchmaschinen und Screenreader, nicht unbedingt zum Thema relevante Informationen zu erkennen.
Nav
Das nav Element enthält Navigationselemente, also Links die auf andere Sektionen der Webseite oder andere Dokumente verweisen. Typischerweise wird das nav Element innerhalb eines header Tags platziert.
Anders als header und footer Elemente ist das nav Element dazu gedacht, wirklich einmalig zu sein und nur wichtige, für die Navigation der Seite notwendige, Links zu enthalten.
Es ist wichtig, nicht jeden Link, der nicht wirklich zur Navigation auf der Seite beiträgt in das nav Element zu packen.
Article
Das article Element enthält Inhalte die in sich zusammenhängend sind, aber vom Rest der Seite unabhängig sind. Paradebeispiel dafür ist ein Blogartikel, oder ein Newsbeitrag.
Der article Tag muss also nicht unbedingt Inhalte umfassen, die wir uns in deutsch unter einem Artikel vorstellen, wichtig ist die inhaltliche Unabhängigkeit vom Rest der Seite. Es ist damit auch durchaus erlaubt Kommentare in ein article Tag zu packen.
Beispiel
<article> <h4>CSS Tricks</h4> <p>blab la blab la blab la blab la bla.</p> <p>blab la blab la blab la blab la bla.</p> <p>blab la blab la blab la blab la bla.</p> </article>
Weiter muss der Inhalt eines article Tags nicht unbedingt textueller Natur sein. Es ist durchaus erlaubt zum Beispiel eine Uhr, einen AktienTicker oder ein anderes Widget in einen article Tag zu packen. Es ist nur wichtig, dass der Inhalt des article Tags in sich abgeschlossen ist und alleine stehen kann.
Section und article Tag – Unterschiede
Nachdem wir nun den section und den article Tag kennen, kommen uns beide vielleicht ziemlich ähnlich vor. Es gibt jedoch einige signifikante Unterschiede, die uns zeigen, dass diese beiden Tags nicht miteinander vertauschbar sind.
Der größte Unterschied besteht darin, dass der Inhalt eines article Tag in sich abgeschlossen ist und alleine stehen kann. Bei einem section Tag ist dies nicht der Fall. Es ist erlaubt, innerhalb eines article Tags mehrere section Tags zu haben. Auf der anderen Seite ist es jedoch auch erlaubt, mehrere article Tags innerhalb eines section Tags zu haben.
Browser Support
Praktisch alle Browser der neuen Generation unterstützen die oben genannten Tags. Trotzdem gibt es immer noch genug, die diese Tags nicht unterstützen. Die meisten Browser erlauben jedoch die Verwendung von irgendwelchen Tags, dabei muss nur per CSS festgelegt werden, wie diese dargestellt werden sollen.
Fur die struktur-semantischen Tags gilt, dass sie alle block Elemente sind.
section, article, header, footer, nav, aside {
display: block;
}
Dadurch verstehen zwar die älteren Browser die Semantik, die hinter diesen Tags steckt noch nicht, jedoch wird das Layout der Seite nicht zerschossen und die Tags können eben wie div Container verwendet werden.
Für Browser die die Tags unterstützen haben diese CSS Styles keinen Einfluss, da struktur-semantische Elemente sowieso block Elemente sind.
Internet Explorer unter der Version 8 brauchen zusätzlich noch ein wenig Javascript, um die Elemente zu erzeugen.
document.createElement('article');
Um nicht alles selbst von Hand einzugeben, sollte man Modernizr verwenden. Modernizr erzeugt automatisch sämtlich HTML5 Elemente, sodass diese auch in alten Internet Explorer Versionen zur Verfügung stehen.
Fazit
Die Vielzahl an neuen semantischen HTML Elementen, die HTML5 mitsich bringt ist nicht schlecht. Die Tags lassen sich in text-semantisch und struktur-semantisch kategorisieren und sind einfach zu verwenden und zu verstehen.
Der Browsersupport ist mittlerweile auch schon so weit vorangeschritten, dass man die neuen Tags problemlos verwenden kann. Für alle die auch ältere Browser unterstützen möchten, gibt es mit Modernizr ein Workaround.
Ansonsten die Frage an alle, gibt es schon jemand der voll auf diese neuen semantischen Tags setzt?
