1. HTML5 in der Praxis – Erfahrungen einer Erstimplementation

    Stefan · 27.10.09, 00:31 Uhr · HTML5, Programmierstil

    Das HTML5 ein aktuelles Thema ist, ist nicht mehr zu übersehen. Neben Youtube (komplette Demo Seite für HTML5), GoogleMail und Apple (Promovideos mit Video-Tag gelöst) gibt es zahlreiche andere Demo Seiten im Netz, die sich mit HTML5 beschäftigen.

    Eines Vorweg: HTML5 ist leider noch lange nicht vollständig in den Browsern implementiert, da HTML5 derzeit noch den Status „draft“ besitzt, sprich noch in Bearbeitung ist. Nichts desto trotz kann man verschiedene Features bereits heute nutzen. Daher hatte ich vor kurzem beschlossen, eines unserer neuesten Blogs auf HTML5 zu programmieren.

    Warum?

    Neben den ganzen neuen schönen „fancy“ Features wie Canvas oder dem Video-Tag, geht es uns derzeit vorrangig um die Semantik des Quelltextes. Wir wollen vor allem herausfinden, wie Suchmaschinen auf den neuen Quelltext reagieren. Semantik spielt bei Websites eine immer größer werdende Rolle, da man Inhalte noch besser bestimmen kann. Auch wir experimentieren, wie jeder größere Verlag, mit so genannten Content-Pools, die bei uns produzierte Inhalte zentral speichern, normalisieren und wiederverwerten können. Gerade dort spielt Semantik eine große Rolle, um z.B. festzustellen um was für einen Typ Inhalt es sich tatsächlich handelt.

    Unterschiede zu HTML4/XHTML

    Eine detaillierte Übersicht über alle Unterschiede findet man auf der entsprechenden w3 Website. Die wichtigsten neuen Tags kurz dargestellt:

    • section (allgemeiner Tag, der verschiedene Bereiche definiert. Er löst größtenteils das div ab)
    • article (Tag zum kennzeichnen wann ein Artikel beginnt und endet)
    • aside (Informationen die zu einem Artikel gehören aber ausserhalb des Layouts platziert sind, z.B. Infoboxen)
    • hgroup (Tag zum logischen gruppieren mehrerer Überschriften)
    • header (Bereich der einen Seitenkopf definiert)
    • footer (Bereich der eine Fußzeile definiert)
    • nav (Bereich der eine Navigation enthält)
    • figure (Container der Beschreibungstexte logisch einem Media-Element zuordnet, z.B. Bildunterschriften zu einem oder mehreren Bildern)
    • video (Video-Container)
    • audio (Audio-Container)
    • time (Tag der einen genauen Zeitpunkt/-raum definiert)
    • canvas (Ermöglicht dynamisches Rendern von Grafiken)
    • details (Zusätzliche Details die ein uns ausgeblendet werden können)

    Daneben besteht die wohl auffälligste Änderung in der Erweiterung der Formularelemente. Ganze 13 neue Input-Type Attribute sind hinzugekommen, die vor allem dazu dienen, Browsereigene Widgets (wie Kalenderauswahl) und Plausibilitätskontrolle (z.B. ob es sich um eine korrekte E-Mail oder URL handelt) bereits vom Browser vorzunehmen. Das Ganze macht zwar serverseitiges Überprüfen nicht überflüssig, allerdings kann man dem Benutzer direkt, ohne Zuhilfenahme von Javascripts, Rückmeldung bei Fehlern geben. Gerade die Form-Elemente sind noch sehr spärlich in den aktuellen Browsern implementiert. Wie immer ist der Opera Browser momentan am weitesten mit der Implementierung, allerdings ist der Verbreitungsgrad eher sehr gering. Ebenfalls zu Erwähnen sind die erweiterten Attribute, so ist es jetzt z.B. möglich, auf dem Submit-Button die Form-eigenen Attribute wie method, action etc zu überschreiben. Somit muss man sich nicht mehr verrenken, um z.B. einen Vorschau-Button bei einem Formular neben dem Absenden-Button in nur einem Form-Tag zu platzieren. Auch gibt es jetzt das placeholder-Attribut, das dafür Sorge tragen soll, dass vorausgefüllte Formularfelder nicht im value-Attribut stehen und bei Klick ins Formularfeld entfernt wird. Das wird derzeit leider nur von Opera und Webkit-Browsern (Google Chrome, Safari4, Webkit) unterstützt.

    HTML5 in der Praxis

    Zuerst fällt auf: Viele der neuen HTML-Tags sind in den meisten Browsern problemlos zu nutzen, da sie unbekannte Tags einfach wie einen span-Tag definieren (Achtung, CSS-Stil display:Inline!). Einzige Ausnahme ist da mal wieder der Internet Explorer, der es selbst in Version 8 nicht schafft, ohne nachzuhelfen die Tags korrekt zu interpretieren. Peter Kröner hat da einen sehr schönen Artikel geschrieben, was jetzt bereits genutzt werden kann und welche Macken der Internet Explorer macht. Mit einem kleinen Javascript Snippet ganz am Anfang des Head-Bereichs bekommt man auch den Internet Explorer dazu, HTML5-Tags zu verstehen.

    Hat man bereits in HTML4/XHTML versucht, sauberes HTML zu schreiben, sollte der Rest kein Problem und kaum Umstellung bedeuten. Die gewohnten Optimierungstipps für Website-Frontends z.B. auch in den Firefox-Extensions page speed und yslow erklärt) gelten auch hier: HTTP Requests minimieren (z.B: durch Nutzung von CSS-Sprites), Expires Header nutzen, Scripte und CSS extern einbinden, CSS schlank und mit möglichst wenig Unterselektoren definieren, etc. Das komplette Programm würde diesen Blogbeitrag sprengen. Wen das Thema Fronten-Optimierung interessiert, dem sei dieses Buch ans Herz gelegt.

    Das schöne Vorweg: Durch die Vielzahl neuer Tags ist es viel einfacher, die CSS-Klassen und -Ids im Quelltext zu reduzieren. Wichtig: Am Besten man definiert vorab in der ersten Zeile, dass alle neu verwendeten Tags das Attribut display:block erhalten, damit diese sich in den Browsern wie DIV-Elemente verhalten (also immer die komplette Breite zum übergeordneten Element einnehmen). Danach einfach wie gewohnt weiterarbeiten.

    Damit wäre das Grundlayout eigentlich schon komplett in HTML5 abgedeckt. Um auch die ganzen Komfortfeatures z.B. der Formularelemente in allen Browsern zu simulieren, muss man momentan noch Javascript einsetzen. Wie der HTML5-Code anhand eines Beispiels mit einigen Komfortfeatures aussehen muss, erkläre ich in einem weiteren Post.

  2. Kommentare

    1. Stephan Salat · 02.03.10, 21:50 Uhr

      Super Beitrag zum Thema! Hat mir sehr geholfen den Einstieg in HTML5 zu finden. Vor allem bietet HTML5 so viele Möglichkeiten, dass man es wirklich auf dem Schirm haben muss. Bin jetzt mal gespannt wie es SEO seitig performt.

  3. Kommentar schreiben

    XHTML: Du kannst diese Tags nutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Gehe zur polyCODER Startseite