HTML5

HTML5 ist die aktuellste Entwicklung des Web Standards, der HTML definiert. Der Begriff repräsentiert zwei verschiedene Konzepte:

Es ist eine neue Version der Sprache HTML, mit neuen Elementen, Attributen und Verhaltensweisen,
und eine größere Sammlung von Technologien, die vielfältigere und leistungsstärkere Webseiten und Anwendungen ermöglichen. Diese Kombination wird manchmal HTML5 & Freunde genannt und oft zu HTML5 abgekürzt.

Diese Referenzseite wurde entworfen, um für alle offenen Web-Entwickler nutzbar zu sein und verknüpft zahlreiche Ressourcen über HTML5 Technologien, gruppiert in mehreren Kategorien, basierend auf ihrer Funktion.

Semantik: Erlaubt präziser zu beschreiben, was der Inhalt ist.
Konnektivität: Ermöglicht neue und innovative Wege, mit dem Server zu kommunizieren.
Offline & Speicherung: Erlaubt Webseiten, Daten lokal auf der Client-Seite zu speichern und effizienter offline zu arbeiten.
Multimedia: Macht Video und Audio zu Erste-Klasse-Bürgern des offenen Webs.
2D/3D Graphiken & Effekte: Erlaubt eine deutlich vielschichtigere Menge an Präsentationsmöglichkeiten.
Leistung & Integration: Bietet größere Geschwindigkeitsoptimierungen und besserer Zugriff auf Computer-Hardware.
Gerätezugriff: Erlaubt die Benutzung verschiedenster Eingabe- und Ausgabegeräte.
Styling: Lässt Autoren anspruchsvollere Designs schreiben.

SemantiK

Gliederungen und Abschnitte in HTML5: Ein Blick auf die neuen Gliederungs- und Abschnitts-Elemente in HTML5: <section>, <article>, <nav>, <header>, <footer>, <aside> und <hgroup>.
HTML5 Audio und Video benutzen: Das <audio> und das <video> Element binden neue Multimedia-Inhalte ein und erlauben, sie zu manipulieren.
Formulare in HTML5: Ein Blick auf Verbesserungen bei Formularen in HTML5: die constraint validation API (Überprüfung von Wertbeschränkungen), mehrere neue Attribute, neue Werte für das <input> Attribut type und das neue <output> Element.
Neue semantische Elemente: Außer Sektions-, Medien- und Formular-Elementen erhöhen eine Vielzahl neuer Elemente, wie <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress> oder <meter>, die Menge gültiger HTML5 Elemente.
Verbesserung bei <iframe>: Mithilfe der sandbox, seamless und srcdoc Attribute können Autoren jetzt das Sicherheitslevel und das gewünschte Rendering von <iframe> Elementen angeben.
MathML: Erlaubt das direkte Einbinden mathematischer Formeln.
Einführung in HTML5: Dieser Artikel führt in die Benutzung von HTML5 für Ihr Web-Design oder Ihre Web-Anwendung ein.
HTML5-konformer Parser: Der Parser, der aus den Bytes eines HTML-Dokumentes ein DOM erzeugt, wurde erweitert und definiert jetzt präzise das Verhalten in allen Fällen, selbst für ungültiges HTML. Das führt zu viel größerer Vorhersehbarkeit und Zusammenarbeit zwischen HTML5-konformen Browsern.

Konnektivität

Web Sockets: Erlaubt eine permanente Verbindung zwischen der Seite und dem Server zu erzeugen und nicht-HTML-Daten hierüber auszutauschen.
Server-gesendete Ereignisse: Erlaubt dem Server, Ereignisse direkt an den Client zu senden, anstatt wie beim klassischen Modell Daten nur als Antwort auf eine Anfrage des Clients senden zu können.
WebRTC: Diese Technologie, wobei RTC für Real-Time Communication (Echtzeit-Kommunikation) steht, erlaubt sich mit anderen zu verbinden und Videokonferenzen direkt aus dem Browser zu steuern, ohne dafür ein Plugin oder externes Programm zu brauchen.

Offline & Speicherung

Offline-Ressourcen: der Anwendungs-Cache: Firefox unterstützt vollständig die HTML5 offline resource Spezifikation. Die meisten anderen bieten variierende Unterstützung für Offline-Ressourcen.
Online- und Offline-Ereignisse: Firefox 3 unterstützt die WHATWG Online- und Offline-Ereignisse, die Anwendungen und Erweiterungen erkennen lassen, ob oder ob es keine aktive Internetverbindung gibt, sowie ob eine Verbindung auf- oder abgebaut wird.
WHATWG Client-seitiger Sitzungs- und persistenter Speicher (auch bekannt als DOM Storage): Client-seitiger Sitzungs- und persistenter Speicher erlaubt Webanwendungen, strukturierte Daten auf der Anwenderseite zu speichern.
IndexedDB: Ist ein Web-Standard zum Speichern von großen Mengen strukturierter Daten im Browser und für das hochperformante Suchen dieser Daten mittels Indizes.
Dateien aus Webanwendungen benutzen: Unterstützung für die neue HTML5 Datei-API wurde zu Gecko hinzugefügt, wodurch Web-Anwendungen der Zugriff auf vom Benutzer gewählte lokale Dateien ermöglicht wird. Das schließt die Unterstützung für das Auswählen mehrerer Dateien über das neue multiple Attribut von <input> Elementen des Typs file ein. Außerdem gibt es FileReader.

Multimedia

HTML5 Audio und Video benutzen: Das <audio> und das <video> Element binden neue Multimedia-Inhalte ein und erlauben, sie zu manipulieren.
WebRTC: Diese Technologie, wobei RTC für Real-Time Communication (Echtzeit-Kommunikation) steht, erlaubt sich mit anderen zu verbinden und Videokonferenzen direkt aus dem Browser zu steuern, ohne dafür ein Plugin oder externes Programm zu brauchen.
Die Camera API benutzen: Erlaubt das Benutzen, Manipulieren und Speichern von Bildern der Computer-Kamera.
Untertitel und WebVTT: Das <track> Element erlaubt Untertitel und Kapitel. WebVTT ist ein Texttitel-Format.

3D, graphiKEN & effeKtE

Canvas-Tutorial: Lerne mehr über das neue <canvas> Element und wie darauf Diagramme und andere Objekte in Firefox gezeichnet werden können.
HTML5 Text-API für <canvas> Elemente: Die HTML5 Text-API wird jetzt von <canvas> Elementen unterstützt.
WebGL: WebGL bringt 3D-Graphiken durch die Einführung einer auf OpenGL ES 2.0 basierten API in's Web, die in HTML5 <canvas> Elementen genutzt werden kann.
SVG: Ein XML-basiertes Format von Vektor-Bildern, die direkt in HTML eingebettet werden können.

Leistung & integration

