検索結果をより目立たせるマークアップとは？

Web開発

技術解説

連載 :

HTML5を使って、セマンティックなWebサイトを作ろう

2012年4月18日(水)

柴田麻衣

HTML4とHTML5の違い

では、具体的なタグに触れながら、HTML4とHTML5の違いを説明していきましょう。HTML4とHTML5を比較して、大きく変わった1つとして、文書構造を伝える要素が新しく追加されました。それが以下のものです。

section
article
header
footer
nav
hgroup
aside
figure

（※）追加要素について詳しくは、「今さら聞けないHTML5総おさらい／第1回 HTML5の新機能、HTML4との違い（P2）」をご覧ください。

これらを使用することで、文書がどのように構成されているか、検索エンジンにアウトラインを示せるようになりました。HTML4ではdiv要素でしか表現できなかったものを、header要素、footer要素、section要素で表現できるようになったのです。

また、新しいルールとしてsectionごとにh1が設定できるようになり、1つのページ内にh1が多数存在することもあり得るようになりました。

SEOを意識したこのある方にとっては、このようにh1を多用する感覚は慣れないかもしれませんが、このsection要素をいくつか使用して構成される文書では、これが正しい使い方となります。

HTML5では、input要素のtype属性も新しく定義されました。

従来HTML4のinput要素、form要素を使用した入力フォームは、機能としてもデザインとしても十分とはいえませんでした。form要素等は検索エンジンにとって、非常に曖昧なもので、要素内で示されている意味や、このフォーム自体の意味を理解することが困難でした。もちろん、デザインを解決するために使用しているJavaScriptも、セマンティックな要素は持っていないため、意味を伝えることはできませんでした。

HTML5のinput要素は、search, url, number, emailなど、意味を定義されたtype属性が増え、さらにJavaScriptを使用しなくともリッチなデザインが実装されるようになりました。

次に、HTML4から意味・仕様が変更になった要素や属性にも触れていきましょう。

これらの多くは、従来の「装飾がメイン」で使われていたものからセマンティックと意味を新しく持つこととなり、実装上でも大きく変化しています。例えば、smallやhr要素、i、b要素はHTML5でセマンティックな意味を持つことになりました（詳しくは次回解説します）。

この他に、HTML5ではcenter、fontなど、セマンティック要素を持たない、装飾のみを示す要素は、CSSで調整することとされ、HTML5では役割を終了しました。

HTML5によるセマンティックなマークアップ

では、セマンティックなマークアップをした場合としない場合で、具体的にはどのような変化があるのでしょうか。ここでは、「マークアップしたHTMLが検索エンジンにどう認識されるか」を例にとって解説したいと思います。

1ページ目と同じアウトライン構造を持つ文書をHTML5で登場した新しい要素を使ってセマンティックなマークアップをしていきます。

HTML5では、図のように、header要素、footer要素、nav要素（ナビゲーションを表す）、aside要素（本文のテーマとはやや外れるが触れておきたいコンテンツなど、補足的なセクションに使用する要素）、section要素に分けて示すことができるようになりました。

図2：HTML5を使ったセマンティックなマークアップ（クリックで拡大）

そしてこのようにマークアップすることで、検索エンジンに、コンテンツのあるセクション、ナビゲーション、ヘッダー、フッターセクションと、私たちが視覚的に認識するのと同じように、文書のアウトラインを伝えることができるようになります。

検索エンジンは、このアウトラインを基に、また各セクションのテーマについても明確に理解できるようになり、中に書かれている文書に重要度をつけることができるようになります。

そして、このセマンティックなマークアップで検索エンジンに伝えられることは、文書のアウトラインだけではありません。

今までは同じdiv内で指定されていたように認識されていたリスト要素も、HTML5を使用したセマンティックなマークアップ下では、ナビゲーションを表すリスト要素なのか、コンテンツ内の補足トピックスの羅列を表すリスト要素なのかを区別することができ、同じリスト要素もより詳細に伝えることができようになりました。

このようにアウトラインの意味を明確化するだけで、従来あったセマンティックを持つ要素についても、その重要度を検索エンジンに示すことができるようになりました。

セマンティックなマークアップを心がけることで、HTMLは検索エンジンのみならず様々なプログラムにとって、大変扱いやすいものになっていくのです。