HTML 5 bietet einige neue Elemente, mit denen es möglich ist, Semantik in ein HTML-Dokument einzubauen. Dadurch soll es möglich werden, dass Suchmaschinen und andere Internet-Dienste den Inhalt von Webseiten verstehen. Das fängt bei der Strukturierung an, also dort, wo sich die Navigationsleiste, Kopfzeile und der eigentliche Inhalt befinden. Das Ganze geht bis zum Definieren von Relationen/Beziehungen zwischen Webseiten-Inhalten.
Die Struktur
Aktuell wird die Struktur der meisten Webseiten mithilfe folgender Tags umgesetzt:
<div id="header">...</div> <div id="navigation">...</div> <div id="main">...</div>
Zwar sind die gewählten IDs sehr sprechend und jeder kann sich darunter etwas vorstellen; es ist aber nicht festgelegt, dass id=“navigation“ auch die wirkliche Navigation auf einer Website meint. Mit HTML 5 wurden dafür extra Elemente eingeführt: header, footer, nav, aside.
Dadurch ist es nicht mehr nötig, eigene IDs zu „erfinden“. Eine Webseiten-Struktur mit diesen Tags sieht dann wie folgt aus:
<header><h1>Titel</h1></header> <nav>...</nav> <aside>...</aside> <footer>...</footer>
Mit aside wird die rechte seitliche Seite gemeint, die Standard vieler Blogs ist.
Zusätzlich ist es möglich, den Inhalt mit folgenden Elementen zu strukturieren: article und section. Ein article ist ein Text, der komplett allein stehen kann (wie zum Beispiel dieser Blog-Eintrag). Eine section ist lediglich zusammenhängender Text.
Daten
Was bedeutet 23.4.1988? Ist das ein Code oder ein Datum? Um so etwas (und einiges anderes) genau festlegen zu können, gibt es besondere HTML-Elemente. Diese werden hier tabellarisch vorgestellt:
| HTML-Element | Beschreibung | Beispiel |
|---|---|---|
| progress | Fortschritt | Projektfortschritt: |
| meter | Zahlen (mit min und max) | <meter value="10" min="0" max="20"> |
| figure und figcaption | Illustrationen Beschriftungen von Illustrationen | <figure> |
| time | Datum und Uhrzeit ISO-Format verwenden | <time datetime="2012-05-24"> |
Neben diesen Elementen ist auch <strong> sehr interessant. Es formatiert einen Text genauso wie das alte <b>, hat aber zusätzlich die Bedeutung: „wichtiger Text“.
Quellen und weitere Informationen
· http://staticfloat.com/2011/11/21/neue-html5-tags-und-elemente-mit-semantik/
· http://www.w3schools.com/html5/html5_new_elements.asp