HTML5の基本（成り立ち・哲学・導入）

2011年頃からWebページはHTML5で書いてますが、仕様も更新されたりして自分の書くソースもちょっとずつ変化してきてます。自分のカンニングのためにHTML5のリファレンスサイトも作ったりしてますが、復習と理解を深めるためにこっちでも覚え書きしてこうと思いますた。まずは開発者の入門書を参考に「HTML5の基本」ということで。

1. 資料

ソース。英語サイトはわからないので日本語訳をアテにしたり翻訳にかけながら確認してる程度です、すいません。

W3Cによる公式のスナップショット

今のところ、HTML5の現バージョンhttp://www.w3.org/TR/2014/REC-html5-20141028/を参考にしています。最新のHTMLバージョンや編者ドラフトは上のページの中にあるリンクをご確認ください。

WHATWG関連

HTML5の開発に携わった方々の運営するサイトです。個人的には、W3C仕様書よりこういった方々の（下記入門書にて得た）開発の経緯の話の方が理解に役に立っています。

日本語訳

HTML5の日本語リファレンス老舗サイト。タグリファレンスなど本家の訳を中心に解説が掲載されてます。運営者の方のフリーCGIは、Web制作を始めた10年くらい前から愛用してます。

HTML5入門

HTML5の開発に当初から携わってきたブルース・ローソン氏、レミー・シャープ氏という方による入門書（第2版）です。2012年の本なのでAmazonでも中古しかないみたいです。入門書といってもタグリファレンスのような形式張った解説はなく、ウザいアメリカン・ジョークが盛り込まれた砕けた本です。これに書いてあるHTML5の成り立ちや哲学は、新しいタグやセマンティックな構造を理解する上で大きな助けになります。原著のAmazonのレビューも概ね高評価なようです。

2. HTML5の成り立ち

こちらは入門書の内容を参考に、おおいに端折って説明。

1998年、Webの標準化団体W3Cは、SGMLという国際規格に則って作られていたHTMLの進化を「4.01」でやめて、代わりにXMLの規格に沿ったXHTMLの進化を選択しました。それまでのHTMLの柔軟な書き方が許されるXHTML Transitionalは、より厳格なXMLの記法を必要とするXHTML Strictへの移行を補助するために設計されました。

しかし、続いて仕様策定が始まったXHTML2.0は、ずっと倫理的で後方互換性を無視したものでした。そんなXMLがWebの未来とはどうしても納得できなかったOpera社のある小さなグループが、HTMLの枠組みの拡張に取り組み始めました。

その仕様はWeb Forms 2.0となってその後HTML5の仕様としてまとめられます。このプライベートなグループは、その後Appleが横から応援する形で参加し、今のWHATWGとなりました。

2006年、W3Cは「やっぱいきなり『名前空間ちゃんとしろよ』とか『XMLからやりなおせよコラ』とか言うたってうまくいかんわ！急にXHTML（2.0）とかどだい無理！HTMLやっぱえぇわぁ」的なことを言い出しました。そこで目を付けたのがWHATWGのHTML5。「ふぅん、HTML5ってのコレ？イイね、採用しよ！」ここからHTML5の、W3CとWHATWGの両方で開発されるという奇妙なプロセスが始まりました。

その後はみなさん知っての通り、W3Cがノリノリで作った（かどうか知らんけど）ロゴとともにHTML5は急速に知られるものとなります。まぁこんな雰囲気の経緯があったらしく、今でもW3CとWHATWGの両方でそれぞれ仕様の違うバージョンが存在するという状態になっているようです。

ちなみにWHATWGの元祖の方はバージョン「5」をなくしてHTML Living Standard（生きている標準）という表記に変わっています。詳しく見てないから知りませんがW3Cの公式に比べるともっと実験的なアイデアを含んでいて、すぐ使っていいよってものではないそうです。

2. HTML5の哲学

こちらも入門書を参考に。HTML5には以下のように一連の設計原理が提示されています。

  1. 現在のブラウザの動作を互換性のあるものとして規定する
  2. 初めてエラー処理を定義する
  3. 言語を進化させてWebアプリのオーサリングをより容易なものにする
HTML Design Principles

例えば<font>、<center>のような古いタグや<b><span></b></span>のような間違った文法が残ったWebページは世の中に無数に存在します。それらを見れなくなってしまうのも困るので、最近のブラウザでもこういった乱れたHTMLをキレイにレンダリングしてくれるようになっています。

