Drei Dinge, für die man bereits jetzt mit HTML5 (im jedem Browser) gebrauchen kann

Veröffentlicht am 31. Mai 2010

HTML soll im Jahre 2022 fertig sein – das erzählt man sich jedenfalls. Jene die dies verbreiten verzichten meist darauf, "fertig" näher zu definieren. Fakt ist nämlich: Viele Aspekte von HTML5 kann man heute schon verwenden.

Und obwohl HTML5 vor allem darauf ausgerichtet ist, neue komplizierte Javascript-APIs für dynamische Webanwendungen bereitzustellen, ist auch für Otto Normalwebworker einiges an brauchbaren neuen Features an Bord. Drei schöne HTML5-Aspekte, die jeder gebrauchen kann und die ohne zu Tricks, Hacks, und Internet-Explorer-Sonderbehandlungen auskommen, möchte ich kurz vorstellen.

Vereinheitlichungen nutzen, Tipperei einsparen

Selbst wenn man von allen neuen HTML5-Features gar nichts wissen will, kann man sich trotzdem so machen Tastendruck und so manches Denkmanöver einsparen, denn HTML5 macht einiges einheitlicher und vieles kürzer. Das Paradebeispiel ist der sicher vielen schon bekannte Doctype:

<!DOCTYPE html>

Da HTML5 in erster Linie eine Erweiterung von bekannten (X)HTML-Standards ist, kann man bei 99% aller Websites einfach den Doctype austauschen und hat auf einen Schlag eine gültige HTML5-Seite. Und diesen Doctype kann man sich, im Gegensatz zu seinem Vorgängern, auch bequem merken. Kein Browser, nicht einmal der rückständigste Internet Explorer, wird damit Probleme haben, ebenso wenig der Google-Crawler oder andere Besucher der Seite.

Ebenfalls angenehm ist, dass das type-Attribut der script- und style-Elemente in HTML5 die Standardwerte text/javascript und text/css hat. Das bedeutet nicht weniger, als dass man diese Attribute nicht zu notieren braucht, wenn man Javascript oder CSS einbetten möchte. Auch hier gilt: Alle Browser spielen mit!

<script> alert('Ich brauche kein type-Attribut!'); </script>
<style> body:before{ content:'Ich auch nicht'; } </style>

Außerdem ist HTML5 echtes "normales" HTML und kein XHTML. Das heißt, man kann im Vergleich zu XHTML 1, wenn man möchte, auf schließende Slashes (Schrägstriche) bei leeren HTML-Elementen verzichten und braucht auch boolsche Attribute nicht mehr voll ausschreiben:

<input type="text" disabled="disabled" /> <!-- XHTML-Style -->
<input type="text" disabled> <!-- HTML(5)-Style -->

Wichtig ist: Man kann das alles so machen, muss aber nicht. Was die Syntax angeht ist HTML5 recht anspruchslos – was valides XHTML 1 ist, ist auch syntaktisch gültiges HTML5.

Neue Formular-Elemente verwenden

HTML5 führt eine Reihe neuer Elemente für Formularfelder ein, wobei unter anderem Schieberegler und Datumspicker enthalten sind. Diese funktionieren natürlich nur dann ordnungsgemäß, wenn sie vom Browser unterstützt werden (Opera ist hier vorreiter), doch bei Nicht-Unterstützung machen die anderen Browser etwas sehr sinnvolles: Sie verwandeln das Feld in ein ganz normales Textfeld! So würde das folgende Datums-Input…

<input id="datumsfeld" type="date">

… durch Opera erwartungsgemäß mit einem Datumspicker ausgegeben…

Opera und HTML5

… im IE6 aber in ein normales Text-Input verwandelt:

IE6 und HTML5

Das ist vielleicht für den IE6-Benutzer nicht optimal, hält aber ihn aber in keiner Weise vom Ausfüllen des Feldes ab! Man müsste dann nur eben darunter schreiben, dass das Datum im Format JJJJ-MM-DD einzugeben ist. Dann hätte der Opera-Surfer ein komfortableres Formular vor sich, der IE6-Nutzer ist aber trotzdem nicht ausgesperrt – Progressive Enhancement at it's best.

