Im Mai 2009 stellte Google auf ihrer Entwicklerkonferenz den neuen Webstandard HTML5 vor. Google kündigte dort an, dass alle zukünftigen Google Anwendungen auf HTML5 Basis programmiert werden sollen. Die neue HTML Version erhielt durch die Ankündigung die Arbeiten an dem parallel zu HTML5 entwickelten Webstandard XHTML 2 einzustellen von W3C, dem Standardisierungskonsortium, einen weiteren positiven Schub nach vorne.
Das W3C will sich fortan völlig auf die Weiterentwicklung der HTML 5 Standards konzentrieren. Die neu entwickelten Standards sollen die in die Jahre gekommenen HTML 4 und XHTML 1 ablösen und sich an die hohen Anforderungen des Web 2.0 anpassen. Der Vorteil von HTML 5 liegt auch daran, dass es abwärtskompatibel ist und so muss nicht alles Alte über Bord geworfen werden.
Wer beispielsweise noch mit den alten Strict Varianten von HTML 4 oder XMTL 1 arbeitet, braucht grundsätzlich nur die Doctype Deklaration auf <!DOCTYPE html> ändern. Es müssen zudem nur einige wenige alte Elemente entrümpelt werden, die aber allesamt nur den visuellen Darstellungen dienen. Für diese gibt es in der neuen HTML 5 Version bessere Alternativen, die es sich anzusehen lohnt. Erst durch die Nutzung dieser neuen Elemente kann man die Stärken und Vorzüge von HTML5 voll und ganz erfassen und davon profitieren.
Sprungmarken:
- HTML5 – Struktur dominiert alles
- Hauptfunktionen von HTML5
- HTML5 – Textebene und Semantik werden bereichert
- Maschinenlesbare Daten
- Textpassagen ohne Aufwand hervorgehoben
- Fortschritt von Aufgaben aufzeichnen
- Statischer Überblick über einen aktuellen Ist-Zustand
- HTML5 verspricht Multimedia total
- Multimedia Elemente beschriften
- Einbettung von Audio und Videodateien
- Zeichenfläche in 2D
- HTML5 – neue Elemente für Formulare
- HTML5 verspricht eine schöne neue Welt
- HTML5 wird nicht zu 100 Prozent unterstützt
HTML5 – Struktur dominiert alles
Damit die semantische Strukturierung der Webseiten leichter fällt, kennt das neue HTML5 einige neue Elemente, die Struktur in die Unordnung vieler Blöcke, wie beispielsweise in die mittlerweile sehr weit verbreiteten <div id="..."> Blöcke, bringen soll.
Der Aufbau der Webseite soll so standardisiert und leichter überschaubar werden.
Die neuen Elemente <header>, <article>, <aside>, <nav> und <footer> sollen hierbei die Hauptrolle spielen.
Hauptfunktionen von HTML5
Im Folgenden werden die einzelnen Elemente kurz vorgestellt, damit man einen Überblick über die neuen Hauptfunktionen von HTML5 erhält.
<header>: Mit diesem Element der HTML5-Sprache kennzeichnet man den Kopfbereich des Dokuments und legt darin normalerweise den Titel des Dokuments, die Logos oder ein Formular zur Schnellsuche an. Eine weitere Verwendungsmöglichkeit ist das Erstellen eines Inhaltsverzeichnisses der Seite innerhalb dieses Elementes.<article>: Innerhalb dieser Blöcke, sollen die eigentlichen informativen Inhalte der Seite enthalten sein.Der Gedanke des HTML 5 ist, dass ein
<article>Block so aufgebaut sein soll, dass er auch alleine stehen kann und beispielsweise ohne Änderung als Inhalt eines Newsfeeds verwendet werden kann.Die einzelnen Blöcke des Hauptteiles können durch section Befehle unterteilt werden und so kann eine Verschachtelung erzielt werden.
<aside>: soll Textteile oder Abschnitte beinhalten, die eigentlich nicht direkt mit dem Hauptteil in Verbindung stehen. Dies können typischerweise Texteinschübe sein, die nicht unmittelbar mit dem Hauptteil zusammenhängen oder auch für Sidebars ist dieser Abschnitt geeignet.<nav>: soll in der HTML 5 Sprache die Hauptnavigationsblöcke enthalten.<footer>: bestimmt den Fußbereich der Webseite und beinhaltet die typischen Inhalte eines Fußbereiches, der aber nicht unbedingt am Ende des Dokumentes stehen muss. Zu finden sollen hier unter anderem die Autoren und Copyright Informationen oder Querverweise sein.
Beispiel für eine übersichtlichere Struktur mit HTML5
Ein Beispiel soll verdeutlichen wie mit HTML 5 die Strukturen einer Web Seite viel übersichtlicher werden. Mit den gängigen HMTL Strukturen würde eine Seite innerhalb des <body> </body>-Teils beispielsweise so aussehen:
<div id="ganz oben"> <div id="oben"> <div id="menuleft>" <div id="content" class= "narrowcolumn"> <div id="sidebar"> <div id="footer">
HTML 5 Strukturen
Mit dem HTML 5 Strukturen wird die gesamte Web Seite viel übersichtlicher und der Quelltext wesentlich leichter und damit auch für Laien verständlich:
<header>(für die ersten beiden Quelltextzeilen, des obigen Beispiels)<nav>(für die Zeile 3 des obigen Beispiels)<article>(für die Zeile 4 des obigen Beispiels)<aside>(für die Zeile 5 des obigen Beispiels)<footer>(für die Zeile 6 des obigen Beispiels)
Textebene und Semantik werden auch bereichert
Die oben vorgestellten Strukturelemente sind äußerst nützlich und schaffen Ordnung im bisher herrschenden <"div id"> Chaos. Doch auch in der Textebene gibt es einige Neuerungen, die die Nutzer begeistern sollen.
Maschinenlesbare Daten
Mit dem <time>-Element kann man beispielsweise genaue Daten (Datum und Uhrzeit, wenn gewünscht) im ISO Format angeben und die Daten werden so maschinenlesbar. Dadurch ist es denkbar, dass diese Daten in ein Kalenderprogramm oder eine Agentursoftware exportiert werden.
Diese neue Funktion des HTML 5 eignet sich aber nur für genaue Zeitangaben und nicht für historische, da diese meist sehr ungenau (beispielsweise 19. Jahrhundert) sind. Es können nur Daten, die dem gregorianischen Kalender entstammen mit dieser Funktion übernommen werden.
WordPress Beispiel
Nachfolgend eine Variante zur Einbindung der Datumsanzeige der Artikel-Veröffentlichung in WordPress:
<time datetime="<?php the_time('c'); ?>" pubdate><?php the_time('j. F Y'); ?></time>Für das Datum der Kommentar-Veröffentlichung:
<time datetime="<?php the_time('c'); ?>" pubdate><?php echo $get_comment_date; ?></time>Permalink zum Kommentar:
<a href="<?php echo $get_comment_link; ?>"><time datetime="<?php the_time('c'); ?>" pubdate><?php echo $get_comment_date; ?></time></a>Textpassagen ohne Aufwand hervorgehoben
Des Weiteren bietet die Sprache HTML 5 mit dem Befehl <mark> die Möglichkeit, dass Textpassagen einfach und ohne Aufwand hervorgehoben werden können. Die Hervorhebung sieht dann so aus, als ob man auf Papier mit einem Leuchtstift eine bestimmte Textpassage markieren würde. Diese Funktion würde sich beispielsweise dafür anbieten, ein Suchwort im Text der Seite hervorzuheben. Hat man beispielsweise Virenschutz eingegeben, kann man auf der Seite mit einem Blick erkennen, wo evtl. die interessante Information steht.
Fortschritt von Aufgaben aufzeichnen
Funktionen, die besonders für die Entwickler von Web Applikationen interessant sein werden, ist das Element <progress>. Dadurch wird es möglich den Fortschritt einer bestimmten Aufgabe aufzuzeichnen. Dies erfolgt beispielsweise in Prozent- oder Sekundenangabe. Mittels eingebautem JavaScript kann dieser Wert dann ständig aktualisiert werden. Im Element <progress> enthalten ist das Attribut value mit dem man den aktuellen Wert festsetzt. Durch das so genannte max Attribut legt der Entwickler den Wert fest, der beim Vervollständigen des Tasks erreicht wird.
Statischer Überblick über einen aktuellen Ist-Zustand
Neben dem <progress> Element gibt es hier noch einen engen Verwandten, nämlich das <meter> Element. Mit diesem kann man einen statischen Überblick über einen aktuellen Ist-Zustand erhalten. Beispielsweise kann man mit diesem Element, den aktuellen Speicherbedarf des eigenen Webmail Kontos oder Dokumentenmanagementsystem abfragen.
Für den Fortschritt eines Tasks könnte der Quelltext wie folgt aussehen:
<progress max="100" value="65"> 65%</progress>
Abfrage des aktuell vorhandenen Speichplatzes:
<meter min="0" max="100" value="20">20 von 100 MB verbraucht</meter>
HTML 5 verspricht Multimedia total
Multimedia Elemente beschriften
Durch das neue Element der Programmiersprache HTML 5 <figure> können Bilder, die man auf einer Webseite einfügen möchte, mit einer Beschriftung versehen werden. Die Beschriftung sieht dann so aus wie man sie bisher nur aus den Printmedien kannte und wird direkt und zusammenhängend mit dem Bild eingefügt.
Der Quellcode für eine solche Beschriftung mit dem Element <figure> sieht wie folgt aus:
<figure> <img src="beispielbild.jpg" alt="Beispiel" /> <figcaption>Abbildung 1: Beispielbild. oder ©Max Mustermann</figcaption> </figure>
Das <figure> Element in HTML beschränkt sich natürlich nicht nur auf Bilder, sondern kann auch für Videos verwendet werden. Zu dieser Elementfamilie gehören auch die source codes <audio> und <video>, die sich besonders gut für Audio- oder Videogalerien eignen. Als die ursprüngliche HTML-Sprache generiert wurde, gab es noch nicht die Fülle von Audio und Video Dateien, die heute im gesamten Web kursieren (beispielsweise YouTube).
Einbettung von Audio und Videodateien
Fast jeder Benutzer hat heute auf seiner eigenen Webseite Audio und Videodateien eingebettet. Jeder der eine plattform- und browserübergreifende Einbettung dieser Daten vornehmen wollte, weiß wie aufwändig dies mit der bisherigen HTML-Sprache war.
Beispiel für die neue Einbettung:
<video src="beispielvideo.ogv" type="video/ogg; codecs='theora, vorbis'" controls="controls"> </video>
Das Attribut controls erlaubt den Browsern die Darstellung der für das Abspielen der Videos und Audiodateien benötigten Kontrollschaltflächen. Der Browser stellt somit den Fortschrittsbalken beim Abspielen und die Start/Pause Knöpfe usw., dar.
Zu beachten ist, dass in der HTML 5 Spezifikation kein gemeinsames Audio- und Videoformat festgelegt wird, das von jedem Browser unterstützt wird. Aus diesem Grund wurde im obigen Beispiel das Attribut type eingefügt, das den MIME Type des jeweiligen Medienobjekts definiert.
Beim Design der neuen HTML 5 Sprache wurde grundsätzlich angedacht, dass man eine gemeinsame Basis (Ogg Familie, freie Codecs) einführt. Da aber beispielsweise Apple das hausinterne Format Quicktime stärken will, wurde davon abgesehen nur eine Basis für die Audio- und Videodateien einzuführen und gebrauchte Software bleibt aktuell. Damit bleibt es den Videoerstellern weiterhin nicht erspart, dass sie hoffen müssen, dass möglichst viele Clients ihre Formate unterstützen.
Zeichenfläche in 2D
Für eine besonders große Begeisterung unter den Web Programmierern sorgt aber das so genannte <canvas> Element. Durch das Element wird eine Zeichenfläche in 2D in beliebiger Größe zur Verfügung gestellt. Durch die Verwendung eines JavaScripts kann man auf dieser Zeichenfläche etwas malen oder Grafiken erstellen. Das Zeichenfeld eignet sich unter Umständen sogar für das Programmieren von kleinen Spielen.
Der Vorteil des
<canvas>-Elements ist, dass es von den Entwicklern über das bereits bekannte JavaScript zu bedienen ist und somit eine schnelle und einfache Umsetzung gewährleistet.
HTML 5 – neue Elemente für Formulare
Doch auch für die vielen Formulare, die man im Internet findet, sind in der neuen HTML 5 Sprache einige Elemente vorgesehen, die den Programmierern das Leben erleichtern sollen. Im alten HTML 4 Standard gab es nur einige allgemeine Elemente, wie Text- oder Passwortfelder. Alle anderen Formularfelder mussten umständlich verifiziert werden, damit sie überhaupt verwendet werden konnten. Beim neuen <input> Element des HTML 5 kann man mittels des Attributes type angeben, welche Eingabe man sich erwartet.
Beispielsweise kann man hier type="email" angeben, wenn man die Eingabe einer E-Mail Adresse erwartet. Der Browser überprüft, dann sofort ob es sich um eine zugelassene und gültige E-Mail Adresse handelt. Der Entwickler muss also nichts zusätzlich tun und kann sich bequem zurücklehnen.
Neben dem type-Wert „email“ sind noch die folgenden Werte zugelassen: „date„, „time“ und „datetime“ für alle Zeitangaben, „color“ für alle Farbwerte, „number“ für sämtliche numerischen Werte und „url“ für Adressen des Internets.
Seitenaufrufe speichern
Das so genannte autocomplete-Attribut des <input>-Elements veranlasst den Browser dazu, die Daten für zukünftige Seitenaufrufe zu speichern und bietet dem Benutzer diese Funktion dann an. autocomplete muss vom Programmierer auf „on“ gesetzt werden. Das Attribut autofocus kann dazu benutzt werden, dass nach Laden der Webseite der Cursor automatisch in der ersten auszufüllenden Zeile steht und der Benutzer nicht extra darauf klicken muss.
HTML 5 verspricht eine schöne neue Welt
Die Standardisierung und Entwicklung von HTML 5 ist aktuell noch immer nicht abgeschlossen und die oben genannten Elemente sind nur einige der neuen Spezifikationen der HTML 5 Sprache. HTML 5 ist sehr vielseitig und ermöglicht auch über JavaScript Schnittstellen eine Benutzerinteraktion, wie den Drag und Drop Support.
HTML 5 wird nicht zu 100 Prozent unterstützt
Aber bei allen schönen Erneuerungen gibt es auch einen Haken an dem neuen HTML 5.
Aktuell ist es so, dass die Browser Unterstützung noch nicht zu 100 Prozent ausgreift ist. Aber aufgrund der Abwärtskompatibilität ist es so, dass auch für einen Browser unbekannte Elemente sinnvoll dargestellt werden. Wird beispielsweise das Element <mark> nicht erkannt, wird der Text trotzdem als normaler Fließtext dargestellt, ohne dass es zu Fehlermeldungen kommt.
Die meisten Browser erkennen die <video>, <audio> und <canvas> Elemente bereits und darüber hinaus unterstützt jede Browser Familie nur punktuell einzelne Spezifikationen.
Opera-Browser sticht heraus
Opera sticht jedoch durch die fast vollständige Implementierung der neuen Formularelemente und Attribute heraus. Die neuen Elemente können über CSS formatiert werden (außer beim Internet Explorer) und sogar dem Redmonder kann man mit einem eigenen HTML 5 enabling script auf die Beine helfen.
Schluss
Die große Chance, die sich durch HTML 5 bietet ist die einheitliche Browser Unterstützung von nur einem Standard. Durch HTML 5 dürften die Auswüchse der browsereigenen Features speziell von Netscape und Internet Explorer wohl endgültig der Vergangenheit angehören und das World Wide Web sollte im Idealfall übersichtlicher und transparenter werden.
Schreibe einen Kommentar