エラーを見つけるとそこでレンダリングをストップしてしまうことが求められるXMLなら問題になりませんが、これら柔軟な文法を許しつつ新しい技術を導入できるようにするためには、不適切なマークアップにぶち当たった時、どのブラウザでも一貫性のあるDOM生成とエラー処理を行う必要があります。

HTML5は、今までブラウザによってまちまちだったこの辺りの処理を「仕様で定義」して、どのブラウザでも全く同じDOMが生成できるようにしました。また、XMLHttpRequest（XHR）などたくさん使われているのに標準化されていない重要な技術、リバースエンジニアリングに頼っていたものを明文化するようにしました。

これら「既存のWebページを壊さない」よう配慮された互換性に加えて、将来的にも特定のベンダーに頼らずWebアプリケーションの構築を容易にするために「時代によって必要なものは変わるだろうから進化させていくよ」というスタンスがHTML5の特徴だと言えそうです。

ところで、前にどっかで「HTML5でXHTMLの書き方（<br />のような単独タグのスラッシュとか）は許しちゃくれているが必要ない」的な記事を見つけましたが、そんなことはありません。XHTMLの単独タグの「/」の前の半角スペースは元々XMLの記法に対応していない環境向けであることに由来しますが、HTML5では、必要であればMIMEタイプをXMLとして吐き出せるXHTML5にできます。これもXHTMLを引き継いでXMLフォーマットを維持できる後方互換性の一つだと思います。

4. HTML5の導入

別にHTML5を使うからと言って、急に<header> 要素や<footer> 要素が必要なわけではありません。今まで使ってなかったんならそのままでもいいんじゃないですかね。例えば既存のページをHTML5に変えるなら、とりあえず「DOCTYPE」を書き換えます。 

<!DOCTYPE html>

これだけです。URLが入ったような面倒な属性はありません。これはブラウザに標準モードをトリガーさせるための最短の文字列です。「DOCTYPE」を大文字にすることでHTMLとXMLの両方に対応させることができます。

ただし、既存のページをHTML5に換装する場合、古いブラウザで見たり標準モードへの変更によって今までと少し違う表示や挙動になる可能性があります。また、HTML5にはフレームがないのでフレームのページは換装できません。注意してください。

HTML5では文字コード指定のメタタグに少し変更がありました。こちらも記述は単純になっているので、差し替えておくといいでしょう。文字コードはUTF-8が推奨されています。

<meta charset="utf-8">

こんなタグすら差し替えるのが面倒ですって？ならとりあえずそのままにしておいてください。一応今まで通りの書き方でも文字コード指定は生きます。

何年か前まではHTML5といえば新しいAPIやタグのことばかり書いた記事が多かったです。今でも「HTML5とCSS3（＆SVG）でなんたらかんたら」みたいのは多いですね。HTML5は活躍がWebに留まらないので仕方ありませんが、無理してWebページに使う必要はありません。必要であれば引き続きIE6〜9、ネスケ、IE5forMacの対策もできます。上で紹介した入門書にも皮肉たっぷりにこう書かれています。

HTML5入門 より
HTML5の世界は、現在かなり速く動いています。
（中略）
HTML5に対するサポートは（中略）拡充し続けています。
（中略）
新しいブラウザーの機能はとても刺激的なものなので、ブラウザーのHTML5サポートをテストするためと称したWebサイトを作成する人もいます。そうした人のほとんどは、仕様から乱暴に取り出して混ぜ合わせ、HTML5をチェックし、Web WorkersなどのWHATWG由来の仕様を取り出し、酔っ払って目が回るような流行語を並べ、WebGL、SVG、W3C File API、Media Queries、さらには鳴り物入りのApple独自の技術を投げつけて過呼吸になり、倒れ込むように寝てしまうのです。
　そうしたサイトのことは、あまり気にしないでください。（中略）彼らのHTML5に関する描写は無意味で、誤解を招きやすいものです。

HTML5では分かりきっているので書く必要がなくなったものがあります。例えば、<script>のtype="text/javascript"属性、<link>のtype="text/css"属性など。ただし、後方互換性に配慮されたHTML5、書いてはいけないわけではないのでメンドイならとりあえずそのままで大丈夫です。

「HTML5の導入」といってもこれだけです。その他の新しいタグや技術は「書くのがラク」とか「SEOに良い」とか「少し速い」とか、徐々にやっていきましょう。

今度からは新しいタグについてとか書いていこうと思うのでまた記事追加したいと思います。そいではさようなら。