Tipp für JavaScript-Nerds: Wer in jedem Fall einen Datumspicker braucht, kann den für IE6 und Konsorten auch bereitstellen. Da die Browser für sie unbekannte Eingabefelder komplett in Textfelder umwandeln, ist es kein Problem, solche Fälle zu erkennen und mit jQuery-Plugins oder andern Datumspicker-Scripts zu behandeln:

var feld = document.getElementById('datumsfeld');
if(feld.type != 'date'){
    // Hier jQuery u.Ä. für einen herkömmlichen JS-Datumspicker verwenden
}

Unterm Strich verliert beim Einsatz von HTML5-Formularen niemand etwas, aber jene, die mit modernen Browsern unterwegs sind, genießen bereits ein kleines Usability-Plus.

data-*-Attribute nutzen

Mit data-*-Attributen kann man unsichtbare Daten in ein HTML-Element schreiben. Das Sternchen steht dabei für eine beliebige Zeichenkette, d.h. man kann sich buchstäblich neue HTML-Attribute ausdenken! Im Einsatz könnte das Ganze beispielsweise so aussehen:

<ul id="metal">
    <li data-artist="Judas Priest" data-album="Painkiller">Painkiller</li>
    <li data-artist="Metallica" data-album="Ride the Lightning">For Whom the Bell Tolls</li>
    <li data-artist="Iron Maiden" data-album="The Number of The Beast">Run to the Hills</li>
</ul>

Der Sinn von data-*-Attributen ist ganz einfach: die in ihnen gespeicherten Informationen (die man z.B. während der Erzeugung der Seite durch ein ein PHP-Script einbauen könnte) lassen sich im Browser per JavaScript auslesen. HTML5 sieht dafür eigentlich auch eine eigene JS-Schnittstelle vor.

Diese ist zwar noch in keinem Browser implementiert, doch das muss uns nicht stören: die data-*-Attribute sind schließlich ganz normale HTML-Attribute und können entsprechend auch ohne spezialisierte API ausgelesen werden:

var titel = document.getElementsByTagName('li');
for(var i = 0; i < titel.length; i++){
    alert(titel[i].innerHTML + ' von ' + titel[i].getAttributeNode('data-artist').value + ' stammt vom Album ' + titel[i].getAttributeNode('data-album').value);
}

Übrigens: innerHTML ist seit HTML5 auch Bestandteil des Webstandards-Kanon und keine böse Nichtstandard-Funktion mehr.

Fazit: Bei HTML5 ist (auch heute schon) für alle etwas dabei

Klar, HTML5 wurde für Webapplikationen entworfen und weniger für normale Websites wie den Internetauftritt der mittelständischen Beispielmüller GmbH. Und ob das so für das Web der Weisheit letzter Schluss ist, darf man durchaus diskutieren. Aber wie wir gesehen haben, ist in HTML5 für jeden etwas dabei – auch für normale Webworker, die sich eben nicht mit haarsträubenden Hacks herumschlagen wollen.

Ob das Ganze dann so spannend ist wie eben all jene hackerischen Hightech-Sachen, steht freilich auf einem anderen Blatt.

HTML5 in der Technikwürze und bei Perun

Veröffentlicht am 31. Mai 2010

Das Technikwürze-Logo

Aus aktuellem Anlass habe ich mich anderenorts auch zwei Mal zum Thema HTML5 geäußert. Erstens durfte ich als Gast der 169. Ausgabe von Technikwürze mit David und Marcel fast zweieinhalb Stunden über HTML5 (HTML5 im Sinne von „HTML5“) plaudern. Dabei haben wir auch jene Technologien angeschnitten, die zur Zeit in noch nicht so vielen Browsern integriert sind oder die sehr spezifische Use Cases haben – wie zum Beispiel die Frage, wie man mit Javascript performant 50 Millionen Quadratwurzeln zieht.

