World Wide Webが登場してから今日まで、“見た目重視”なWebページが数多く作成されてきました。HTMLも、その要求に応えるべくデザイン重視で仕様が策定されてきたと言っても過言ではないでしょう。

 ですが、HTMLで記述されるコンテンツを「データベース」としてとらえるべきであると言う人が、インターネットの初期のころからいたことも事実です。HTML5になって、HTMLをデータベースにするために、つまりセマンティックな記述を正しく行えるように、いくつかの仕様が追加されました。

セマンティックの記述が可能になったHTML5

 Webサイトの管理者は、見た目だけでなく意味的な情報を記述するため、RDFやmicroformatといった仕様を利用してきました。しかし、残念ながら多くの管理者は「SEO対策で仕方なく記述している」といったモチベーションだったと思います。現在ではソーシャルメディアがセマンティックを消費する大きなサービスに成長しており、HTMLに関してもそれに対応しうる進化が求められてきています。

 そこで、HTML5では「HTML Flow elements」と「HTML Microdata」という2つの仕様が追加されました。この2つの仕様により、見た目重視だったHTMLに対して、シームレスにセマンティックを記述していくことが可能になりました。これらの仕様を具体的に見ていきましょう。

ページの区画を表現する「HTML Flow elements」

 HTML4までは、表現可能な文書構造(特に見出しの記述)について、<h1>~<h6>要素が使われてきました。ところが、6段階の見出しだけでは表現しきれないほど、現在のWebページに書かれる内容は複雑化しています。そのため、多くのWebサイトではdiv要素を使って区画分けを行っているのが主流です。見た目だけで言えば、これで目的は達成しているかもしれませんが、ページ内でどこに何が書かれているかがますます判別不能となり、機械的に処理ができる可能性は低下する一方でした。

 そこでHTML5では、代表的なWebページの区画を明記するために、以下の要素が追加されました。これらはHTML仕様の中のHTML Flow elementsという章で定義されています。

  • <section>:文書の「章」を表現する。
  • <nav>:他の文書へのリンクや、文書内の特定の位置に飛ぶためのナビゲーションリンクを持つ区画を表現する。
  • <article>:文書において最も表現したい内容(雑誌や新聞の記事やブログエントリなど)を持つ区画を表現する。
  • <aside>:文書の主要な内容に関連する余談などの付加的情報を持つ区画を表現する。
  • <header><footer>:通常文書のページ上部にある見出し部や末尾に掲載されるような情報を持つ区画を表現する。

 これらの要素を使用することで、ページ内の最も重要なことが書かれている場所を機械的に抽出可能となります。また、section要素を使うことで、コンテンツを適切な単位で区画分けすることができるため、例えば概要文や結論を1つ目のセクションにして、というようなことも表現することができます。

この先は会員の登録が必要です。有料会員(月額プラン)は初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら