トップ > スキル : Web > HTML5

Web

各要素のリファレンス4

セクション関連要素(2/2)

h1~h6要素(見出し)

カテゴリ フロー・コンテンツ、セクショニング・コンテンツ
コンテンツモデル フレージング・コンテンツ
利用可能な場所 hgroup要素の子として、またはフロー・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 なし
デフォルトスタイル h1{
    display:block;
    font-size:2em;
    margin:0.67em 0 0.67em 0;
    font-weight:bold;
}
h2{
    display:block;
    font-size:1.5em;
    margin:0.83em 0 0.83em 0;
    font-weight:bold;
}
h3{
    display:block;
    font-size:1.17em;
    margin:1em 0 1em 0;
    font-weight:bold;
}
h4{
    display:block;
    font-size:1em;
    margin:1.33em 0 1.33em 0;
    font-weight:bold;
}
h5{
    display:block;
    font-size:0.83em;
    margin:1.67em 0 1.67em 0;
    font-weight:bold;
}
h6{
    display:block;
    font-size:0.67em;
    margin:2.33em 0 2.33em 0;
    font-weight:bold;
}

h1~h6要素はセクションの見出しを表し、これらの数字は見出しのランクを表します。

セクショニング・コンテンツに属する要素を使って明示的にセクションがマークアップされていない場合、このランクに応じて、アウトラインが決定されます。

■セクショニング・コンテンツ要素を使わない場合
  <body>
    <h1>見出しA</h1>
    <h2>見出しB</h2>
    <h3>見出しC</h3>
    <h4>見出しD</h4>
  </body>
    

このマークアップは、いずれもアウトライン上は同じになります。

■セクショニング・コンテンツ要素を使った場合
  <body>
      <h1>見出しA</h1>
      <section>
          <h1>見出しB</h1>
          <section>
              <h1>見出しC</h1>
          </section>
      </section>
      <section>
      <h1>見出しD</h1>
      </section>
  </body>
    

セクショニング・コンテンツを使った場合、すべてのセクションでh1要素を使っています。このようにsection要素を使って、明示的にマークアップした場合のアウトライン形成は、セクショニング・コンテンツ要素を使わない場合と同じように解釈されます。

hgroup要素(見出しのグループ)

カテゴリ フロー・コンテンツ、ヘッディング・コンテンツ
コンテンツモデル 1個以上のh1~h6要素
利用可能な場所 フロー・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 なし
デフォルトスタイル hgroup{
    display:block;
}

hgroup要素は、見出しとそれに付随する小見出しや副題やキャッチフレーズをグループ化するために使います。それぞれは、見出しレベルが異なるh1~h6要素だけでマークアップする必要があります。つまり、hgroup要素の中にh1~h6要素以外の要素を入れることはできません。

■利用例
  <section>
  	<hgroup>
    		<h1>大見出し</h1>
    		<h2>小見出し</h2>
  	</hgroup>
  	<p>ここに見出しに応じた内容が記述されます</p>
  </section>
    

hgroup要素は複数のレベルの異なる見出し要素を入れますが、それぞれでセクションが作られるわけではありません。hgroup要素に含まれている見出し要素のうち、レベルが一番高いものがアウトラインでの見出しとして採用され、それ以外は見出し要素は、アウトラインから除外されます。利用例のコードでは、h1要素のみがアウトラインの見出しとして採用され、h2要素はアウトラインに現れません。

■hgroup要素を使わない場合
  <section>
    	<h1>大見出し</h1>
    	<h2>小見出し</h2>
  	<p>ここに見出しに応じた内容が記述されます</p>
  </section>
    

hgroup要素を使わなかった例をみると、p要素以降のコンテンツは、h2要素でマークアップされた「小見出し」という見出しが付いたコンテンツになります。つまり、次のようにマークアップされたコードと同じになります。

  <section>
    	<h1>大見出し</h1>
        <section>
    		<h2>小見出し</h2>
  		<p>ここに見出しに応じた内容が記述されます</p>
        </section>
  </section>
    

header要素(ヘッダー)

カテゴリ フロー・コンテンツ
コンテンツモデル フロー・コンテンツ。ただし、この要素の子孫にheader要素とfooter要素を入れてはいけない。
利用可能な場所 フロー・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 なし
デフォルトスタイル header{
    display:block;
}

header要素は、該当のセクションの見出し要素やhgroup要素などに加え、該当のセクションに関する概要やナビゲーションなどを入れて使う、セクションのヘッダを表します。なお、見出し要素を入れることは必須ではありません。

■利用例
  <header>
  	<hgroup>
    		<h1>・・・</h1>
    		<h2>・・・</h2>
  	</hgroup>
	<nav>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</nav>
  </header>
    

利用例は、ページのヘッダに見出しとナビゲーションを配置したマークアップです。ほかにも記事のヘッダとして、セクション・ヘッダとしてマークアップすることもできます。

footer要素(フッター)

カテゴリ フロー・コンテンツ
コンテンツモデル フロー・コンテンツ。ただし、この要素の子孫にheader要素とfooter要素を入れてはいけない。
利用可能な場所 フロー・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 なし
デフォルトスタイル footer{
    display:block;
}

footer要素は、そのセクションの著者情報や関連ページへのリンク、著作権表記に利用するセクションまたは、ページのフッタをマークアップするために使います。footer要素は1ページに何回使っても構いませんが、使う場所によって意味が変わってきます。

■利用例
  <body>
    ・・・・・
  <footer>
  	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<p>Copyright © 2010-2011 HTML5</p>
  </footer>
  </body>
    

利用例は、一般的によく利用されるページの最後のフッタのマークアップ例です。フッタ部分にナビゲーションと著作権表記が表示されます。

通常、footer要素はページやセクションの最後に使いますが、必ずしも最後で使う必要はありません。ページやセクションの途中に使っても構いません。

address要素(連絡先情報)

カテゴリ フロー・コンテンツ
コンテンツモデル フロー・コンテンツ。ただし、この要素の子孫にヘッディング・コンテンツとセクショニング・コンテンツを入れてはいけない。また、header要素とfooter要素も入れてはいけない。
利用可能な場所 フロー・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 なし
デフォルトスタイル footer{
    display:block;
    font-style:italic;
}

address要素は、連絡先情報に使います。ただ、address要素をどこで使うかによって意味が異なります。ブログ記事などを表すarticle要素の中で使われれば、それは該当ブログの著者への連絡先情報を意味します。そうでなければ、サイトの連絡先情報となります。

■間違った利用例
  <article>
  	<h1>お得な情報</h1>
	<p>あるお店のお得な情報がありました。とても製品品質が良く、
    	安価なものでしたので皆さんにお伝えしたいと思います。</p>
	<address>
    		大阪府港区高田1-1-XX TEL:06-XXX-XXXX
	</address>
  </article>
    

address要素の間違ったマークアップ例をみると、ある情報であるお店の紹介がなされています。そのお店の住所情報にaddress要素を使っていますが、これは間違いです。address情報は、ページやサイトの著作者情報やセクションにおける著作者情報となるので、単なるお店の情報では使いません。このような時は、p要素で単なる段落としてマークアップします。

HTML5の仕様では、ブラウザなどのユーザエージェントが、ページや記事の連絡先情報をaddress要素を元にHTMLから抜き出し、それをユーザに表示するといった機能を実現できることを想定しています。誤解を招くような用途や場所でaddress要素を使わないように注意する必要があります。

【各要素のリファレンス4】