このサイトを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情報サイト」がとても参考になります。


PAGE UP