HTML5 は XHTML5 として XHTML ベースでも書ける

XHTML2.0 のワーキンググループが活動を終了するようです。これに伴って、XHTML2.0 の策定は終了します。 さて、こう聞くと XHTML がなくなってしまうのか、と思われる人もいますが、XHTML の仕様自体は残ります。 XML 構文で書くことで XHTML5 として書くことができるわけです。

また、XHTML と HTML で大きな違いは<img />などの空要素の扱いでしょう。
今回のセッションでは、<img>と<img />は混在できる、ということでした。
なかなかごちゃごちゃしてしまいますが、現状を考えると適切な仕様ではないかなと思います。

HTML5 の新機能

さて、ここからが自分的には本番でしたｗ
まず、DOCTYPE宣言やcharsetの宣言がとてもシンプルになります。

▼DOCTYPE宣言

たったこれだけ。現状、DOCTYPE宣言はブラウザのレンダリングスイッチがメインになっている（特にIE6）ので、長ったらしい URL などは排除されました。

▼charset

こちらもこれだけ。とても短いですね。
これもどうやら元々ブラウザで実装していたのを、そのまま仕様にしたもののようです。

HTML5 で追加された新要素

さて、ここからが HTML5 の目玉です。
HTML5 策定により、かなり色々な要素が追加されました。主要な要素は以下の通りです。

上に書いた要素のうち、<section>や<article>などは"セクショニング" に関するものとなります。
"※セクショニングについては、Session3 の小山田さんのところで詳しく話されていたのでそちらでまとめます。"

HTML5 で追加された新属性

また、新しい属性も追加されました。

スライダー要素。現在では JavaScript を用いて実装していますが、 HTML5 からはブラウザがネイティブに対応するのでとても使いやすくなります。

こちらも現在は JavaScript で実装しているものですね。

よく見かけるカレンダーを使っての日付入力用の要素です。

登録フォームなどで「必須」と書かれている項目などがありますが、HTML ベースで必須を定義することができるようになります。

検索フォームなどでよく見かけますね。あらかじめどんな単語を入力したいかのサンプルに使います。
現時点でも Safari などが対応しているので、JS を使って実装するまでもないけど、という場合に さりげなく仕込んでおくというのもいいかもしれません。

勧告とは

現状、CSS2.1 もまだ "勧告候補" に過ぎません。
勧告の定義は、「仕様がすべて実装され、すぐに使える状態になっていること」ということのようです。
なので HTML5 が "勧告" になるにはまだまだ時間がかかりそうです。

ですが、上でも書いたように CSS2.1 もまだ "勧告候補" にしか過ぎませんが、現状では誰もが使用しています。
HTML5 も勧告を待つ前に、各ブラウザの実装状況によって実装されている機能使っていけばいい、ということでした。

ただ注意として、まだ仕様は策定段階だ、ということ。
なのでこれらの定義や内容が後々変わってしまうこともあるかもしれない、ということに注意が必要です。
中には「<articel> と <section> を区別する必要があるのか？　いっそ <section> を削除しては？」という意見も出ているとのことで、もしかしたら今後、削除されないにしても現在の定義が変更される、といったことはありえるかもしれません。

使用する場合は、そういったリスクを覚悟して使いましょう、ということでした。
ちなみに、実装状況など最新の情報を得るには以下のサイトが参考になります。

このセッションで知った考え方として、「Progressive Enhancement」というものがありました。
簡単に言うと、各ブラウザの実装状況に応じて先進的なものを使いながら、古いブラウザに対してはなくてもいい要素は思い切って諦める、というような内容でした。
個人的には角丸など、絶対に再現しなければいけない要素でない装飾的な部分に関しては、border-radius を遣うなどして実装しつつ、対応していない IE6 などは角丸を諦めてもいいのかな、と思ってます。

（twitterですでに、つぶやき部分の背景に使われていたりします（IE6で見ると角丸ではない））

キャッシュマニフェストファイルでアプリケーションキャッシュを定義

その中で個人的に興味があった（そして初めて知った）のが、キャッシュマニフェストファイル（.manifest）。 これで定義されたファイル（HTML や CSS、JS、imageなど）がローカルにキャッシュされ、オフラインでも使えるようになる、というもの。
またオフラインでの利用以外にも、ほぼ変更されないものをローカルに保存しておくことで、http 通信を減らせる、というメリットもあるようです。

ただ注意点として、このマニフェストファイルでのキャッシュは相当強いらしく、ブラウザのキャッシュクリアを実行しても削除されなかったようです。なのでテスト環境ではマニフェストファイルを定義せず、本番になるときに使うほうが開発がスムーズなようです。
"※あとで調べてみたところ、マニフェストファイルを 1 バイトでも変更すると書かれている内容のファイルをキャッシュし直すようです。"

