WWW WATCH

今のところすぐに HTML5 を使う理由もないので、実際に HTML5 でソースコードを書いてみるってことをしていなかったのですが、思い立って簡単に書いてみました。この Blog のトップページを HTML5 で再コーディングしたらどんな感じかなということで、今ある構成要素をほぼそのままに、HTML5 でサンプルを作ってみました。

HTML5 サンプル

見ていただければわかりますが、超適当です。スタイルもさすがに全くなしっていうのもなんですので、最低限のレイアウトだけ適当に当ててあります。

一応、IE でもスタイルが当たるように、「HTML5 enabling script」 を読み込んでいます。JavaScript が無効だと意味ないですが、まぁあまり細かいことは気にしない方向で。JSファイル 1つ読み込むだけなので簡単ですね。

あとは、現状である程度確定してきた仕様書をベースにコーディングしていますが、aside 要素の使い方とかちょっと悩んだり、section 要素の使いどころも微妙だったんでメインコンテンツでは使わなかったり、microdata 使おうと思ったんだけどちょっと見送ったりなどなど。ちなみに元から付けてる microformats はそのままに。

HTML 5 Outliner でアウトラインを確認すると下記のような感じ。nav や aside 要素で見出しを入れていないところが Untitled Section になっていますが、特に問題はないかなと。

1. WWW Watch
   1. Untitled Section
   2. Untitled Section
   3. エントリーのタイトル1
   4. エントリーのタイトル2
   5. エントリーのタイトル3
   6. エントリーのタイトル4
   7. エントリーのタイトル5
   8. Untitled Section
      1. Recent Entry
      2. Archives
      3. Categories
      4. Tagcloud
   9. site search
      1. Advertisement
   10. Untitled Section
       1. recommended
       2. Playlist
       3. Photo

あと、サイト内検索の入力フォームに placeholder 属性とか使ってみました。Safari と Chrome でしか動作しないですが、地味に便利ですね。

また、CSS が有効だと表示されないですが、nav 要素を使ってスキップナビも設置してみたり。ブラウザがもっと賢くなれば、こういうのなしにページ内の各ナビゲーションやコンテンツを適切に見つけ出して誘導してくれるようになるのかもしれないですね。

今回作ってみたのは Blog のトップページですが、個別記事ページとかだとまた多少変わってくるんでしょうね。もう少し検証とかしつつ調べてみようと思います。

参考エントリー
HTML5 を学ぶための情報源まとめ