26.08.09 // Wer heute schon HTML5 einsetzen sollte

Fast niemand. HTML5 wird von keinem Browser aktiv unterstützt, es geht im Moment nur nichts kaputt1. Das ist eine tolle Sache, eignet es sich doch für Experimente wie diese Seite hier oder für das ein oder andere Experiment zum Beispiel mit den audio und video-Elementen.

Alle, die nicht experimentieren wollen oder können, zum Beispiel bei Projekten für Kunden oder den Arbeitgeber, sollten HTML5-Features nur ganz, ganz sparsam einsetzen und nur Teile, die sicher2 sind (Es folgt eine Auflistung).

  • <!DOCTYPE html>
  • style und script-Elemente ohne type-Attribut

Alle anderen Dinge haben in aktuelleren Browsern die eine oder andere Nebenwirkung oder funktionieren nicht. Wer sich mit der Semantik der neuen Elemente auseinandersetzen will (article usw.), der möge auf divs mit Klassen zurückgreifen, die zuverlässig funktionieren. (Außerdem empfehle ich durchgehend XML-Syntax.)

Übrigens wird gerade extrem in der Spezifikation ausgemistet und gearbeitet, sie soll nämlich im Oktober als Candidate Recommendation erscheinen. Da kann sich also noch einiges ändern. Eines der letzten Opfer beispielsweise ist das datalist-Attribut.

1 Außer im IE und im Firefox < 3, da geht’s kaputt.

2 Im Sinn von „ohne JavaScript in Browsern funktionieren“

