HTML5入門：セクション要素タグの意味と使い方！！セクション編 vol.2
前回の「HTML5入門：セクション要素タグの意味と使い方！！セクション編vol.1」に引き続き、今回もHTML5の「HTML5入門：セクション要素タグの意味と使い方！！セクション編vol.2」について勉強したいと思います。興味ある方は一緒に勉強していきましょう...
HTML5：見出しを表したい（h1,h2,h3,h4,h5,h6）
<h★>～＜/ｈ★＞★1～6
| 要素解説 | h1,h2,h3,h4,h5,h6 |
| カテゴリー | フローコンテンツ/見出しコンテンツ |
| 利用できる場所 | hgroupの子要素 フロー・コンテンツが期待される場所 |
| コンテンツモデル | フロー・コンテンツ |
見出しは、h1～h6要素で表します。数字は見出しのランク(階層)を表すもので、ｈ１が一番上位、以下数字が大きくなるにつれて見出しのランクが下がることを意味します。
h1～h6要素が使われると、暗黙的にセクションであるとみなされます。
なお、明示的にセクションを表すには、secsion要素やarticle要素などのセクショニング・コンテンツに属する要素を指定します。
<body> <h1>見出しＡ</h1> <h2>見出しＢ</h2> <h3>見出しＣ</h3> <h2>見出しＤ</h2> </body>
HTML5：見出しをグループ化したい（hgroup）
<hroup>～</hgroup>
| 要素解説 | hgroup |
| カテゴリー | フローコンテンツ/見出しコンテンツ |
| 利用できる場所 | フロー・コンテンツが期待される場所 |
| コンテンツモデル | h1,h2,h3,h4,h5,h6要素を1個以上 |
hgroup要素は、見出しをグループ化する要素です。この要素の中には、h1～h6要素のみを入れる事ができます。
ＨＴＭＬ5では、h1～h6要素が現れると暗黙的にセクションが生成されることになっています。hgroup要素は、1つのセクション中に大見出し、小見出し、サブタイトル、キャッチフレーズといったレベルの異なる見出しが含まれるとき、各見出しごとにセクションが生成されないよう、まとめる役目をもっています。
このようにグループ化すると、hgroup要素に含まれる見出しのうち一番ランクの高いもののみがアウトライン上で見出しとなり、それ以外はアウトラインに現れなくなります。見出し同士の関係や文書構造がより明確になるというメリットがあります。
<body>
<secsion>
<hgroup>
<h1>見出しをグループ化したい</h1>
<h2>見出しをグループ化したい</h2>
</hgroup>
<p>見出しをグループ化したい</p>
</section>
</body>HTML5：ヘッダを表したい（header）
<header>～</header>| 要素解説 | footer |
| カテゴリー | フローコンテンツ |
| 利用できる場所 | フロー・コンテンツが期待される場所 |
| コンテンツモデル | フロー・コンテンツ |
ページやセクションのヘッダ部分は、header要素で表します。header要素には、h1～h6要素やhgroup要素で表される見出しを入れて使うのが一般的ですが、これらは必須ではありません。セクションの目次、検索フォーム、関連するロゴなど、そのセクションの概要やナビゲーションに役立つ内容を入れることもできます。
<body>
<header>
<h1>ヘッダを表したい</h1>
<p>ページやセクションのヘッダ部分は..</p>
</header>
</body>HTML5：フッタを表したい（footer）
<footer>～</footer>
| 要素解説 | footer |
| カテゴリー | フローコンテンツ |
| 利用できる場所 | フロー・コンテンツが期待される場所 |
| コンテンツモデル | フロー・コンテンツ |
ページやセクションのフッタ部分は、footer要素で表します。おもに、ページやセクションの著者についての情報、関連ページへのリンク、著作権表示などに使います。
footer要素はページやセクションの最後で使われるのが一般的です。しかし、配置位置についての決まりはなく、セクションやページの途中や最初で使っても問題ありません。また、必要に応じ、1つのセクションの中に複数のfooter要素を入れることもできます。
<body>
<footer>
<ul>
<li><a href="○○○.html">利用規約</a><li>
<li><a href="○○○.html">プライバシー</a><li>
<li><a href="○○○.html">サイトマップ</a><li>
</ul>
<p><small>copyright & copy; 2011 ○○○ Co.Ltd. All Right Reserved.</small></p>
</footer>
</body>HTML5：連絡先を示したい（address）
<address>～</address>| 要素解説 | address |
| カテゴリー | フローコンテンツ |
| 利用できる場所 | フロー・コンテンツが期待される場所 |
| コンテンツモデル | フロー・コンテンツ |
個々のコンテンツやサイトに関する連絡先の情報は、address要素で表します。
address要素は使われている場所によって意味が異なります。article要素の中で使われると、そのarticle要素の内容の管理者や著作の連絡先、それ以外の場合はサイト全体の管理者や著者などの情報を表すことになります。
この要素の内容の中に、コンテンツやサイトに関する連絡先情報以外の内容を含めることはできません。例えば、単に住所などを記載したいときは、p要素で表します。
<body>
.
.
.
<footer>
<address>当サイトの関するご意見は
<a href="info@○○○.co.jp">総合受付</a>まで。</address>
</footer>
</body>HTML5に新しい要素が加わり、覚える事がたくさんありますが、使い方、意味を覚えてしまえば楽しくなってきますね！！
まだまだ勉強が足りないですが、たくさん勉強して早くHTML5を使ってWEBページを作成していきたいですね。
また新しく勉強した事を記事にしていきますのでよろしくお願いします。
- 関連記事
-
- HTML5入門：タグの意味と使い方！！コンテンツのグループ化編 vol.2！！
- HTML5入門：タグの意味と使い方！！コンテンツのグループ化編 vol.1！！
- HTML5入門：セクション要素タグの意味と使い方！！セクション編 vol.2
- HTML5入門：セクション要素タグの意味と使い方！！セクション編 vol.1
- HTML5入門：タグの意味と使い方！！文書の基本 vol.2！！
テーマ : インターネットサービス ジャンル : コンピュータ
