2013年現在にHTML5でサイトを作るときに気をつけたいポイント

新しい自作ブログテンプレートを作ることを決めて、「HTML5 + CSS3」というモダンな枠組みを選ぶことにした。当然Webで調べながら作業ということになるんだけど、そこには事前に予想していなかったトラブルが潜んでいた。一通り作業が終わってHTMLをチェックしていたら、後から手直しが必要だと必要とわかった場所が結構出てきてしまっていたのだった。

原因は参考にした記事の内容が（ブログでなくても）古くてアップデートされてないことがかなり多く、「使用した要素や属性が廃止されていた（正式には採用されなかった）」「新しい要素や属性が追加されていた」という事態が思いの外多かったこと。HTML5の最初のドラフト（草案）は2008年とかなり古く、それから今に至るまで様々な議論や検討などがおこなわれた結果、色々修正が加えられていたというわけ。

もちろん、元々が草案だったのだからしょうがないし、参考にした記事だって書いて時点では正しかったのだから、誰が悪いという話ではない。でも、できれば「無駄な作業は避けたい」というのは人情じゃないだろうか。というわけで、作業していて気がついた点をメモしておきたい。「これからHTML5でサイトを作るぜ！」という人には、ある程度参考になるのではないかと思う。

ちなみに、自分の作業自体はまだ続いているので、新たに何か気がついた段階で内容が増えていくかもしれない。

「hgroup」要素が廃止された

見出しをグループ化するための「hgroup要素（タグ）」が候補から外れ、正式には採用されないことになった。どうやら元々削除される可能性が高いとされていたらしい。すでにhgroupを使っていてグループ化していた副題などは、「pタグを使えばいいよ」という話になっているようだ。

「pubdate」属性が廃止された

最初は「article要素（タグ）」、その後変更されて「time要素（タグ）」に設定することができた「pubdate属性」が削除された。どちらにしても文章（article要素）の公開日時を設定するためのものだったのだが、これは「time要素で明記すれば十分」ということになったのかもしれない。

「main」要素が追加された

「main要素（タグ）」は文章（ページ内）の主要な部分を明示する（囲む）ためのもの。アクセシビリティの観点から追加されたらしい。ページ内で1回しか使用できず、かつ重要な部分に使うべきというところで、HTML4やXHTML1.0の「h1」タグを何となく彷彿とさせる。説明を読む限り、ブログでいうならメインカラム、特にコメントやトラックバック部分を除いた記事本体部分に使うのがいいのかもしれない。

「role」属性が追加された

正確にはHTML5の属性ではないし、別にHTML4などでも使えるらしいが、話が複雑になるのでとりあえずHTML5の属性の話として進める。「role属性」は上記のmain要素と同じく、アクセシビリティの観点から追加された属性。そのページのドキュメントや要素の役割（=role）を設定・明示するために使用する。具体的には任意の要素（タグ）に、以下のようにrole属性を設定するとのこと。

  • role=”banner”　：　ヘッダー部分
  • role=”main”　：　メインコンテンツ
  • role=”contentinfo”　：　コンテンツ情報、メタ情報
  • role=”navigation”　：　ナビゲーション
  • role=”search”　：　検索機能
  • role=”complementary”　：　補助的情報部分
  • role=”application”　：　アプリケーション

role属性はHTML5で新たに追加された属性です。これらはWebページの構成内である役割を担う要素に対し目印を付けることからランドマーク（Landmark）と呼ばれています。このように文書構造に対し目印をつけることでWebアクセシビリティの向上を図ります。

HTML5のrole属性を考える！マークアップ時に意識したいこと | ごすてっぷ

現状、この属性を設定したからといって一般的なWeb閲覧でメリットがある場合は少ないようなのだが、Webページとブラウザの両方で普及が進めば事情は変わってくるかもしれない。

CSS3を使うときはもう（ほとんどの場合に）ベンダープレフィックスはいらない

HTML5には直接関係ないものの、セットで使うことが多いと思われるCSS3についても少し。

CSS3について書かれた古い記事では、当時のブラウザの対応状況の関係でコードに「-webkit-」「-moz-」などのベンダープレフィックスが付いていることが良くある。これは記事の公開時点では正しかったが、2013年の今では必要ない……どころかトラブルの原因になっていることすらある。標準の書き方をせずベンダープレフィックスのみでCSSが記述されているときに、最新のブラウザではスタイルが適用されてないものが散見された。具体例としては以下のページなどが挙げられる。（執筆時点で最新のFirefox 21で閲覧すると、スタイルが適切に設定されていない。）

恐らく、プロパティの記述方法が変わってしまったのが原因だと思われる。最新のブラウザでは、基本的にCSS3を使用するときに、固有のベンダープレフィックスを付ける必要がないぐらい対応が進んでいるはず。古めのページを参考にするときには注意しておきたい。