Andreas Zenkel: HTML5-Serie: Der Weg zu HTML5

HTML – Eine kurze Einführung

Mittlerweile mehr als 20 Jahre ist es her, dass die Hyper Text Markup Language zur Standard-Sprache des World Wide Web auserkoren wurde. Damit war in Grundzügen auch das Internet geboren, wie wir es heute kennen. Das W3C-Konsortium, ein Gremium zur Standardisierung des Internets, legte HTML im Jahr 1990 als Standard für das Netz fest. Sprachen und ihre Wörter haben bekanntlich ihre Bedeutungen und so war und ist es natürlich auch mit HTML. Nicht nur hier nennt man das Ganze Semantik. Dabei besitzt und verfolgt jedes einzelne Element innerhalb HTML einen ganz speziellen Zweck.

Zu Beginn war das Internet und seine Auszeichnungssprache komplett semantisch, d.h. alle genutzten Elemente haben einen bestimmten, festgelegten Sinn in der Struktur eines HTML-Dokumentes. Mit den Anforderungen des Webs, durch neue Browser und neue Technologien, kamen jedoch im Laufe der Jahre immer mehr neue Elemente hinzu, die keinen semantischen Zweck mehr erfüllten, sondern einzig und allein dem Design dienten. Das Web und seine Auszeichnungssprache wurden immer unsemantischer. Das hing vor allem von den Webdesignern ab, denen es beim Erstellen einer Webseite weniger um die semantische Korrektheit, als vielmehr um ein ansprechendes und korrektes Design ging. So kam es, dass das sogenannte Tabellendesign lange Zeit als Standard für viele Internetseiten galt. Eine Tabelle, deren eigentliche Aufgabe es ist, Daten und Inhalte tabellarisch darzustellen, verkam also zu einem reinen Designelement. Hinzu kamen viele weitere Elemente, die auch nur einen einzigen Zweck hatten: Sie sollten die Designmöglichkeiten der Gestalter erweitern.

HTML5 – Die Semantik kehrt zurück

Schon 1999 versuchte das W3C-Konsortium der zunehmend schwindenden Semantik entgegenzuwirken und etablierte mit HTML 4 in der Strict-Variante einen neuen Web-Standard, bei dem es vor allem darum ging, Design und Inhalt konsequent von einander zu trennen. Genutzt wurde dieser Standard von fortschrittlichen Designern. Die große Masse setzte jedoch weiterhin auf Tabellendesigns oder später dann auf div-Elemente, die man ineinander verschachtelte.

2008 folgte dann der erste Schritt zum großen Wandel: HTML5 wurde angekündigt. Bei der Erschaffung von HTML5 achtete man zusehends darauf, dass die Semantik wieder zurückkehrt.

Vor allem mit dem Zuwachs vieler neuer Endgeräte wurde es immer wichtiger, dass all diese Geräte eine gemeinsame Sprache sprechen. Somit gewann der korrekte Einsatz der verschiedenen HTML-Elemente wieder deutlich an Gewicht. Eine Überschrift, ein kursiv geschriebener Text, eine Liste – all dies hilft uns Menschen beim sinnvollen Erfassen eines Textes. Wir erkennen daran die Wichtigkeit verschiedener Textbereiche und natürlich auch die Struktur eines Textes.
Gleiches gilt auch für die verschiedenen Browser und Programme, mit denen man heute im Internet unterwegs ist. So ist auch Google im Grunde nur ein Programm bzw. ein Algorithmus, das versucht Webseiten und ihre Struktur zu erfassen. Schon anhand dieses Beispiels lässt sich erkennen, wie wichtig die semantisch korrekte Nutzung der verschiedenen Elemente ist. Suchmaschinen erkennen zum Beispiel, dass eine Überschrift wichtig ist oder dass diese den darauf folgenden Text im besten Falle beschreibt. Ein Grund dafür, warum besonders die Überschrift immer mehr an Bedeutung gewinnt.

Mit HTML5 wird nun genau dieses Konzept in die richtigen Bahnen gelenkt. Für viele Fälle sind nun neue Elemente hinzugekommen, die nicht ausschließlich dem Design dienlich sind, sondern die vor allem Inhalte korrekt beschreiben sollen.

HTML5 – Semantik in der Praxis

Der sogenannte Layer, auch bekannt als div-Element, war zuletzt ein Standard für das Erstellen von Internetseiten. HTML-Seiten bestanden aus einem Gerüst vieler, verschachtelter Container. Ihre Bedeutung im HTML-Quelltext konnte man oft nur erahnen. Wer sauber arbeitete, vergab IDs und Klassen, an denen sich die Bedeutung des jeweiligen Containers erkennen ließ. Ein div-Element an sich hat jedoch keinerlei semantische Bedeutung.

Mit den neuen Elementen in HTML5 hat sich nun jedoch vieles geändert: Heute gibt es für nahezu jede „Lebens- oder Designlage“ ein entsprechendes Element, das semantisch perfekt eingesetzt werden kann. Ein gutes Beispiel ist das neue Footer-Element: Nahezu 80% aller Webseiten benutzen einen Footer – eine Leiste, die am unteren Ende der Seite sitzt und oftmals Copyright-Informationen oder Links enthält. Wurde dies früher mit einem div-Element gelöst, hat man als Webdesigner mit HTML5 nun die Möglichkeit das entsprechende Element einzubauen und auch zu gestalten und somit bereits durch die Elementbezeichnung mitzuteilen, dass es sich eben um den Footer des Dokuments handelt.

Dadurch können nun alle Endgeräte die Seite deutlich besser und vor allem strukturiert erfassen. Auch im Zuge des barrierefreien Webdesigns ist dies nun, dank HTML5, ein riesiger Gewinn. Text-Browser oder auch Geräte, die einem blinden Menschen eine Internetseite vorlesen, können das Dokument nun viel schneller und gezielter aufbereiten.

Trennung von Design und Inhalt

Einer der wichtigsten Punkte im neuen HTML5 ist die konsequente Trennung von Design und Inhalt. Wie eingangs bereits erwähnt, fanden im Laufe der Jahre viele neue Elemente oder Beschreibungen ihren Weg in die Sprache HTML. Sie dienten dazu, die Gestaltung möglich zu machen. Dies hatte jedoch zur Folge, dass der eigentliche bzw. ursprüngliche „semantische Quelltext“ zu einer undurchsichtigen Suppe wurde. Zu einer der schlimmsten „Verunreinigungen“ zählte z.B. die Einführung der Font-Elemente, die dazu ausschließlich dazu dienten, einen Text gestalterisch, also hinsichtlich Schriftart, -farbe und -größe, zu beschreiben.

Diese sind nun auch in HTML 4 „deprecated“, sie sind missbilligt und kommen im neuen HTML5-Standard nicht mehr vor. Durch den Einsatz von Cascading Stylesheets (CSS) werden nun alle Elemente sauber formatiert. Man wird eine Beschreibung der Schrift nicht mehr im Quelltext, dem sogenannten Markup, finden, sondern in einem eigenen Dokument, das strikt vom Inhalt getrennt ist. Besonders dieser Veränderung ist es zu verdanken, dass nun mit vielen Endgeräten eine Webseite schneller und auch sauberer erfasst werden kann.

Die strikte Trennung von Design und Inhalt, sowie die Einführung vieler neuer Elemente, die eine korrekte, strukturelle Bedeutung haben, machen den Einsatz von HTML5 zu einem absoluten Muss für alle Webdesigner.

Nachdem wir Ihnen an dieser Stelle nun eine Einführung in das Thema gegeben haben, wollen wir in den nächsten Teilen dieser Serie einige der wichtigsten neuen Elemente vorstellen.

Lesen Sie weiter