Peruns Logo

Wer sich angesichts solcher Spezialfälle fragt, was man denn als normaler Webdesigner von HTML5 hat, dem sei dieser Artikel bei Perun (lokale Kopie) empfohlen. Hier zeige ich an drei einfachen Beispielen, wie man auch Nicht-JavaScript-Nerd einen Mehrwert aus HTML5 ziehen kann. Diverse Verkürzungen und Vereinfachungen, neue Formularelemente und die in HTML5 geschaffene Möglichkeit, sich buchstäblich neue Attribute für Elemente auszudenken, werden besprochen.

Das HTML5-Buch

Veröffentlicht am 27. Mai 2010

HTML5. Webseiten innovativ und zukunftssicher

Wie vermutlich den wenigsten unter euch verborgen geblieben ist, habe ich ein Buch über HTML5 geschrieben. HTML5 - Webseiten innovativ und zukunftssicher erscheint bei Open Source Press, hat fast genau 400 Seiten und ist für Leute gedacht, die bereits versierte (X)HTML-Autoren sind und die vorzugsweise auch schon mal die eine oder andere Zeile Javascript geschrieben haben. Grundlagen stehen nur insofern auf dem Programm, als dass ein bisschen die Regeln von HTML ohne X davor rekapituliert werden.

Inhalt

Das Buch richtet sich sowohl an klassische HTML-Autoren als auch alle JS-Nerds, die auf die neuen APIs scharf sind – von Use Cases für <b> bis zu „Hallo Welt“ mit WebGL ist alles dabei. Die Themen auf die im einzelnen eingegangen wird sind die Folgenden:

  • Semantisches HTML5
  • HTML5-Formulare
  • Offline-Webanwendungen
  • <audio> und <video>
  • Die Drag&Drop-API
  • Das Canvas-Element

Detailinfos nebst Kaufoptionen gibt es auf der Website zum Buch, beim Verlag und bei Amazon, das Inhaltsverzeichnis und eine Leseprobe gibt es als PDF zum Download. (Bei Amazon heißt es zur Zeit, das Buch sei noch nicht erschienen. Das ist falsch! Amazon spielt nur mal wieder Saftladen. Woanders wird bereits fleißig geliefert.)

Zu jedem Thema sind umfangreiche Tabellen und Referenzen sowie nützliche Codesnipsel enthalten (wie zum Beispiel dieses Script zum Auslesen von Custom Data in HTML5-Dokumenten). Es war mir auch sehr wichtig, die Hintergründe von HTML5 zu beleuchten, so dass es neben einem historischen HTML-Exkurs auch ein Extra-Kapitel nur für Kritik an HTML5 und Überlegungen zu Alternativen und der Zukunft des WWW gibt.

FAQ

HTML5 soll doch erst 2022 fertig sein! Jetzt schon ein Buch darüber?
Ich würde sogar die Prophezeiung wagen, dass HTML5 nie „fertig“ (im Sinne eines etablierten Webstandards wie HTML 4.01) sein wird. Also wann wenn nicht jetzt?
Die Hälfte von dem was da drinsteht ist doch gar kein HTML5!
Doch.
Warum beschreibst du nicht Technologie XYZ?
Keine Zeit. Das was heute noch fehlt kriegt dann eben in der zweiten Auflage sein eigenes Kapitel. WebWorkers und SVG sind fest für die Zukunft eingeplant.
Nichts davon geht im IE8!
Aber hallo, und wie das geht! In vielen Bereichen ist der IE8 sogar besser ausgerüstet als Safari oder Chrome.
Nichts davon geht im IE6!
Das ist so pauschal nicht ganz richtig. Man muss nur wissen wie. Und außerdem ist der IE6, wenn nicht schon tot, zumindest schwer komatös. Um den sollte man sich meines Erachtens nicht mehr scheren, wobei ich natürlich spaßeshalber trotzdem den einen oder anderen IE6-Hack im Buch beschreibe.
Viel zu viel zu lesen!
Nächsten Monat halte ich eine dreitägige HTML5-Schulung in München. Noch kann man sich anmelden!
Ich habe eine Frage zu HTML5 oder zum Buch!
Hier kannst du sie loswerden.

