Begriff
HTML5
Warum wichtig?
Dieser Begriff ist ein Knoten im SengakujiWorks-Wissensnetz. Nutze Level 0 für die erste Einordnung, Level 1 für Praxis, Level 2 für technische Struktur und Level 3 für Grenzen, Fallstricke und Expertenkontext.
HTML ist das Skelett jeder Webseite.
HTML5 ist die aktuelle "Super-Version" davon (seit 2014).
Früher brauchte man für Videos den "Flash Player" (nervig, unsicher).
HTML5 kann Videos, Musik und Grafiken direkt abspielen (<video>).
Es machte das Web zur echten App-Plattform.
Google Docs, YouTube und Browser-Games sind erst dank HTML5 so gut möglich.
Merksatz: Die fünfte Version der Web-Sprache HTML, die Multimedia und interaktive Anwendungen direkt im Browser ermöglicht.
HTML5 brachte viele neue "Tags" mit Semantik:
- Früher:
<div id="header">(dumm). - HTML5:
<header>(schlau, Google versteht es besser). <nav>für Menüs.<article>für Blogposts.<footer>für unten.
Es brachte auch neue APIs für JavaScript:
- Geolocation: "Wo bin ich?" (für Maps).
- Local Storage: Daten im Browser speichern (Cookies sind out).
1. Canvas & WebGL
Mit dem <canvas>-Element hat HTML5 eine Leinwand eingeführt.
Darauf kann man mit JavaScript malen.
Mit WebGL sogar in 3D (Hardware-beschleunigt durch die Grafikkarte).
Damit laufen Spiele wie "Quake" flüssig im Browser.
2. Das Ende von Plugins
HTML5 hat Flash, Silverlight und Java-Applets getötet. Steve Jobs trieb das voran, indem er Flash auf dem iPhone verbat. Heute ist das Web "plugin-frei". Alles, was du siehst, ist HTML5, CSS und JS.
1. Canvas Contexts und Hardware Acceleration
Vor HTML5 war animiertes Rendering im Browser extrem CPU-lastig (DOM Node Manipulation in Loops erzwang katastrophale Reflows).
Das <canvas> Element bietet einen Low-Level-Bypass zur exakten Pixel-Rasterung im C++ GPU-Kernel.
Das Canvas gibt zwei primäre Context-Objekte frei: getContext('2d') (genutzt für PixieJS und einfache Game-Engines) und extrem komplexes WebGL (getContext('webgl')).
Hierbei bindet der JavaScript-Browser-Thread Shader-Variablen direkt auf OpenGL Bindings der Grafikkarte durch. Das rendert Tausende Vertices ohne den DOM-Reflow Parser der Browser-Engine auch nur ein einziges Mal zu wecken.
2. Service Workers (Die Pseudo-App)
HTML5 machte das Web offline-fähig für PWAs (Progressive Web Apps).
Dies löst der Service Worker API. Es ist ein völlig abgetrennter JavaScript Worker-Thread im Hintergrund (ohne Window- und DOM-Zugriff).
Er agiert als Web-Proxy. Wenn der HTML-Client offline geht und ein JS <img src="bild.jpg"> lädt, fängt der Service Worker (fetch event intercept) diese Anfrage auf Netzwerkschicht ab bevor der Router fehlschlägt, holt das Bild stillschweigend aus der Local Storage CacheAPI und liefert es an das HTML so zurück, als wäre der Router online.
3. Web Sockets vs Server-Sent Events
Klassisches HTTP (Request/Response) verhinderte Echzeit-Chats, da man (wie bei Ajax Long Polling) sekündlich das Backend nach Updates pollen musste (Overhead-Albtraum).
HTML5 öffnet bi-direktionale WebSockets ws:// (Stateful TCP-Voll-Duplex ab dem Handshake).
Alternativ liefert HTML5 die geniale EventSource API (Server-Sent Events / SSE). Diese nutzt rohes Standard-HTTP, aber der Server lässt die Leitung per Chunked Transfer dauer-offen im Halbschlaf fallen und pusht via data: {msg: 'hi'} JSON-Blobs Event-Richtung Browser. Weniger RAM-Verbrauch und perfekt für einfache One-Way Finanz-Ticker oder Live-Börsen-Graphen.
Quick-Check
Ist HTML5 eine Programmiersprache?
Nein, immer noch eine Auszeichnungssprache (Markup). Aber zusammen mit JavaScript (das in HTML5 mächtiger wurde) fühlt es sich so an.Funktioniert es in alten Browsern?
Nein. Der Internet Explorer 6 kann kein HTML5. Aber den nutzt zum Glück niemand mehr. Moderne Browser (Chrome, Firefox, Safari, Edge) sind "Evergreen" und können alles.Was kommt nach HTML5?
Eigentlich nichts. Der Standard heißt jetzt einfach "HTML Living Standard". Er wird ständig aktualisiert, ohne große Versionsnummern wie "HTML6".