このサイトをHTML5で記述

このサイトをHTML5で書き直しました。リスクもある程度承知していますが、今は自分のサイトでしかできないように思うので半ば実験的に。と言っても特に複雑なAPIを使う訳でもなく、ただ仕様を変えたというだけです。

通常のXHTMLからHTML5への移行は案外簡単。Googleのトップを見るとわかりますが、むしろ緩くなっている部分も多い（びっくりするくらい省略できる）ので、せいぜい新しい要素をJavaScriptとCSSでカバーするくらいです。以下、移行手順を簡単に。

1. IE6などに新しい要素を教えるJavaScriptを用意
   （参考：HTML5 を IE や Firefox 2 でも使えるようにする方法）
2. 正しくマークアップ
   使いたくなる要素がたくさんあります。ただし使い方が分かりにくい、あるいはまだ仕様が流動的に思える要素は無理に使いません。でも例えば「関連する記事」に「aside」を使うのはありだと思いました。
   それからXHTML流の記述（<br />）は今のところ敢えて残します。HTML5でもOKとされていて、将来のXHTML5にも流用可能なため。
3. スタイルを調整
   新要素を「display:block;」にします。それからHTMLを書き直しながら思ったのは、IDやクラスの使い方をXHTML時点で意識しておくと移行が楽だという点。例えば「<div id=”header”>」を「<header id=”header”>」とするだけで、スタイルを変えずに済む場合があります。コツとしてCSSに要素を記述しないこと（×「div#header」→○「#header」）。この辺、今後のお仕事でも意識します。
4. JavaScript内を調整
   jQueryでは一部指定できない新要素もありました。マークアップが変わっているので、jQueryに限らずJavaScript内も一通りチェック。このサイトではjQueryのプラグイン「ScrollTo」で「header」要素への指定が上手く行きませんでした。

正式な勧告までしばらく動向を追いかける必要がありますが、「HTML5.JP – 次世代HTML標準 HTML5情報サイト」がとても参考になります。