"セマンティックWeb"という名前は今やインフレを起こしています。しかし、多くの人々がこのたいへん称賛されているセマンティクスの実際の意味を理解していないのです。実際、それは非常に簡単です：セマンティクスによって、巨大なデータセットから必要な情報が実際に取得できるようになります。
具体例を挙げて、セマンティクスの重要性を示しましょう。デジタル写真は素晴らしいものです。撮影直後にインターネットを通じて世界中に公開できます。プライベートで有効なものが、すでにプロフェッショナルな環境で確立されています。画像エージェント、博物館、図書館、および写真家は、専門の画像データベースを通じて写真、絵画、または貴重な文献のデジタルヴァージョンを提供しています。該当のウェブサイトには、プラットフォームを検索するための検索マスクがあります。Web 2.0で最も人気のある画像検索エンジンの代表例は、おそらくFlickrです。
このような画像検索エンジンを既に使用したことがある人は、その限界を知っています：例えば、Kohl と入力すると、さまざまな分野の写真が表示されます。これは、Yahoo!の画像検索がコールメイス、コールという名前のテニス選手、そして元首相ヘルムート・コールの写真を提示していることを示しています。
ここで、古典的なWWWの欠点の1つが明らかになります：現在、提供されている情報は人間に理解されるかもしれませんが、機械 – この場合は検索エンジン – には正しく解釈されません。
機械は、実際に存在する情報だけを読み取ることができます。そして、それがセマンティクスが重要になる決定的なポイントなのです。
文書を構造化する
以前のHTMLバージョンでは、文書を意味論的に構造化する方法はありませんでした。ウェブサイトを構造化するには、基本的に見出しと段落しか利用できませんでした。以下は、古典的なウェブサイトの構造の典型的な例です：
<h1> タイトル </h1> <p> 段落 </p> <h2> サブタイトル </h2> <p> サブタイトルの段落 </h2> <h3>
HTMLは、h1 から h6 の要素を使ってドキュメントを構造化するためのものです。しかし、深く入れ子になった構造は作成できません。なぜなら、HTMLには h7 や h8 といった要素が用意されていないからです。ここで HTML5 が登場し、いくつかの追加の構造化要素を導入します。
• article
• aside
• dialog
• figure
• footer
• header
• nav
• section
この要素は、このチュートリアルで紹介されます。ただし、これらの要素がセマンティクスとは直接関係があるとは限らない場合があるため、その視覚的な見地からこれらの要素に驚くべきものを期待しないでください。実際に、セマンティック要素に基づくWebサイトが魅力的に見えるようにするには、CSSを使用する必要があります。そして、その点については後で改めてお話しします。
既にいくつかのセマンティック要素を学んだかもしれませんが、最初のうちはセマンティクスとはあまり関係がないと思えるかもしれません。次に、このような要素の例を示します：
<progress min="0" max="100" value="40"></progress>
これにより、プログレスバーが生成されます。（なお、この progress 要素はこの連載で既に詳しく紹介されています）。
この要素は、コンテキストが直接認識できる内容を比較的容易に作成する方法を示しています。つまり、ソフトウェアはプログレスバーであることを直接理解できます。逆に、JavaScriptを使用してプログレスバーを生成するソリューションでは、それが当てはまりません。
セマンティクス要素の構造
通常のHTML文書では、内容を構造化するために div 要素を使います。これらの要素には、CSSで書式設定するためにクラスやIDを割り当てます。HTML5でもこの原則は利用されています。Googleが実施した調査によると、多くの文書で常に同じクラスが使用されていることが示されています。
以下は例です：
<div class="nav"></div>
多くの開発者は、例えば、ナビゲーションをこの div 要素の中に配置するために nav を使用しています。一方、HTML5では次のようになります：
<nav>コンテンツ</nav>
nav 要素によって、これが単なるハイパーリンクのリストであるというわけではないことがはっきりと示されます。実際に、この要素は、Webサイトのナビゲーションに関する情報が特定のコンテキストで含まれている内容ブロックを記述しています。
モダンな構造化
実際のHTML文書の構造は一般的にどのように見えますか？基本的には、ページが最終的にどのようなコンテンツを持っていても、その構造は似ています。通常、以下の領域が含まれます：
• ヘッダーエリア
• メインメニュー
• コンテンツエリア
• フッターエリア
構造化のために div 要素を使用するWebサイトは、次のようになるかもしれません：
<body>
<div id="header">
<div id="logo">ロゴ</div>
<div id="search">検索</div>
<div id="nav">メインメニュー</div>
</div>
<div id="content">
<h1>これがコンテンツです</h1>
<div class="section">
<h2>サブタイトル</h2>
<h3>セクション</h3>
<!-- ここにコンテンツが書かれています -->
</div>
<div class="section">
<h2>サブタイトル</h2>
<!-- ここにコンテンツが書かれています -->
</div>
</div>
<div id="sidebar">
<div id="subnav">サブメニュー</div>
</div>
<div id="footer">フッター領域</div>
</body>
このような div 構造はおそらく皆さんもすでに知っていることでしょう。開発者が論理的に構造を理解できるように、div 領域には "話す"名前を持ったクラスや ID が割り当てられます。例えば、ID が footer の div 領域には、そのページのフッター領域に属する内容が保存されていると開発者には明確になります。 ただし、この方法には問題があります。名前はウェブサイトの構造を想像させるかもしれませんが、実際にはまだウェブサイトの意味論的な構造化はされていません。そして、ここで新しい HTML 要素が登場します。これらの要素によって、文書やウェブページの本当の構造化が初めて可能になります。
理解を深めるために、次の HTML5 文書を見てみてください:
<body>
<header>
<div id="logo">ロゴ</div>
<div id="search">検索</div>
<nav>メインメニュー</nav>
</header>
<article>
<h1>これがコンテンツです</h1>
<section>
<h2>サブタイトル</h2>
<h3>セクション</h3>
<!-- ここにコンテンツが書かれています -->
</section>
<section>
<h2> サブタイトル</h2>
<!-- ここにコンテンツが書かれています -->
</section>
</article>
<aside>
<nav>サブメニュー</nav>
</aside>
<footer>フッター領域</footer>
</body>
もちろん、ここで使用されている要素については、後続のチュートリアルで詳しく説明します。それでも、この例を見るだけで、使用されている要素の利点がどこにあるかがわかります。ついに、ページの領域をそれぞれの目的に特化した要素でマークアップできるようになりました。ページのヘッダー領域に属するものはすべて、header 要素に含めることができます。
また、section および article 要素を使用することで、ページの本当のコンテンツをはるかに効果的に構造化できるようになりました。ご覧の通り、HTML5 が文書の意味論的構造化において提供する可能性を注意深く調査する価値があることがわかります。
