SELFHTML Weblog - Ergänzung zur Dokumentation Übersicht

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