HTML5 アウトラインを意識してみる
h1~h4とsection&h1を使って実験 HTML5では、新たなセマンティック要素を規定している。これはホームページやblogなどの文章の見出しや本文などを構造化することで、検索や様々なサービスを行いやすくし、結果的にユーザーのメリットになるというもの。ただ多くの有名サイトでも、まだ本格的に導入されていない。でもGoogleの検索エンジンでは、この構造が徐々に重要になってきているように思う。 文章の構造はアウトラインとしてもブラウザー上でチェックすることができる。Google ChromeではHTML5 Outlinerという機能拡張がある。 これをインストールすると、omniboxにアイコンが表示されるので、開いているページで、このアイコンをクリックすると、そのページの見出しのリストであるアウトラインを見ることができる。これはページの目次のようなものなので、これだけ見て内容がある程度分かるようにしておくのがよいと思う。下はindexのページのアウトライン。こんな感じで階層化しておくと今後の様々なサービスに対応できそう。 html5以前ではh1~h6を使って見出しを定義するような仕様ではあるのだが、どうも積極的に使われていなかったりする。それに数値で階層分けをするのは、機械からみると理想的ではないし、階層の変更に弱い。html5では新たにsectionが導入された。これとh1などを組合わせてタイトルのツリーを作ることができる。これによって複数のhtmlファイルを組合わせても、正しい階層をキープできるなど、変更修正に強く柔軟性のある構造が実現できる。でも後方互換性のため従来のh1~h6も利用できるのが何とも中途半端だが。今後はsectionとh1だけを使う方法がベターだろう。 例えばこんな感じで。 <section> <h1> 大見出し </h1> <p>本文</p> <section> <h1> 中見出し </h1> <p>本文</p> </section> </section> 上記は section の中に section が存在していて、2階層に