Obwohl HTML5 vor allem darauf ausgerichtet ist, neue komplizierte Javascript-APIs für dynamische Webanwendungen bereitzustellen, kann auch Otto Normalwebentwickler einiges an nützlichen neuen Funktionen gebrauchen. Drei schöne HTML5-Aspekte ohne Tricks, Hacks, und Internet-Explorer-Sonderbehandlungen sind im Folgenden vorgestellt.
Vereinheitlichungen nutzen
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 Webseiten einfach den Doctype austauschen und hat auf einen Schlag eine gültige HTML5-Seite. Im Gegensatz zu seinem Vorgänger kann man sich diesen Doctype 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, dass man diese Attribute nicht zu notieren braucht, wenn man Javascript oder CSS einbetten möchte. Auch hier gilt: Die Attribute sind für alle Browser gültig.
<script> alert('Ich brauche kein type-Attribut!'); </script>
<style> body:before{ content:'Ich auch nicht'; } </style>
Außerdem ist HTML5 eine Variante von HTML und keine Methasprache XHTML. Das heißt, man kann im Vergleich zu XHTML 1 auf schließende Schrägstriche bei leeren HTML-Elementen verzichten und braucht auch boolsche Operatoren wie AND, NOT, OR nicht mehr vollständig ausschreiben:
<input type="text" disabled="disabled" /> <!-- XHTML-Style -->
<input type="text" disabled> <!-- HTML(5)-Style -->
Wichtig ist: Solche Formatierungen sind optional. HTML5 ist recht anspruchslos bezüglich der Code-Syntax - Valides XHTML 1 ist auch syntaktisch gültiges HTML5.
Making Apps Developer Days HTML 5
HTML 5 heißt das Zauberwort für alle App-Entwickler, die OS-übergreifende Apps entwickeln wollen. Die Grundlagen dafür liefert Making Apps mit einem zweitägigen Entwicklerworkshop am 13./14. September in München.
Wann: 13.-14. September 2011, 09 - 18 Uhr. Das Programm finden Sie hier.
Referenten: Peter Kröner, Jochen Grochtdreis
Wo: Skylounge, München
Preise:
Tag 1: 199 Euro (zzgl. MwSt.)
Tag 2: 599 Euro (zzgl: MwSt)
Tag 1+2: 749 Euro (zzgl. MwSt)
Early Birds buchen beide Tage im Paket für nur 699 Euro (zzgl. MwSt., Anmeldung bis zum 19.08.2011)
Weitere Infos und Anmeldung hier
Neue Formular-Elemente verwenden
HTML5 führt eine Reihe neuer Elemente für Formularfelder ein, wobei unter anderem Schieberegler und Datum-Eingabefelder (so genannte 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…
… im IE6 aber in ein normales Text-Input verwandelt:
Das ist vielleicht für den IE6-Benutzer nicht optimal, hält ihn aber in keiner Weise vom Ausfüllen des Feldes ab. Um Fehler zu vermeiden, gibt man noch das erforderliche Datumsformat an, beispielweise JJJJ-MM-DD. Somit bleiben keine Surfer ausgesperrt, wobei die Nutzer von aktuellen Browsern ein deutlich komfortableres Formular zur Verfügung haben.
Tipp für JavaScript-Anhänger: Wer in jedem Fall einen Datum-Eingabefeld braucht, kann es 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
}
Letztendlich bringt der Einsatz von HTML5-Formularen für alle Surfer Vorteile, die Nutzer von aktuellen Browsern aber genießen bereits mehr Benutzerfreundlichkeit.
data-*-Attribute nutzen
Mit data-*-Attributen kann man unsichtbare Daten in ein HTML-Element schreiben. Das Sternchen steht dabei für eine beliebige Zeichenkette, was bedeutet, man kann eigene HTML-Attribute einführen. 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>
data-*-Attribute verwendet man zur Ausgabe der Informationen im Browser per JavaScript. Die benötigten Informationen baut man am besten noch während der Erzeugung der Seite durch ein PHP-Script ein. HTML5 sieht für die richtige Ausgabe eine eigene JS-Schnittstelle vor. Diese ist zwar noch in keinem Browser implementiert, doch muss kein Hindernis sein: 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 wird mit HTML5 auch Bestandteil des Webstandards-Kanon und keine Nichtstandard-Funktion mehr.
Fazit
HTML5 wurde speziell für interaktive Webapplikationen entworfen und weniger für normale Webseiten wie den Internetauftritt der mittelständischen Beispielmüller GmbH. Die neue Hypertext-Auszeichnungssprache bringt aber Vorteile für Benutzer sowie Entwickler: Die ersten erleben mehr Komfort beim Surfen im Web, für die Webentwickler ersparen sich viele der unnötigen Handgriffe. (Macwelt/mje)