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

Justin James (Special to TechRepublic) 翻訳校正: 村上雅章 野崎裕子2012年06月05日 07時30分
  • 一覧
  • このエントリーをはてなブックマークに追加

#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>タグをサポートしているブラウザはまだ少ないものの、その状況はすぐに変わるはずだ。

CNET Japanの記事を毎朝メールでまとめ読み(無料)

-PR-企画特集

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]