はてなブログのHTML5

HTML5 Advent Calendarの3日目です。
「HTML5 Advent Calendar」はこんな感じの取り組み。まだ空きがあるので、よかったらどうぞ。

今年は、HTML5もAdvent Calendarやります！
本来のAdvent Calendarとは、12月1日からクリスマスの25日まで、カードに作られた窓を1日に1つずつ開けていくというものです。一方、技術系のAdvent Calendarは、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというものです。もちろん、ここでのテーマは「HTML5」になります。HTML5に関することならなんでもOKです！
このイベントに参加した順番が、そのままブログを公開する日付とします。
是非、みなさん一緒にわいわい楽しんでやりましょう！
HTML5 Advent Calendar 2011 : ATND

11月にはてなブログのベータ版が公開された。いろいろ話題になっていたけど、はてなブログはひっそりとHTML5でマークアップされている。
というわけで、どんなタグがどう使われているのか、簡単に調べてみた。

調べたのはこのエントリ。JavaScriptで動的に作っている部分もあるので、基本的にはChromeのDeveloper Toolsで調べた。

新サービス「はてなブログ」ベータ版を招待制でリリースしました - はてなブログ開発ブログ

こんな感じだった。

ひとつずつみていく。

1. data URL scheme

data URL scheme はHTML5と関係ないけど、CanvasやFile APIなどと合わせて最近よく使われるので、いちおうご紹介。
いちばん上のメニューはiframeで取得していた。その中の画像に data URL が使われていた。画像自体はJSで入れているみたい。

RFC 2397 - The "data" URL scheme

2. header

HTML5で追加された header が使われていた。
見出しにはh1-h6やhgroupがある。headerにはこれらの要素や、メニュー、ロゴ、検索フォームなどをいれてもいい。

3. article

HTML5で追加された article が使われていた。
articleは独立していてそれだけで完結している記事やページで使う。blogのエントリにはちょうどいい。

4. header

また header。さっきのは全体の header で、これは article の中の header になる。独立した記事であれば、その記事の中に header があったりする。
※~~これまで h1 は文書のなかで1つしか使えなかった。~~ HTML5では article のなかでも h1 を使える。このあたりのことは、Dive Into HTML5 にわかりやすく書いてある。article のところに貼ったリンクと一緒だけど、もう一度貼っておく。
ちょっと header の話とは違うけど、いい変更点だと思うのでご紹介。

※はてなブックマークのコメントで以下の内容の指摘を頂いて、そのとおりで僕の記載に誤りがあったため、該当部分に取り消し線をつけました。id:kits さん、ありがとうございます。

HTML4はh1の出現回数を制限してないですよ。/ sectioning content element のおかげで「見出しレベル」を意識することなく各セクションでh1を使用できる、という話だと思う

ちなみに入門HTML5では、以下のような記述になっています。

HTML 4 では、文書のアウトラインを構成する手がかりは <h1> 〜 <h6> 要素だけしかなかった。アウトラインの中に1個だけルートノードが現れてほしければ、マークアップ中には1個の <h1> しか使えない。

5. footer

HTML5で追加された footer が使われていた。これは article の中の footer になる。
footer にはナビゲーションのリンクや著作権表示を含めることができる。
ここではソーシャルボタンやコメントなんかもfooterに含まれている。Dive Into HTML5 の Fat Footer のマークアップはいろいろと参考になる。

6. time

HTML5で追加された footer が使われていた。さいきん一瞬削除されてしまい、すぐに復活したtime要素。
timeのマークアップはこんな感じになっていた。

<time datetime="2011-11-07T07:18:45Z" title="2011-11-07T07:18:45Z" pubdate="" class="updated">26日前</time>

timeでマークアップされた中身のテキストは、人間にとってわかりやすいものでよい。厳密な日時は datetime 属性で指定する。
pubdate 属性は存在すれば、それが公開日時であることを表す。中身は空でもよい。articleの中にあれば、articleのコンテンツの公開日時になり、articleがなければその文書(HTML)の公開日時を示す。

7. aside

HTML5で追加された aside が使われていた。
メインのコンテンツとは関連の薄いものをまとめておくことができる。サイドバーや、広告を入れたりできる。

aside 要素 - セクション - HTML要素 - HTML5 タグリファレンス - HTML5.JP

8. footer

また footer。さっきのは article の footer で、これは全体の中の footer になる。

その他

使われていないけど、ナビゲーション用のnavi を使ってもいいんじゃないかな、と思うところがいくつかあった。

あと data attribute が使われていた。例えばこんな感じ。

<html
  lang="ja"
  data-avail-langs="en ja"

  data-page="entry"
  data-admin-domain="http://blog.hatena.ne.jp"
  data-blog="staff.hatenablog.com"
  data-globalheader-color="b"
  data-author="hatenablog"
  data-version="882a65207392a25facb6a6c6e2d9870a"
  >

独自データ属性 - グローバル属性 - HTML5 タグリファレンス - HTML5.JP

まとめ

普段マークアップすることがあまりないので参考になった。こうやってしっかりとHTMLを読んでみると、いろいろな発見があって面白かった。
HTML5.JP と Dive Into HTML5 のリンクを貼っているけど、実際には書籍を参考にしながらこのエントリを書いた。
「徹底解説HTML5 マークアップガイドブック」はHTML5.JPの羽田野さんが著者でリファレンスとして便利。僕が持っているのはひとつ前のもの。
「入門HTML5」は Dive Into HTML5 の翻訳書で、文章がわかりやすくて面白い。
やっぱり手元にあると、さっと調べられて楽だった。まだ全部読んでないけど。