HTML 5
HTML 5 ist die aktuelle, umfassend überarbeitete Version der HyperText Markup Language und definiert den strukturellen Kern moderner Web‑Seiten. Im Vergleich zu früheren Versionen legt HTML 5 den Schwerpunkt auf semantische Auszeichnung, native Multimedia‑Integration, erweiterte Formularelemente und eine bessere Grundlage für interaktive Anwendungen ohne zwingende Plugins. Der Standard wird vom World Wide Web Consortium (W3C) und der Web‑Hypertext‑Application‑Technology‑Working‑Group (WHATWG) gepflegt und ist seit 2014 offiziell als Recommendation veröffentlicht.
Struktur & Grundprinzipien
Ein HTML 5‑Dokument beginnt mit einer vereinfachten Doctype‑Deklaration <!DOCTYPE html>, gefolgt vom Wurzel‑Element <html> und den Bereichen <head> (Metadaten, Titel, Verknüpfungen zu CSS‑ und JavaScript‑Dateien) sowie <body> (sichtbarer Inhalt). Die neue Semantik ersetzt generische Container (<div>) durch bedeutungsvolle Elemente, die sowohl für Entwickler als auch für Suchmaschinen und Hilfstechnologien klare Vorgaben liefern.
Schlüssel‑Semantische Elemente
<header>– Kopfbereich einer Seite oder eines Abschnitts, typischerweise mit Logo, Titel und Navigations‑Links.<nav>– Navigationsmenü, das interne oder externe Links gruppiert.<section>– thematisch abgegrenzter Abschnitt, der eigenständige Überschriften besitzen kann.<article>– eigenständiger, wiederverwendbarer Inhalt wie Blog‑Posts, Nachrichten oder Forum‑Beiträge.<aside>– ergänzende, oft seitliche Information, beispielsweise Werbung oder verwandte Links.<footer>– Fußbereich mit Impressum, Copyright‑Hinweisen oder Kontaktinformationen.
Durch diese Aufteilung entsteht eine klare inhaltliche Hierarchie, die von Suchmaschinen (SEO) und Screen‑Readern für Barrierefreiheit (WCAG‑Konformität) leicht interpretiert werden kann.
Native Multimedia‑ und Grafik‑Features
HTML 5 führt die Tags <video> und <audio> ein, die das Einbetten von Medien ohne externe Plugins wie Flash ermöglichen. Sie unterstützen mehrere Dateiformate, ermöglichen das Anbieten von Untertiteln (<track>) und erlauben die Steuerung von Wiedergabe, Lautstärke und Vollbild über eingebaute Attribute oder JavaScript‑APIs.
Das <canvas>‑Element stellt eine bitmap‑basierte Zeichenfläche bereit, die über das 2‑D‑Kontext‑API (oder WebGL für 3‑D‑Grafik) von JavaScript dynamisch manipuliert werden kann – ideal für Diagramme, Spiele und interaktive Visualisierungen.
Erweiterte Formularelemente
HTML 5 ergänzt das klassische <input>‑Element um spezialisierte Typen wie email, url, tel, date, time, range, color und search. Diese Typen aktivieren in modernen Browsern native Validierung, passende Tastaturen auf mobilen Geräten und optimierte UI‑Elemente (z. B. Kalender‑Picker).
Weitere Formulare‑Features sind das <datalist>‑Element (Vorschlagsliste), das <output>‑Tag (Anzeige von Berechnungsergebnissen) und das placeholder‑Attribut, das Hinweise im Eingabefeld anzeigt.
APIs & Erweiterungen
HTML 5 definiert eine Reihe von JavaScript‑basierten Schnittstellen, die das Web‑Ökosystem um funktionale Fähigkeiten erweitern:
- Geolocation API: Zugriff auf Standortdaten des Geräts (mit Nutzer‑Einwilligung).
- Web Storage (localStorage & sessionStorage): Schlüssel‑Wert‑Speicher, der größer ist als klassische Cookies und keine Daten an den Server sendet.
- Web Workers: Hintergrundthreads für rechenintensive Aufgaben, die die UI‑Responsivität erhalten.
- File API: Direkter Zugriff auf Dateien, die vom Nutzer über ein
<input type="file">ausgewählt wurden, ohne sie sofort hochzuladen. - Drag‑and‑Drop: Benutzer können Elemente per Maus ziehen und ablegen, wobei Daten über das
DataTransfer‑Objekt übertragen werden. - History API: Manipulation des Browser‑Verlaufs, ohne die Seite neu zu laden – Grundlage für Single‑Page‑Applications (SPA).
Responsives Design & Viewport
HTML 5 unterstützt responsives Design über das <meta name="viewport">‑Tag, das den Skalierungs‑ und Breitenfaktor für mobile Geräte definiert. Kombiniert mit CSS‑Media‑Queries lässt sich so ein Layout erzeugen, das sich flexibel an verschiedene Bildschirmgrößen anpasst.
Barrierefreiheit & ARIA
Obwohl HTML 5 bereits viele semantische Elemente bereitstellt, können ARIA‑Attribute (role, aria‑label, aria‑expanded usw.) verwendet werden, um zusätzliche Informationen für assistive Technologien zu liefern, wenn native Elemente nicht ausreichen.
Kompatibilität & Fallbacks
Moderne Browser unterstützen die meisten HTML 5‑Features nativ. Für ältere Browser können Polyfills (z. B. HTML5‑Shim) eingesetzt werden, die fehlende APIs nachahmen. Durch die progressive Verbesserung wird sichergestellt, dass Grundfunktionen (Text, Links, Bilder) stets verfügbar bleiben, selbst wenn erweiterte Features nicht unterstützt werden.
