Die Zeit ist reif. HTML 5 fürs eigene Weblog muss jetzt sein. Das Tun ist überall entscheidend…

html 5 hier im Blog geht erstaunlich sensationell gut. Einiges geht nicht durch die Eigenheiten von Textpattern, z.B. wollt ich das Datum brav auszeichnen, aber das wird schon noch kommen. Ich vertrau auf eines der nächsten Textpatternupdates. Es geht bisher alles, was ich unternehmen wollte, es ist großartig. Und erstaunlicherweise funktioniert auch im IE 7 nicht viel weniger als vorher.

Ich bin kein Designer, mein Zugang ist eher ein journalistischer, mit geht es um die Erzählmöglichkeiten mit HTML 5, Auswirkungen auf die Informationsarchitektur, SEO, Semantik und Accessibility.

Die neuen semantischen Möglichkeiten sind wunderbar, alleine schon der wesentlich logischere Einsatz von Überschriften – endlich kann es mehrere Überschriften erster Ordnung in einer Seite geben.

Header

So schaut der neue Header Code jetzt aus:
<header> <hgroup> <h1><a rel="home" href="http://highlyoverrated.info/">highlyoverrated.info</a></h1> <h2>Medien und Ideen</h2> </hgroup> </header>

Und so bisher:
<div id="head"> <div class="sitetitle"> <h1><a rel="home" href="http://highlyoverrated.info/">highlyoverrated.info</a></h1> <span>Medien und Ideen</span></div> </div>

Ich find zwar das hgroup-Element verzichtbar (evtl. ist es das auch), aber insgesamt ist der Code semantisch klarer und schöner zu lesen (=leichter zu verstehen).

Datum und Zeit

Der neue Textpattern-Code fürs Datum pro Blogpost:
<time datetime="<txp:posted format="%FT%T" />" pubdate="pubdate"><txp:posted /></time>
ergibt diesen HTML5 Code:
<time datetime="2010-08-03T23:32:13" pubdate="pubdate">3. Au­gust 2010</time>
anstelle des bisherigen Codes:
<span class="details-top">3. Au­gust 2010</span>

Das heißt, ein maschinenlesbares Datumsformat innerhalb eines semantisch klareren time-Elements.
[Mini-TODO: ich hab es nicht geschafft, ein valides Datum mit Timezone Offset, also der Zeitverschiebung gegenüber der koordinierten Weltzeit zu erzeugen. Ich schaffe ein “+0200”, aber kein “+02:00”]

Alte Browser – es gibt sie noch immer

Ein bisschen layoutierte Darstellung in alten Browsern wäre fein, aber bitte ohne großen Aufwand. Marc Pilgrim erklärt im Detail, wie man dem Internet Explorer einen vernünftigen Umgang mit den neuen Elementen beibringt. Hier nur die quick’n‘dirty Lösung:
Remy Sharp’s HTML5 enabling script – eingebunden als conditional comment für alle Internet Explorer bis zum 9er (via hotlink auf googlecode, somit immer aktuellste Version) im head:
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

Tiefer eintauchen in HTML 5

• Große Empfehlung für Mark Pilgrims Dive into HTML 5
• HTML 5 for journalists (Martin Belam, Guardian)
• HTML 5 Doctor