Was ist HTML5 und was nicht? Und was hätte der Kaiser dazu gesagt?

Veröffentlicht am 20. Mai 2010

Update: Eine verbesserte und ständig aktualisierte Version der Grafik in diesen Artikel ist unter github.com/SirPepe/SpecGraph zu finden.

In jüngster Zeit regen sich verstärkt Leute darüber auf, dass „HTML5“ immer mehr zu einer Art Marketingbegriff wird und nicht (mehr?) scharf zwischen HTML5 im Sinne der HTML5-Spezifikationen und HTML5 im Sinne von schau mal was dein Browser noch so alles kann unterschieden wird. So wird zum Beispiel die Geolocation-API gerne als HTML5 angepriesen, hat aber damit streng genommen nichts zu tun – sie ist Gegenstand einer völlig eigenen Spezifikation des W3C. Manche regt dieses falsche Label so sehr auf, dass sie ganze Websites erschaffen um ihrem Zorn Ausdruck zu verleihen (kreativerweise unter Zuhilfenahme der Geolocation-API selbst).

Statt zu zürnen halte ich es lieber mit Erklärungen und die folgende Grafik, die ich letzte Woche für andere Zwecke gebaut habe, sollte den Problemkomplex „HTML5“ hoffentlich einigermaßen verbraucherfreundlich illustrieren:

HTML5-Technologien

Download als Inkscape-SVG
Web-optimiertes SVG von Pawel. Danke!

Damit kann man vielleicht dem Einen oder Anderen HTML5-Falschbezeichner den wahren Weg weisen. Aber hilft das wirklich irgendwem bei irgend etwas? Beispielsweise ist es so, dass sich jene Features, mit denen man eine Website zur Offline-App verwandeln kann, auf HTML5 selbst (in Form des dort spezifizierten Application Cache) und diverse andere Standards (DOM Storage und WebSQL) verteilen. Da genau zwischen HTML5 und „HTML5“ zu trennen wäre sicher sachlich richtig, nur wer hat am Ende etwas davon? Wem das nützt da was?

Cover des Verdeutschungshefts

Und ohnehin ist fraglich, ob man die laufende Begriffs(um)bildung überhaupt stoppen kann. Ich als Hobbylinguist und Ex-Historiker habe da meine Zweifel. Einst grub mein Onkel Heinz auf seinem Dachboden ein „Verdeutschungsheft“ aus dem Jahre 1916 aus, in dem der Allgemeine Deutsche Sprachverein seinen Leser antrug, böse Gallizismen wie „Büro“ oder „Garage“ aus gegebenem Anlass doch bitte in ihrem Gebrauch einzuschränken. Was soll denn sonst der Kaiser denken! Wie wir heute wissen, hat das super funktioniert – trotz großer Verbreitung solcher Heftchen. Und wenn nicht mal der Allgemeine Deutsche Sprachverein verhindern kann, dass jeder sagt was er will, wie soll man das dann als HTML-Nerd hinkriegen?

Will man das überhaupt? Die Welt ist auch nicht untergegangen, als alles, was irgendwie blinkte, das Label „AJAX“ verliehen bekam. Wir werden es also überstehen, wenn auch Geolocation und WebWorkers in Zukunft umgangssprachlich als HTML5 bezeichnet werden.

Update: Besseres Bild mit mehr Klarheit und weniger Tippfehlern ist eingebaut.

Update 2: Bild nochmal nachgebessert. Jetzt dürften alle Unklarheiten beseitigt sein.

Update 3: Eine verbesserte und ständig aktualisierte Version der Grafik verschiedenen Formaten ist ab jetzt unter github.com/SirPepe/SpecGraph zu finden.