Kommentare ()

  1. Link zu diesem KommentarDieter

    26. August 2009, 07:39 Uhr

    Das nenne ich einen hilfreichen Blogbeitrag. Da werde ich mich doch mal mit den HTML5-Features, die schon frei von Nebenwirkungen sein sollen sowie mit der passenden Benennung von DIVs beschäftigen.
    Danke!

  2. Link zu diesem KommentarJens Grochtdreis

    26. August 2009, 07:42 Uhr

    Danke für diese wichtige Klarstellung. HTML5 ist noch in der Diskussionsphase, ist noch im Entstehen. Der Hype, der darum gerade entsteht, zeigt in meinen Augen aber deutlich, daß es einen sehr starken Bedarf nach etwas Besserem, als HTML4/XHTML1 gibt.Deshalb ist es veständlich, daß möglichst jeder ausprobieren will, was geht. Neben recht albernen Byte-Sparmaßnahmen durch die kürzere DTD kann man nicht viel heute wirklich bei Kundenprojekten nutzen. Also wird sich alles auf Blogs und kleinere Seiten konzentrieren. Damit haben wir schon kleine Praxistests, ohne daß es jemandem weh tut. Das finde ich gut.

  3. Link zu diesem KommentarNils Pooker

    26. August 2009, 08:10 Uhr

    Klare Ansage, danke.

    Ich teile Deine Einschätzung: Wer HTML5 für eine möglichst große Zahl an Nutzern einsetzen will, sollte definitiv warten, und das wohl noch lange. Nur den Doctype zu ändern und auf ein type-Attribut zu verzichten, um zu sagen, es ist HTML 5, das macht angesichts der tatsächlich neuen und logischen Elemente in meinen Augen eigentlich keinen Sinn.

    Das gilt nicht für Experimente in Form von Blogs und Webseiten, die nachweislich nur von Webentwicklern oder Nutzern mit modernsten Browsern betrachtet werden, wenn dieser Nachweis überhaupt so klar definiert werden kann. Hier kann man – wie deine eigene Seite zeigt – ruhig etwas wagen. So gesehen, ist HTML5 nicht praxistauglicher, als die ersten CSS 2-Experimente von csszengarden vor einigen Jahren: spannend, neu – aber nix für die Massen.

  4. Link zu diesem KommentarMartin Kliehm

    26. August 2009, 08:26 Uhr

    Darüberhinaus bin ich geneigt, gerne mal einen Anchor als block-level Element einzusetzen, was in HTML5 erlaubt ist. Das ist öfters gewünscht und sehr praktisch: <a> <h2>Titel</h2> <img /> <p>Text</p> </a>

    Oder Geolocation, wobei das aus HTML5 ausgegliedert wurde und wunderbar mit Progressive Enhancement funktioniert.

  5. Link zu diesem KommentarMichel Balzer

    26. August 2009, 08:36 Uhr

    Meintest du nicht mal, dass die kurze Angabe des Zeichensatz’ auch geht?

    <meta charset=“utf-8” />

    Danke für die Aufklärung!

  6. Link zu diesem KommentarEric Eggert

    26. August 2009, 08:50 Uhr

    @Martin: Ja, wenn es denn funktionieren würde :/ Zitat Eric Meyer:

    “What I didn’t want, though, was the randomized layout weirdness that resulted once I started styling the descendants of the link. Sometimes everything would lay out properly, and other times the bits and pieces were all over the place. I could (randomly) flip back and forth between the two just by repeatedly hitting reload. I thought maybe it was the heading elements that were causing problems, so I converted them all to classed paragraphs. Nope, same problems. So I converted them all to classed spans and that solved the problem. The layout became steady and stable.”

    @Michel: Meine Erfahrung zeigt leider, dass Browser das doch gerne noch ignorieren. Und online schickt man ja eh das Charset mit dem Server…

  7. Link zu diesem KommentarSiegfried

    26. August 2009, 09:35 Uhr

    Übrigens, wenn man xhtml verwendet, und die Klassennamen der divs (und anderer Elemente) passend wählt, kann man später ein einfaches xsl Stylesheet auf die Seiten anwenden und erhält html 5.

  8. Link zu diesem KommentarOliver Schwarz

    26. August 2009, 13:12 Uhr

    Prima! (grrr) Habe ich doch kürzlich in einem eigenen Blogeintrag die Verwendung von HTML5 propagiert :) Aber es stimmt was Du sagst. Der Einsatzzweck sollte differenziert analysiert werden und bei prinzipiell “wichtigen” Webseiten für Kunden oder Arbeitgeber hört der Spass auf.

    Dennoch halte ich an meinen Argumenten fest: Je mehr Entwickler sich bei sideprojects und kleineren Experimenten oder privaten Seiten mit dem Thema HTML5 auseinandersetzen, umso grösser wird das Feedback, umso facettenreicher wird der Erfahrungsaustausch und umso stärker wird die Notwendigkeit für eine stetige Weiterentwicklung für – sowohl – Browserhersteller, als auch das HTML5-Team. Das sollte bei Deiner “professionellen” Betrachtungsweise nicht vernachlässigt werden.

  9. Link zu diesem KommentarFrancesco Schwarz

    26. August 2009, 13:34 Uhr

    Wieso empfiehlst du XML-Syntax? Optional tags gibt’s ja z. B. auch schon in HTML 4, hat ja weniger was mit HTML 5 zu tun, oder täusch ich mich da?

  10. Link zu diesem KommentarThomas Scholz

    26. August 2009, 13:36 Uhr

    Einige der neuen Input-Typen kann man heute schon verwenden. Browser, die das nicht verstehen, verwenden automatisch type=“text”. Auch die meisten anderen Attribute sind schlimmstenfalls wirkungslos und daher schon jetzt einsetzbar: maxlength, pattern und step beispielsweise.

    Eric, welcher Browser versteht denn die kurze Charset-Angabe nicht?

  11. Link zu diesem KommentarAndreas Fritsch

    26. August 2009, 20:28 Uhr

    Seiten, die als xhmtl ausgeliefert werden, erlauben auch Inline-SVG. Durch die immer bessere SVG-Darstellung in den Browsern ergeben sich dadurch Möglichkeiten, die HTML5 so bisher nicht bietet.

  12. Link zu diesem KommentarEric Eggert

    26. August 2009, 21:37 Uhr

    @Oliver: Ja, man muss das differenziert von Fall zu Fall sehen. Und ja: Experimentieren ist erlaubt.

    @Francesco: Aus Konsistenzgründen. Tags weglassen usw. empfehle ich wirklich nur Leuten, die sich der Nebenwirkungen bewusst sind. Ich selbst lasse nur die selbst-schließenden Elemente ohne abschließenden Slash, also <img>, <meta> usw.

    @Tomas: Eigentlich gehen die Input-Typen nur im Opera, das reicht mir (noch) nicht um mich wirklich damit auseinander zu setzen. Das ich das mit dem @<meta>@ jetzt nicht mehr nachvollziehen kann ist ja auch klar. Ich werd das weiter untersuchen müssen.

    @Andreas: HTML5 erlaubt inline-SVG ebenfalls, wenn ich mich recht erinnere. Hilft aber nix, der IE kann weder XHTML5 noch SVG.

  13. Link zu diesem KommentarThomas Scholz

    27. August 2009, 00:55 Uhr

    @Eric: Safari kann immerhin type=“search” und type=“range”, und in Opera empfinde ich die neuen Typen als echte Hilfe. Insofern: Man kann sie durchaus jetzt schon einsetzen.

  14. Link zu diesem KommentarAndreas Fritsch

    27. August 2009, 17:20 Uhr

    Inline-SVG wird von Safari und Co nur interpretiert, wenn der mime-Typ application/xhtml+xml verwendet wird (c’t Beispiel ).

    Für den IE braucht man natürlich einen workaround .

  15. Link zu diesem KommentarJeremy Keith

    31. August 2009, 14:05 Uhr

    Heutzutage benutz’ ich:

    • HTML 5 doctype,
    • meta charset=“utf-8”,
    • style und script ohne type,
    • Klassen nach HTML5-Elementen genannt,
    • input type=“search”

    …und das war’s.

    Die HTML5-Klassen find’ ich besonders hilfreich als Vorbereitung fuer den Tag, an dem die Spezifikation fertig ist.