「Chrome+HTML5 Conference」のデザイントラックにおける羽田野太巳氏（HTML5.JPを運営）のセッションでは、「HTML5はHTML4と比較すると新しい機能が数多く実装されており、多くのブラウザがこれに対応している。だからこそ開発者/デザイナーは、旧要素も含めてすべての要素に目を通してほしい 」と訴えかけました。
羽田野氏はHTML5に関する最新情報や、チュートリアルおよび仕様の日本語訳を自身のサイトで積極的に公開するなど、国内におけるHTML5の普及/促進を進めてきた中心人物のひとりです。今回のイベントにはHTML5ビギナーも多く参加していたのですが、HTML5のエキスパートである同氏が、これからWeb開発の世界に入ろうとする人にこそ知っておいてもらいたい「HTML5マークアップの心得と作法」について解説しました。以下、その概要をお伝えします。
最初に羽田野氏は、このセッションで伝えたいアジェンダとして
- 初心 … 過去の知識が正しいとはかぎらない
- 心得 … 常に心がけていてほしいこと
- 作法 … 清く正しく美しく
の3つを挙げました。HTML5では新要素（24個）が追加されただけでなく、古い要素も再定義されています。したがって以前の情報にとらわれたままの制作者も少なくなく、各要素が間違った使われ方をしているWebサイトを数多く見かけると羽田野氏は指摘しています。「価値観は時代とともに変わります。昔の映画ではタバコをポイ捨てする主人公がカッコよく描かれていましたが、今となってはあり得ない設定。Webの世界も同様です。過去の常識がいつまでも通用するわけではありません。HTML5を学ぶなら、ふるい考え方を一度捨てる必要があります」と述べます。
そしてそのための最初で、かつ最も重要なステップとして「HTMLの108の要素について、すべて目を通してほしい」と呼びかけました。「新要素を新たに学ぶだけでは足りません。ふるい要素もこの際、すべて見直してほしい。そうすることでHTML5のボキャブラリが身につきます。ボキャブラリがなければマークアップも正しくできなくなります」と羽田野氏。
たとえば見直すべき旧要素として、small、dl、i、s、u、cite、hrなどを挙げます。「以前はuはアンダーラインを意味していたが、今は中国語の固有名詞のマークやスペルミスのラベル付けに使う。アンダーラインを引くならuタグではなく、CSSで定義したほうがよい。同様にsmallも"小さくする"という意味では使わず"細目"を表す。小さくしたかったらCSSで表現するのが一般的」- それ以外についても、ぜひ自分自身で確認してみてください。
HTML5は多言語対応も積極的に行われています。たとえば日本語のルビを表現するためのrubyタグなどがその代表です。こうした新しい要素に対応するためにも、基本となるボキャブラリが確立している必要があるのです。このボキャブラリが貧弱であるがゆえに「h1、h2以外は全部divで処理しているような、ひどいものが多い。そういったコードでもスタイルシートを当てるとそれなりに見えてしまうから厄介」と指摘します。
HTMLの要素を正確にかつ幅広く理解することで、表現力が豊かになって見やすいページになるだけでなく、ソフトウェアからも読みやすいコード、つまりロボットから検索されやすいサイトへと変わります。「HTML4の時代は、正直、"h1、h2以外は全部div"でもよかった。でもHTML5は旧要素も含めてセマンティクスが大幅に強化されていることが最大のポイント。面倒であってもきちんとマークアップすることが求められます」と述べます。
つまり、先ほどの例の「smallは"小さくする"ではなく"細目"を表す」からもわかる通り、HTML5での各要素は"見た目"よりも"意味"の表現が重要になっています。見た目のほうはCSSに任せ、HTML5コードはよりセマンティクスに。こうすることで検索エンジンやソフトウェアが機械的に抽出しやすいサイトにすることができます。たとえば視覚障害者の方のような、ソフトウェアを介してWebを検索する人にも大きなメリットをもたらすでしょうし、複数のサイトから記事をあつめて自動的にニュースサイトを作るような場合にも効果的でしょう。
羽田野氏は「これからは見た目をCSSに依存する傾向がますます強くなる」とし、だからこそセマンティクスを意識したコードを書いてほしいと強調します。また「文法は正しくてもセマンティクスが間違っているようなコードも多い。brで段落を区切るようなだらしないコードは書かないでほしい。段落を区切るならpを使うべき。美しいマークアップとは正しいマークアップのこと。コンテキストにあったマークアップを心がけよう」とまとめました。
過去の知識にとらわれず、新しいことを吸収する気持ちでHTML5の全要素を見直すこと、セマンティクスを意識した正しいマークアップを心がけること - HTML5をこれから学ぼうとする初心者だけでなく、すべてのWebクリエーターが心に留めておくべき基本事項だと言えるでしょう。