Web Worker: Erlaubt die Ausführung von JavaScript an Hintergrund-Threads zu delegieren, so dass diese Aktivitäten interaktive Ereignisse nicht verlangsamen.
XMLHttpRequest Level 2: Erlaubt einige Teile der Seite asynchron zu laden, so dass dynamische Inhalte je nach Zeit und Verhalten des Benutzers gezeigt werden können. Das ist die Technologie hinter Ajax.
JIT-kompilierende JavaScript-Engines: Die neue Generation der JavaScript-Engines sind wesentlich performanter, was zu deutlich höherer Leistung führt.
History API: Erlaubt die Manipulation der Browser-Historie. Das ist besonders hilfreich für Seiten, die interaktiv neue Informationen laden.
Das contentEditable Attribut: verwandeln Sie Ihre Webseite in ein Wiki!: In HTML5 wurde das contentEditable Attribut standardiziert. Lernen Sie mehr über dieses Feature.
Drag und Drop: Die HTML5 Drag und Drop API erlaubt Unterstützung für das Ziehen und Fallenlassen von Objekte innerhalb und zwischen Webseiten. Außerdem gibt es eine einfachere API für die Benutzung in Erweiterungen und Mozilla-basierten Anwendungen.
Fokus-Kontrolle in HTML: Die neuen HTML5 activeElement und hasFocus Attribute werden unterstützt.
Web-basierte Protokoll-Handler: Sie können jetzt Webanwendungen als Protokoll-Handler mit der navigator.registerProtocolHandler() Methode registrieren.
requestAnimationFrame: Erlaubt das Rendern von Animationen für optimale Leistung zu kontrollieren.
Vollbild-API: Kontrolliert die Benutzung des ganzen Bildschirms für eine Webseite oder -anwendung, ohne die Browserelemente anzuzeigen.
Pointer Lock API: Erlaubt, den Zeiger auf den Bereich des Inhalts zu begrenzen, so dass Spiele und ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.
Online- und Offline-Ereignisse: Um eine gute offline-fähige Webanwendung zu entwickeln, müssen Sie wissen, wann Ihre Anwendung tatsächlich offline ist. Nebenbei sollten Sie auch wissen, wann Ihre Anwendung wieder online ist.

Gerätezugriff

Die Kamera-API benutzen: Erlaubt das Benutzen, Manipulieren und Speichern von Bildern der Computer-Kamera.
Touch-Ereignisse: Verarbeitung von Ereignissen, die durch Tippen auf Touchscreens ausgelöst werden.
Geolocation benutzen: Lässt Browser die Position des Benutzers mittels geolocation herausfinden.
Geräte-Orientierung ermitteln: Ermöglicht herauszufinden, wenn das Gerät des Browsers die Orientierung wechselt. Das kann als Eingabegerät genutzt werden (z.B. um Spiele zu entwickeln, die auf die Orientierung des Gerätes reagieren) oder um das Layout einer Seite der Orientierung des Bildschirms anzupassen (hochkant oder Querformat).
Pointer Lock API: Erlaubt, den Zeiger auf den Bereich des Inhalts zu begrenzen, so dass Spiele und ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.

Styling

CSS wurde erweitert, um das Dekorieren von Elementen auf viel komplexere Weisen zu ermöglichen. Das wird oft als CSS3 bezeichnet, obwohl CSS keine monolithische Spezifikation mehr ist und die unterschiedlichen Module nicht alle auf Level 3 sind: einige sind auf Level 1 und andere auf Level 4, und alle dazwischen liegenden Level sind vertreten.

Neue Funktionen für Hintergründe: Es ist jetzt möglich, Boxen über box-shadow einen Schatten zu geben und mehrere Hintergründe zu setzen.
Ausgefallenere Ränder: Jetzt ist es nicht nur möglich, Ränder mit Bildern über border-image und zugehörige ausgeschriebene Eigenschaften zu dekorieren, sondern auch runde Ränder werden über die border-radius Eigenschaft unterstützt.
Stile animierbar machen: Mit CSS Übergängen, um zwischen unterschiedlichen Zuständen zu animieren, oder CSS Animationen, um Teile der Seite ohne auslösendes Ereignis zu animieren, können Sie jetzt mobile Elemente Ihrer Seite kontrollieren.
Typographie-Verbesserungen: Autoren haben mehr Kontrolle, um eine bessere Typographie zu erreichen. Sie können Textüberlauf mit text-overflow und Silbentrennung kontrollieren, aber sie können auch Schatten zuweisen und noch präziser seine Dekorationen kontrollieren. Benutzerdefinierte Schriftarten können durch die neue @font-face at-Regel heruntergeladen und angewendet werden.
Neue Präsentations-Layouts: Um die Flexibilität von Designs zu verbessern, wurden zwei neue Layouts hinzugefügt: das CSS Mehr-Spalten-Layout und das CSS Flexible-Box-Layout.