HTML5--押さえておくべき10のタグ - (page 2)

＃4：<header>タグと<footer>タグ

　<header>と<footer>という2つのタグは、HTML5で新たに利用できるようになったセマンティックタグである。これら2つのタグを使用しても、表示のうえでは<div>とまったく区別がつかない。しかし、これらによって検索エンジンは「コンテンツ」と、コンテンツではないもののユーザーにとって重要な意味を持つものとの区別がつくようになるため、長い目で見た場合、検索時により適切な結果が表示されるようになるわけである。

＃5：<article>タグと<section>タグ

　<article>と<section>という2つのタグもまた、検索エンジンにとって重要な意味を持つセマンティックタグである。記事（<article>）というものは複数のセクション（<section>）によって構成することができ、また、セクションというものは複数の記事を保持することができる。ややこしいって？いや、実はそんなにややこしい話ではない。記事というものはコンテンツブロック全体を表現したものであり、セクションはそれを包含する全体の一部となるわけだ。あるブログを例に取ると、フロントページにはすべての投稿を一覧できるセクションが保持されており、各投稿は実際の投稿内容を表示するセクションと、コメントを表示するセクションを備えた記事となっているわけだ。

＃6：<output>タグ

　新たに導入された<output>タグは、JavaScriptを用いて動的にコンテンツを生成するために用いられるという独特なものとなっている。このタグには、JavaScriptを用いてDOM経由で操作できる値が属性として保持され、これによって画面上の表示内容を変更できるようになるというわけだ。こういったやり方は、現行のものよりもずっと便利だと言えるだろう。

＃7：<details>タグ

　どのようなウェブサイトでもテキストブロックの展開機能と折りたたみ機能が必要となっているようだ。こういったことはJavaScriptやサーバサイドのコードによって簡単に実現できるものの、<details>タグによってさらに簡単になる。このタグを使うと、みんなが今まで作ってきたような、ヘッダのクリックだけでコンテンツの展開や折りたたみが行われるブロックを簡単に作成できるようになる。<details>タグをサポートしているブラウザはまだ少ないものの、その状況はすぐに変わるはずだ。