Teil 2: Neue Elemente für die Seitenstruktur

  1. Vielen Dank für diesen Artikel. Ich hatte neulich auch was dazu gelesen, dass Semantik besonders wichtig für Blinde ist: http://www.oliveira-online.net/wordpress/index.php/2013/02/10/was-bedeutet-intuitive-bedienung-fur-blinde/ Schönen Tag noch
  2. Auch die Sehenden haben Vorteile, wenn ein Text semantisch gut ausgezeichnet ist. Denn dann können ihn nicht nur Screenreader sondern auch andere Maschinen besser erfassen und für spezielle Nutzeranforderungen aufbereiten.
  3. Ein großes Problem mit diesen Elementen (, etc.) ist das sie von alten Browsern (z. B. IE 8) nicht unterstützt werden. Deswegen wird es leider noch lange dauern bis man diese Elemente einsetzten kann, denn es ist wichtig, dass alle Browser die Website korrekt darstellen können. Oder gibt es eine gute Möglichkeit dies zu umgehen? Sozusagen das <nav> durch <div class="nav"> ersetzt wird wenn der Browser dies nicht unterstützt. Gruß JavaMaster
  4. Es gibt ein nettes JavaScript, welches die fehlenden Elemente nachrüstet: html5shiv So sind nur noch wenige Nutzer betroffen, nämlich die, die mit veralteten Browsern ohne JavaScript unterwegs sind. Und auch bei denen gehen die Inhalte in aller Regel nicht verloren, lediglich die Darstellung ist nicht wunschgemäß. Siehe etwa http://www.peterkroener.de/html5-was-geht-heute-schon-was-geht-nicht-der-grosse-ueberblick/.
  5. Unter dem Buzzword "semantisches Markup" versteht man eigentlich etwas Selbstverständliches: Dass man konsequent die HTML-Elemente nutzt, die die Struktur des Dokuments am besten wiedergeben. Also beispielsweise h1, h2, h3,... für Überschriften; ul/ol für Listen oder listenähnliche Aufzählungen; fieldset zum Gruppieren von Formularelementen; eine Tabelle dann, wenn wirklich Tabellendaten wiedergegeben werden sollen. Das Ergebnis ist, dass man auch schon anhand des ungestylten HTML-Codes die Dokumentstruktur erkennen kann. Gegenbeispiele, also nicht semantisches Markup, sind etwa die Verwendung von Tabellen als Layoutmittel oder die übermäßige Verwendung von speziell gestylten div-Elementen, wo andere Elemente die Bedeutung besser treffen. Manche Webautoren scheinen zu glauben, dass man unbedingt div-Container bräuchte, um mit CSS darauf einzuwirken. Nein, das ist ganz sicher nicht so! Mit CSS kann man jedes Element formatieren (mit kleinen Einschränkungen bei Elementen, die eine bestimmte Funktion haben). Das div-Element ist eigentlich nur zum Gruppieren gedacht, also um mehrere Elemente zu einem Block zusammenzufassen (ein div mit nur einem Kindelement ist daher seltenst sinnvoll). Wenn man den Begriff etwas weiter fassen mag, versteht man unter semantischem Markup oft auch noch die saubere Trennung von Inhalt und Gestaltung, soll heißen: Der HTML-Quellcode enthält im Idealfall weder Hinweise auf das gewünschte Aussehen, noch wird er von darstellungsbezogenen Absichten beeinflusst sein. Als oft gesehenes schlechtes Beispiel mag die Verwendung eines h3- oder h4-Elements gelten, nur "weil die Schriftgröße dann so ist, wie ich sie haben will", und nicht, weil der damit markierte Text eine Überschrift dritter oder vierter Ordnung ist.
  6. Es tut mir leid, ob eine Seite "semantisch" korrekt ist, interessiert meine Kunden überhaupt nicht und darum ist es auch für mich praktisch bedeutungslos. Das gilt nicht nur für meine Kunden, sondern für sämtliche Kunden weltweit, also eigentlich die ganze Welt. Da verwundert es niemand, dass sich die wenigsten Entwickler sich um korrekte Semantik kümmern.
  7. Sicher schaut k(aum )ein Kunde/Besucher in den Quelltext einer Seite. Und für das 08/15-Anschauen reicht sicher auch div-Suppe. Aber indirekt kommt ihnen die Semantik zugute, weil der Code damit besser maschinenlesbar wird. Suchmaschinen können zum Beispiel besser zwischen Haupt- und Nebenbereichen unterscheiden. nav und aside sind für den Inhalt weniger wichtig als main oder article. Semantik hat somit Auswirkungen auf die Ergebnisqualität von Suchmaschinen und damit auch auf das Frustlevel der Besucher.
  8. Spätestens wenn die Konkurenz-Webseite bei Google an einem vorbeirauscht (weil Google durch das Dino-Update 2014 eben doch auf die Semantik schaut), wird man einen SEO-Spezialisten ins Boot holen. Der wird sich dann unter anderem den Quelltext angucken. Dann kann es passieren, dass das eigene Image bzw. der eigene Ruf leidet. Wenn man footer oder header als HTML-Elemente benutzt, dann spart man sich zudem die Klassen, da man beim stylen einfach auf die Elemente gehen kann => sauberer CSS Code, leichter wartbar. Ich sehe nur Vorteile! Achja übrigens, suba geschrieben!