HTML5 Semantik

Das HTML5 Logo vom W3C.

Vor fünf Jahren erhielt ich meine erste Webdesign Stunde und ich war gespannt darauf, wie man mit Quellcode eine Seite gestalten kann. Die ersten Übungen sind mir auch noch gut im Gedächtnis geblieben. Im Unterricht erfuhren wir quasi die gesamte Entwicklung des HTML, sowie CSS in chronologischer Reihenfolge. Dabei wurde es immer deutlicher, dass man am Anfang die drei wichtigsten Bereiche in einem Dokument zusammengeführt hat: Design, Inhalt und Verwaltung. Mit der Trennung erschließen sich mehr Möglichkeiten und ein „logischeres“ Web.

Das Ende der Div-Suppen

Sagen wir einfach mal so, wie es ist oder besser gesagt war: ein ziemliches Wirr Warr. Jedes Element, oder auch Tag genannt hat eine Bedeutung und weißt unterschiedliche Funktionen auf. Diese konnte jeder so zusammenwürfeln, wie er gerade lustig war und erhielt eine Seite. Nachdem die Tabellen-Layouts durch Divs und CSS abgelöst wurden ging das Gestalten los. Das Div eignet sich hervorragend für die Gestaltung einer Seite, da es an sich nichts macht und wie ein leerer Container anzusehen ist, den man mit CSS nun frei gestalten kann. Durch die ganzen Verschachtelungen sind dann auch schonmal mehrere Divs ineinander verschachtelt worden, obwohl eventuell nur das Letzte Inhalt aufwies. Diese Definitionen werden korrekt von den Browsern gerendert und ergeben ein mehr, oder weniger schönes Design. Der Betrachter dieser Seite kann anhand der Optik die einzelnen Inhalte erfassen und semantisch sortieren. So erkennt dieser welcher Text nun wirklich relevant ist, oder welche Sidebar wichtige Links beinhaltet. Aus der Sicht einer Maschine sieht dies schon etwas anders aus. Diese erkennt nur den reinen Text, ohne semantische Bedeutungen erkennen zu können. Ein Screenreader würde nun die ganze Suppe von Anfang an vorlesen, ohne den wirklich interessanten Content zu erkennen und direkt wiederzugeben.

Oder alleine in den Suchmaschinen. Wir erwarten auch wirklich das zu finden, was wir suchen. Doch wie können wir das, wenn die Maschine die Inhalte crawlt nicht semantisch sortieren kann?
Und das ist die eigentliche Webseite - der Quelltext Eine Webseite wie man sie sieht: schön gestaltet und strukturiert

Die Lösung ist neuer Standard: HTML5. Mit HTML5 soll das Web einfacher, logischer und unabhängiger werden. Hierbei wurden einige neue Tags entwickelt, alte für „veraltet“ erklärt und mittlerweile können alle Browser es korrekt darstellen.

Die neue HTML5 Struktur

Hier sieht man den Aufbau einer Webseite mit den neuen HTML5 Elementen Header, Section, Article, Aside und Footer Hier sieht man einen grafisch dargestellten Aufbau einer Webseite, die mit HTML5 geschrieben wurde. Oben sieht man den <header>, in welchem allgemeine typische Kopfdaten eines Dokumentes drin stehen. Hier befindet sich meistens der Seitentitel und das Thema der Seite in einer Subheadline. Damit dies umgesetzt werden kann, benutzt man in der Regel eine <hgroup> – doch dazu später mehr.

Im <nav>-Element befindet sich die Navigation. Hierbei ist zu beachten, dass es sich nicht um irgendeine beliebige Linkansammlung handelt, sondern um die tatsächliche Hauptnavigation.

Mit dem HTML5 Element <section> lassen sich zusammenhängende Bereiche definieren. In diesem Beispiel beinhaltet die Section die Tags <article>. Diese <article> sind semantisch, in sich geschlossene Inhalte, wie man sie auf einem Blog finden würde. Diese Inhalte werden unabhängig von anderen Inhalten gewertet und inhaltlich betrachtet. Da <article> in sich geschlossene Inhalte beinhalten, also auch einen eigenen Titel haben, taucht auch wieder hier das Element <header> auf, in welchem die Überschrift von dem jeweiligen Beitrag steht. Unter anderem kann man hier die Kategorie, den Autor, oder auch das Veröffentlichungsdatum platzieren.

Das <aside> Element ist die typische Sidebar. Hier findet man Zusatzinformationen, oder Links zu dem jeweiligen Artikel, oder von der Seite allgemein. <aside> wird als weniger wichtig bewertet, als eine <section>.

Der Footer der meistens nur reine Linksammlungen für Partner, oder weitere Artikel beinhaltet erhält durch <footer> auch seinen ganz eigenen Tag. Diese Links sind meistens nicht so wichtig und werden deshalb durch Suchmaschinen weniger gewertet.

Vorteile von HTML5

Wie man deutlich erkennt, lässt sich eine Internetseite nun durch die neuen Elemente logisch & semantisch korrekt aufbauen, sodass die Inhalte von Menschen, sowie von Maschinen richtig ausgewertet werden können. Dies ist ein riesen Vorteil, damit Screenreader die richtigen und wirklich interessanten Bereiche einer sehr komplexen Webseite vorlesen und es dadurch barrierefreier wird. Außerdem erhalten die Benutzer einer Suchmaschine themenrelevantere Ergebnisse, wenn nun jeder sich an diesen Standard hält, da die Inhalte einer Seite korrekt, sowie semantisch besser ausgewertet werden können.


Natürlich bringt HTML5 auch noch viele weitere Features, wie zum Beispiel die Einbindung von Videos, oder Musik ohne vorher ein Plugin installieren zu müssen. Dies habe ich auch schon ausprobiert und man kann das Ergebnis auf diesem Beitrag betrachten: →3D Metaball

Eine gute Auflistung einiger neuer HTML5 Elemente findet sich hier: →W3schools – HTML5 Elemente

Ersten Kommentar schreiben

Antworten

Deine E-Mail-Adresse wird nicht veröffentlicht.


*


Time limit is exhausted. Please reload CAPTCHA.