ちなみにマニフェストファイルの埋め込みは以下のように指定します。

またマニフェストファイルは「.manifest」という拡張子で配信されるのが通例で、MIMEタイプも「text/cache-manifest」となるため、サーバ側での設定も必要です。.htaccess などに適切に設定する必要がある点に注意が必要です。

定義方法については、マイコミジャーナルの記事が参考になりそうです。
詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編

セクショニングコンテンツ要素

セクショングルート要素

セクショニングコンテンツ、セクショニングルートとは？

セクショニングとは、つまりアウトライン（目次）を明示することです。

のように、文書は大まかに見出しでアウトラインを取ることができます。
これらを明示できるようにする要素が、上記で書いた新要素の主な役割となります。

このアウトラインという考え方は、実は HTML4.01 でも存在しています。
現状のものでアウトラインを考えると、見出しレベルによってアウトラインが生成できます。

※amachang さんが作られた、HTML からアウトラインを抽出するブックマークレットが公開されているので そちらを利用してみるとより理解しやすいと思います。

さて、現状でもアウトラインを生成できる、と書きましたが見出しレベルでのアウトラインにはやはり無理があるようです。
以下のような HTML があった場合、最後の p 要素がどこに属しているか判別しづらくなります。

しかし、これを HTML5 で書き直してみると以下のようになります。
最後の p 要素がどの見出しの内容になるのか一目瞭然ですね。

セクショングコンテンツ内は見出しレベルをリセットできる

またこのセクショニングコンテンツにより、"見出しレベルをリセットできる" という点も大きいメリットです。
セッションを聞いていて「なるほど」と思ったのが、セクション単位でのモジュール化がしやすい、ということでした。例えば、

という構成があったとします。
現在の HTML では見出しレベルは順序があります。
h2 要素の下に h1 要素があるのは変ですよね。

しかし、セクションを明示したことによって "そのセクションの最初の見出し" という位置づけになるため、 見出しの階層構造は保たれます。これがリセットできる、ということです。

さて、リセットできるとなにがいいのか。
上記の構成を 1 つのモジュールだとします。
HTML5 であれば、セクショニングコンテンツ内の見出しはその中であればなんでもいいとされています。
（h3 要素で始まっても、その後が h4, h5 となっていれば始まりはなんでもよい）

つまり、このままコンテンツとして組み込めるわけです。
そうなれば、とあるセクションの h1 はこのスタイル、といったように CSS の適用もしやすくなります。

また、前後の hn 要素の数字を気にする必要がないのでそのまま挿入することも可能です。 これが、見出しレベルをリセットできることのメリットです。

セクショニング以外の要素はグルーピング要素

さて、HTML5 で追加された要素はまだ他にもあります。
その中で、このセッションを聞くまで使い道がよく分かっていなかった要素に <hgroup> がありました。

これの使い道は、簡単に言うと「無駄なアウトライン生成を抑制する」というもの。

hgroup は見出し要素をグルーピングする

言葉だけだとイマイチ分かりづらいと思うので以下にサンプルを書きます。

上で、見出しレベルでもアウトラインが生成されると書きました。
これをアウトラインとして見ると

となります。
しかし、大見出しに対してのコンテンツは一切ないことになりますね。
サイトタイトルとサイトサブタイトルはそれでひとつとする場合がほとんどだと思います。
なのでこれを HTML5 的な書き方にすると

となります。 これのアウトラインを取ると

というアウトラインになります。すっきりしますね。
これが、hgroup の使い方だそうです。

header, footer もグルーピング要素

最後に header, footer の説明です。
こちらもセクショニングではなく、グルーピング要素です。
また、単語からイメージされるサイトのヘッダーやフッターに留まらず、各記事にもヘッダーやフッターに当たる要素がある場合があります。

そうした要素に対しても、グルーピングとして繰り返し使用ができるものとなります。
例えば、

のようにして、ヘッダー部分をまとめたり、といったことに使用できます。

新要素にはデフォルトスタイルが存在しない

最後に、HTML5 で追加された新要素には、p などに最初から適用されている margin や display: block などの設定がありません。
そのため、なにも指定しないと display: inline としてレンダリングされるため、それぞれに display: block などのスタイルをあらかじめ設定しておくと直感的にコーディングが進められると思います。

最後に

さて、いかがでしょうか。
各セッションを聞きながらのメモをベースに書いたので、間違っている部分もあると思いますが、もし気づいた方は指摘いただけると助かります。

今回のセッションで、かなり HTML5 についての知識が増えました。
まだ参加したことがない人がいたら、機会があれば CSS Nite、参加してみるととてもいい勉強になると思います。