So funktioniert HTML5

# Warum HTML5 alles für Webentwickler verändert hatTim Berners-Lee hatte es sich nicht zum Ziel gesetzt, das moderne Web aufzubauen. Er entwickelte 1989 die Hypertext Markup Language (HTML) als kinderleichte Methode zur Kodierung elektronischer Dokumente. Die ersten Browser waren nur Lesegeräte für dieses Zeug. Zwanzig Jahre später ist dieser Browser heute ein Portal zu einem ganzen Medienuniversum. Dieser Wandel ist der Grund, warum HTML5 nicht nur ein weiterer Versionsschub ist. Es handelt sich um einen umfassenden Standard für die Funktionsweise von Webseiten.Um zu verstehen, warum das wichtig ist, muss man auf das Chaos von 1994 zurückblicken. HTML befand sich noch in der ersten Revision. Mosaik und Netscape kämpften um die Vorherrschaft. Die meisten Menschen hatten noch nicht einmal vom World Wide Web gehört. Im selben Jahr half Berners-Lee bei der Gründung des World Wide Web Consortium, bekannt als W3C, um Standards zu setzen.Eine respektable Autorität heute? Sicher. In den 90ern? Weitgehend ignoriert.Kommerzielle Akteure haben ihre eigenen Wege geebnet. 1995 veröffentlichte das W3C die zweite Revision von HTML. Microsoft sprang mit dem Internet Explorer ein. IE interessierte sich nicht besonders für Standards. Netscape kämpfte darum, seinen Marktanteil zu halten, während der Browser von Microsoft das Mittagessen verschlang.Webentwickler lebten während dieser frühen Browserkriege in der Hölle. Sie mussten dafür sorgen, dass die Websites mit jeder neuen Version der wichtigsten Browser sowie mit Nischenanbietern wie Opera und Apple Safari kompatibel sind. Das W3C brachte 1997 HTML 3.2 und 1998 HTML 4 voran. Die Einhaltung von Standards schien weniger wichtig zu sein als die Suche nach browserspezifischen Funktionen. Diese Fragmentierung hielt bis 2003 an.Dann tauchte Mozilla auf.Die von der Community getragene Mozilla Foundation veröffentlichte den ursprünglichen Mozilla-Browser, gefolgt von Firefox im Jahr 2004. Firefox fraß die Dominanz des IE auf. Entscheidend ist, dass Mozilla dabei tatsächlich die W3C-Standards befolgte. Doch während Firefox auf dem veralteten HTML-4-Standard wuchs, wusste Mozilla, dass etwas nicht stimmte.Im Jahr 2004 schloss sich Mozilla mit Apple und Opera zusammen. Sie gründeten die Web Hypertext Application Technology Working Group, kurz WHATWG. Ihr Ziel war einfach: die HTML-Entwicklung am Leben zu erhalten. Das W3C zögerte zunächst. Sie schlossen sich der Wiederbelebung im Jahr 2006 an. Gemeinsam führten sie bestehende HTML- und XHTML-Spezifikationen zusammen. Sie entwickelten sie zur neuen HTML5-Spezifikation weiter. Das W3C pflegt und veröffentlicht es derzeit.## Was HTML5 eigentlich istBevor wir näher darauf eingehen, klären wir einen häufigen Punkt der Verwirrung: Es gibt eine neue Version der Auszeichnungssprache namens HTML5. Aber diese Sprache ist nur ein Teil eines umfassenderen Standards, der denselben Namen trägt. Wenn wir über HTML5 sprechen, sprechen wir über das Gesamtpaket.HTML selbst konzentriert sich auf statische Dokumente. Denken Sie an Text und Links. Unter HTML 4 war der Standard im Grunde nur die Syntax dafür. HTML5 hat ein viel größeres Ziel. Es beschreibt den Inhalt, das Design und die Anwendungsschnittstellen hinter einer Webseite, wenn diese in Ihren Browser geladen wird. Genauer gesagt legt es eine einzige Syntax für die Interaktion mit jedem Element fest, das in den Speicher Ihres Computers geladen wird.Woher weiß der Browser also, welchen Standard er verwenden soll? Einfach. Solange der Browser HTML5 unterstützt, beherrscht er alles. Es muss nicht zwischen Revisionen unterschieden werden. Wenn der Browser auf dem neuesten Stand ist, liest er die Seite.Die Magie entsteht, weil HTML5 neue Versionen mehrerer Technologien integriert, die zusammenarbeiten. Die Ziele sind konkret:- Halten Sie die Sprache einfach und intuitiv
– Stellen Sie sicher, dass der Code leicht zu lesen und zu warten ist
– Behandeln Sie Seiten als interaktive Anwendungen, nicht als statische Dokumente
– Verlassen Sie sich beim Styling auf Cascading Style Sheets (CSS).
– Erkennen Sie JavaScript als zentrale Skriptkomponente
– Nutzen Sie dynamische Inhalte von serverseitigen Technologien wie PHP und ASPDas ist nicht nur Markup. Es ist ein Ökosystem.### Der Motor hinter dem BildschirmHTML schwebt nicht im Nichts. Es basiert auf einem Modell, das dem Browser genau sagt, was diese Tags bedeuten. Dieses Modell ist das Document Object Model (DOM). Es ist direkt in die Webbrowser-Anwendung integriert. Das bedeutet, dass es sich bei der Auszeichnungssprache im Wesentlichen um eine Reihe von Anweisungen handelt, die auf einer Struktur basieren, die der Browser bereits zu lesen weiß.Stellen Sie sich das DOM als eine Schachtel mit Stempeln vor. Jeder Stempel repräsentiert ein anderes Element. Wenn Sie eine HTML-Seite schreiben, drücken Sie einfach diese Stempel auf die Seite und füllen die Eindrücke mit Ihrem eigenen benutzerdefinierten Inhalt. Der Browser zeigt alles an, was Sie mit den Stempeln in diesem Feld erstellen.Technisch gesehen ist das DOM eine Anwendungsprogrammierschnittstelle (API). Es bietet eine plattformneutrale Möglichkeit, HTML- oder XML-Dokumente zu verarbeiten. XML sieht aus wie HTML, ermöglicht es Programmierern jedoch, ihre eigenen benutzerdefinierten Elemente zu definieren. Der HTML5-Standard schreibt eine bestimmte Version vor: DOM5 HTML. Moderne Versionen von Chrome, Firefox, Internet Explorer, Safari und Opera unterstützen alle unter DOM5-HTML verarbeitete Seiten.### MIME-Typen sind wichtigEine weitere Säule von HTML5 sind die MIME-Typen (Multipurpose Internet Mail Extensions). Die Internet Engineering Task Force (IETF) hat MIME standardisiert, um Software vor den Inhalten zu warnen, die sie verarbeiten möchte. Dies entspricht normalerweise einem bestimmten Dateityp, beispielsweise einem HTML-Dokument oder einer MP3-Audiodatei.Webentwickler geben diese MIME-Typen beim Codieren einer Seite an. Dadurch wird der Browser aufgefordert, Dateien basierend auf ihrem Typ korrekt zu laden. Zwei MIME-Typen bilden zusammen mit DOM5-HTML die Grundlage des HTML5-Standards: der HTML-MIME-Typ („text/html“) und der XML-MIME-Typ („application/xhtml+xml“). HTML5 aktualisiert die Syntax für beide.Kurz gesagt, die grundlegenden Technologien im HTML5-Standard sind DOM5-HTML und die HTML5-kompatiblen MIME-Typen für HTML und XML. Fahren wir als Nächstes mit der Erstellung einer Webseite mit HTML5 fort.# HTML5 Deep Dive: Semantische Struktur, Formen und MedienSie können sich HTML5 als die Basis von HTML Version 5 vorstellen. Der Codeausschnitt in der Seitenleiste veranschaulicht eine grundlegende Seitenstruktur. Wenn Sie den Rohcode hinter einer Website sehen möchten, verwenden Sie einfach die Funktion „Quelle anzeigen“ Ihres Browsers. Der gesamte Beispielcode funktioniert auch mit HTML 4-Standards, was bedeutet, dass er keine der glänzenden neuen HTML5-Funktionen verwendet.Das Starten einer Datei mit einer **Dokumenttypdeklaration** ist gängige Praxis, auch wenn dies nicht auf jeder Website der Fall ist. Es teilt dem Browser mit, dass er Standard-HTML erwarten soll. Einige Entwickler verwenden **DTD**-Dateien, um Erweiterungen anzugeben. Wenn dies der Fall ist, wird der DTD-Speicherort in diese Doctype-Zeile integriert. Der Rest des Codes ist nur Standardsyntax. Wenn Ihnen das fremd vorkommt, schauen Sie sich unseren Leitfaden zur Funktionsweise von Webseiten an.## Was ist eigentlich neu in HTML5?Wir stehen hier vor vier großen Veränderungen. Dabei handelt es sich nicht nur um Optimierungen; Sie verändern die Art und Weise, wie Sie Inhalte erstellen und mit ihnen interagieren.* **Neue Formularelemente** für bessere Struktur und Eingabeverarbeitung.
* **Semantische Elemente**, die Inhalte anhand ihrer Rolle auf der Seite definieren.
* **Medienelemente** für Audio und Video, ohne dass Browser-Plugins erforderlich sind.
* **Ruby-Elemente** zur Handhabung der Internationalisierung für asiatische Sprachen.### Modernisierung von WebformularenFormulare gibt es schon seit den Anfängen von HTML. Das sind die Felder, in die Benutzer Namen, Adressen und Passwörter eingeben. Aber lange Zeit waren sie klobig. Um sie nutzbar zu machen, mussten Entwickler auf Software von Drittanbietern zurückgreifen. Es fühlte sich an, als wären HTML-Formulare bereits veraltet.HTML5 hat das geändert. Es hat Formularen mit neuen Eingabetypen und Attributen wieder Leben eingehaucht. Beim Erstellen müssen Sie nicht zwischen alter und neuer Syntax unterscheiden. Folgen Sie einfach dem Arbeitsablauf.Beginnen Sie mit den „
“-Tags, um den Block zu erstellen. Verwenden Sie darin „
“-Tags, um verwandte Felder zu gruppieren. Jedes Feld benötigt ein „“-Tag. Verwenden Sie das Attribut „for“, um die Bezeichnung mit der Eingabe-ID zu verknüpfen. Es sieht so aus: “.Fügen Sie in dieses Etikett den Text ein, den der Benutzer sieht, gefolgt vom Tag „“ für den eigentlichen Dateneintrag.Die Magie geschieht mit dem Attribut „type“. Wenn Sie einen Typ angeben, führt der Browser die Validierung automatisch durch. Sie benötigen keine zusätzlichen Skripte, um zu überprüfen, ob die Daten korrekt sind. HTML5 unterstützt bestimmte Typen wie:* Datum
* Zeit
* Datum/Uhrzeit
* datetime-local
* Monat
* Woche
* Nummer
* E-Mail
*Tel
* URL
* Bereich
* Farbe
* suchenSie können das Attribut „pattern“ auch mit einem regulären Ausdruck für benutzerdefinierte Validierungsregeln verwenden.Müssen Sie einen Benutzer zwingen, etwas auszufüllen? Fügen Sie das Attribut „erforderlich“ hinzu. Möchten Sie, dass der Cursor sofort zu einem bestimmten Feld springt? Verwenden Sie „Autofokus“. Wenn Sie dem Benutzer einen Hinweis geben möchten, was er eingeben soll, verwenden Sie „Platzhalter“.Profi-Tipp: Gestalten Sie die CSS-Pseudoklassen „:required“ und „:invalid“. Es gibt Benutzern einen visuellen Hinweis, wenn sie ein Feld übersehen oder das falsche Format eingegeben haben.### Browser-Unterstützung und TestsDie vollständige Liste finden Sie in einem aktuellen HTML5-Referenzhandbuch. Aber gehen Sie nicht einfach davon aus, dass es überall funktioniert. Die Unterstützung einiger Formularfelder variiert je nach Browser. Sie müssen Ihre Formulare in jedem Browsertyp testen, den Sie unterstützen möchten.HTML 5-Formulare sind funktionsreicher als zuvor, aber der nächste Satz von Elementen ist völlig neu im Standard.# Semantische HTML5-Tags: Ein Entwicklerhandbuch für aussagekräftige StrukturenGenerische Divs sind tot. Zumindest ist das das Gefühl, das man bekommt, wenn man sich modernen HTML5-Code ansieht. Jahrelang haben Entwickler Layouts mithilfe der Tags „