■ セクション用タグ
セクション要素とは
レイアウトを構成するためのひとつのかたまりです。
HTML4.01以前のバージョンでは、body,h1～h6,divなどを指して言います。
header要素
今までは、divにid名を付けヘッダを作成していましたが、今後はheaderタグが追加され、ヘッダに打ち込む内容をこのセクション内に収めるようにします。
html4.01以前の書き方
<html> <head></head> <body> <div id="header"> <h1>タイトル</h1> <p>テキストテキストテキスト</p> </div> </body> </html>
html5の書き方
<html> <head></head> <body> <header> <h1>タイトル</h1> <p>テキストテキストテキスト</p> </header> </body> </html>
ひとつのhtmlの中に、"head"タグと"header"タグができることになります。
h1～h6要素
従来のseo対策では、h1要素は1つのhtmlに1つだけ、以下の要素はそれに準じて配置するのが推奨されていました。
しかしhtml5では"article要素"や"section要素"の出現により、h1要素が各セクションごとに利用されることが増えます。
※ しかし原則ではh1要素がひとつのhtmlにひとつという原則は変わらず、上記は何かt区別な理由がある時に限られます。
hgroup hgroupは、html5の勧告から削除されたようです。(2013年5月)
見出しをグループ化します。
見出しの構造関係をより明確にするために新たに追加されたタグです。
html5の書き方
<html> <head></head> <body> <hgroup> <h1>日本の都道府県</h1> <h2>北海道</h2> <h2>青森</h2> </hgroup> </body> </html>
hgroup内にあるh要素は、順番に関係なくh1→h6の順に小さくなると認識されていますので、 例えばh1とh2の順番が逆であっても、ここではh1グループと考えられます。
nav要素
ナビゲーション要素です。そのサイト内にグローバルナビゲーション、フッターナビゲーションなどを設置する場合に活用します。
<html> <head></head> <body> <nav> <ul> <li><a href="#">トップ</a></li> <li><a href="#">このサイトについて</a></li> <li><a href="#">お問い合せ</a></li> </ul> </nav> </body> </html>
section要素
その文書内において、あるテーマを持ったセクションを表す要素です。
今までは全てdiv要素にid、class名をつけ管理していましたが、
HTML5では、文書内それぞれの役割を明確にし、より文書内容を細かくマーキングするタグが追加されています。
またsection要素に対し、id,class名とcssを併用することでスタイリングすることは可能ですが、適切な使い方ではありません。
article要素
更新される、独立した記事を表します。 section要素と混同してしまいがちですが、section要素はhtml文書の仕切りの役割を果たし、articleはhtmlに入れこむコンテンツに使用します。
一般の利用者、ブロガーやSNSの参加者などが書き込んだり、エントリーした内容、その書き込んだコンテンツに対して使うのがふさわしいでしょう。
figure要素
説明文のついた写真、図、表、動画、コードなどを表す際に使用します。
対象としてふさわしいものは、本文の流れとは直接関係がないが、添付すべき画像です。
figcaption要素
figure要素内に用い、figure内の画像の説明文を掲載する際に用います。
aside要素
主要記事に少し関係のある要素を表します。 サイドバーなど使用できます。
div要素
意味を持たない区分です。
今までは、ほとんどのスタイリングはdivを使用してきましたが、
html5以降はそれぞれの役割をもつタグの増加によりdiv要素は「他の要素では区分できない場合に使う要素」となりました。
footer要素
フッタレイアウトに使用します。
address要素
html4.01以前では、addressタグにコピーライトなどを入れる場合などがありましたが、 html5以降はaddressタグは明確な連絡先をいれるのにふさわしいものとなりました。 例えば著者のメールアドレス、お問い合せフォームのリンクなどです。