様々な要素が追加・削除され、HTML4以前とは大きく環境が変化すると話題のHTML5。そこで、HTML5とHTML4を比較し、変更される点などをこれから数回に分けてご紹介していきたいと思います。今回はレイアウト要素編です。
header要素、footer要素
一般的なレイアウト手法に従ってレイアウトされたサイトには、ヘッダとフッタと呼ばれる本文とは別の部分が存在します。ヘッダはサイト上部に位置し、主にロゴや内容紹介といったイントロダクション要素、またメニューなどのナビゲーション要素が配置される部分であり、一方のフッタはサイトの下部に位置し、コピーライトや、関連ドキュメントへのリンクなどが配置される部分となります。
HTML4以前では、これらが公式に区別されたり、サポートされるということはありませんでした。つまり、ヘッダやフッタを作成するにしても、
このようにdivタグにIDやクラスを定義し、そこにスタイルをつけていく、という手法が一般的でした。また、命名規則についても、
3 | <div id="header_contents"> |
このように、製作者によってバラバラとなる例も多々見られました。一方のHTML5では、
このように専用のタグが用意され、その内部にヘッダ情報やフッタ情報を記入することができるようになります。このタグ内に記入された要素は、header内ならヘッダ要素として、footer内ならフッタ要素として扱われることになります。スタイルについても、これまで通りCSSで記述することが可能です。
section要素、article要素
サイトの内容が膨大になると、情報を構造化して管理することが必要となってきます。
例えば、見出し・主文・見出し・主文…というように続いていくページがあったとします。それらは、見た目としては「見出し・主文」というひとかたまりとして扱うことが可能ですが、それをデータベースとして扱う場合、それらの情報をレコード化する方法は従来のHTML4以前にはありませんでした。
05 | <h1>HTML5で追加された要素</h1> |
10 | <h1>HTML5で削除された要素</h1> |
上記のように、単純に主文や主文のグループにidやクラスをつけて区別するにしても、それはあくまでローカルルールであり、その命名規則などは開発者によってまちまちであったりします。主文にsectionと命名する人もいれば、shubunと命名する人もいます。それでは、例えば一定の規則に従って情報を収集するエンジンがあった場合、どこが見出しでどこが主文なのか、プログラムによって判別するのは難しくなってしまいます。
そこで登場したのがこのsectionとarticle要素です。これらは先ほどの主文と、それら主文のグループにあたる要素であり、そのルールに則って記述すると、
上記のようになります。section要素が主文にあたり、それらをひとかたまりとしてグループ化したものがarticle要素となります。
このように、HTML5では新たに追加されたマークアップ要素を用い、統一された規則に従って記述しすることで、情報を構造化し、例えば検索エンジンの検索精度を向上させるといったことが可能となります。制作者にしてみれば訪問者の質を高めることが可能となりますし、情報収集をしたい人にとっても、より精度の高い情報を収集することが可能となります。
nav要素
一般的なレイアウト手法だと、ページ内のどこかにはナビゲーション、すなわち各ページへ飛ぶことができるメニューが存在します。従来のHTMLだと、これまたdivに「nav」や「menu」といったIDやクラスをつけて区別するしかありませんでした。
HTML5では、こういったナビゲーションにも専用のタグが用意されており、それがすなわちnav要素です。nav要素内の記述は、すべてナビゲーション要素として認識されます。
HTML5でレイアウトはどうなるのか？
今回紹介したHTML5で新たに追加されるレイアウト要素は、文字色やデザインを劇的に変えたり、動的な要素をサポートするといったものではありません。マークアップの種類を増やすことで、ヘッダやフッタ、ナビゲーションや主文といったサイトの部品の規則を統一し、情報を構造化するという、縁の下の力持ちのような役割を果たすのです。
これまで何度も述べたように、現在ではヘッダやフッタ、ナビゲーションといった要素は、制作者によって定義の仕方や命名方法はまちまちです。しかし、HTML5でそれが規則として統一されることにより、例えば自分が探している情報により近いものを表題から探したり、情報の構造化によってHTMLをデータベースとして扱うことがより容易になる、といったメリットが生まれてきます。具体的な例を挙げれば、ヘッダやフッタという特定の箇所に限定して情報を探すといったことができるようになったり、表題と主文を比較し、どの程度関連性があるのかということに着目することで、より精度の高い情報を検索できるようになる、といったことが可能となるのです。
