第3回 HTML5で新しく定義された新要素をまとめよう
| HTML5になって新しく定義された新要素（タグ）が多くあります。今回は前回の使い方が変更になった要素の続きとして、新しく定義された新要素の中から新しくなったタグをまとめていきます。video要素、audio要素などこれまでのプラグイン的な扱いの要素はいきなりでは難しいですし、ブラウザでの対応状況がまちまちで実際にすぐサイト制作に用いるということはまだあまりありませんので、まずは通常のページを作る際に使う要素をまとめてみたいと思います。 ただし、HTML5は仕様がまだ確定しておらず随時仕様変更などがありますので、現状は制作業務では無理に新要素を使わなければいけないということはありません。自分のサイトやブログなどで実験的に新要素で制作し、変更があれば随時更新していくような形で勉強していく形がよいのではないかと思います。また、本連載では初心者からでも簡単にできるように、なるべく仕様にガチガチにならずにわかりやすい部分からHTML5を触れていこうという形で進めていければと思っております。 解説：（有）ムーニーワークス 林 豊／田崎一成 |
| 今回はHTML5からの新要素をまとめていきますが、HTML5では「カテゴリー」「コンテンツ・モデル」「アウトライン」という概念があります。こちらをやらずにいきなり新要素でよいのか？というように思われる方もいらっしゃると思いますが、こちらはいきなりでは難しく感じてしまいますので、それらは要素の紹介の後にまとめる予定です。そちらを先に理解してから新要素を知りたいという方は、ブログのほうにまとめておりますのでよかったらご覧ください。 |
●hgroup要素
hgroup要素は、セクションの見出しを表します。見出し(h1～h6要素)とそれに付随する小見出し・副題・キャッチフレーズ となる見出し要素(h1～h6要素)をグループ化するために使用します。見出しと関連する小見出しや副題をグループ化して使用するhgroup要素ですが、使用時に注意しなければならないポイントがあります。主な特徴としては、
- ● hgroup要素内には、h1～h6要素以外の要素を使用することができない
- ● hgroup要素内の見出し要素は、レベルが最も高い要素以外はアウトラインに現れない
見出し要素をグループ化する際に使用します
| HTML4やxhtmlでは見出しタグの順番は必ずh1から順番につけていましたが、HTML5ではブロックレベル要素からアウトラインという形に変わりましたのでhタグの順番は上のように必ずしもh1が上でなくても大丈夫ですが、デザイン的にサイト名の上に副題を入れたい場合はCSSで位置指定をしてあげて見た目の順番を変えるという方法もあるかとおもいます。 ※アウトラインについては後日まとめます。 |
 |
h1、h2などをまとめます
MdN Design Interactiveのサイトの場合
| MdN Design Interactiveのサイトではbodyタグ開始後すぐにサイトの説明文を入れてサイトの内容を伝えたり、SEO対策の一環として入れるというサイトがよありますが、この場合はキャッチコピーを見出しとして使う場合はhgroup要素で囲みCSSで位置を調整するか、従来のようにキャッチコピーをp要素を使用して対応する場合はhgroup要素は使いません。 |
 |
キャッチコピーを見出しにしない場合はhgroup要素は使わない
ブログの方にも『hgroup要素』についてまとめております。詳しくはこちらもご覧ください
●header要素
| header要素はページや各セクションのヘッダーを表す場合に使用します。今までは‹div id="header"› ‹/div› などを使用していたと思いますが、それが‹header› ‹/header›という形に置き換えることができます。 |
主な特徴としては、
- ● header要素はページ内に複数使うことができる
- ● header要素は見出し要素を含むことを想定しているが、無い場合でも間違えではない
(※必須ではありません) - ● header要素はセクショニング・コンテンツではないため、アウトラインに現れることはない
(※新たなセクションを表さない) - ● header要素内にheader要素、footer要素を使うことはできない
- ● header要素は通常『ページ目次・サイトロゴ・検索フォーム』などを入れて使用する
サイトのロゴ周りやブログの記事の見出しなどに使います
| 作例のようにサイトのヘッダー部分に使うというのと、ブログなどでTOPページに5件の記事を表示する場合の記事のタイトル部分にheaderを使うこともできます。ブログ以外では記事内のどこがヘッダー部分に該当するか迷う場合は無理に使わずページ上部のヘッダー部分のみでもよいかと思います。 |
 |
このように内容に応じて複数のheader要素を使うことができます
ブログの方にも『header要素』についてまとめております。
●footer要素
| footer要素はページや各セクションのフッターを表す場合に使用します。今までページの最下部のエリアを‹div id="footer"› ‹/div›などを使用していたと思いますが、それが‹footer› ‹/footer›という形に置き換えることができます。 |
主な特徴しては、
|
サイトの最下部フッターやブログの記事の下の補足事項などに使います
| 作例のようにサイトの最下部のフッター部分に使うというのと、ブログなどでTOPページに5件の記事を表示する場合の最後の日付やカテゴリを表示させるエリアにfooterを使うことも可能です。ブログ以外では記事内のどこがヘッダー部分に該当するか迷う場合は無理に使わずページ下部のフッター部分のみでもよいかと思います。 |
 |
このように内容に応じて複数のfooter要素を使うことができます
ブログの方にも『footer要素』についてまとめております。
●nav要素
| nav要素は、ナビゲーションリンクを伴うセクションを表します。サイトやページの主要なナビゲーションに使用しなければなりません。すべてのリンクグループ（ナビゲーション）にnav要素を使ってはいけません。例えば、nav要素はサイトにとって主要なナビゲーションであるグローバルナビゲーション等に使います。ページフッター内に設置されている補足的なナビゲーション等にはnav要素を使わずにfooter要素で対応しますが、この辺はサイト全体の中でのナビゲーションの内容にもよると思いますので一概には言えないかとも思います。 |
主な特徴して、
|
主要なナビゲーションに使用します
| あくまで主要ナビゲーション部分をnavにするということですが主要の考え方はさまざまだとおもいますのでサイトの内容に合わせて設定するとよいでしょう。主要ナビゲーションには‹nav›を設定し、主要でないナビゲーション部分は‹nav›使わないでマークアップする場合もあると思います。 |
 |
メニューをすべてnavにするということではありません
ブログの方にも『nav要素』についてまとめております。
●aside要素
| aside要素は、メインコンテンツとは関連性が薄く、切り離すことができるコンテンツを表します。例えばサイト以外の広告のリンクやブログパーツや外部リンク集などに使用します。ブログなどでよくある「この記事を読んだ人にはこちらをオススメ」などはその記事に対して関連性がある内容の紹介になりますが、この部分がなくても記事が成り立つものとしてはasideにするなども考えられます。 |
主な特徴して、
|
メインコンテンツとは関連性が薄く、切り離すことができるコンテンツに使用します
| 作例が短いですがここでの記事はh2タグの「『aside要素』 / HTML5新要素一覧」のページとするとh3タグの「HTML5とは」はHTML5というカテゴリでは関連性は薄くはないですが、この作例では |
 |
定義リストにする場合はdt要素に定義語を表すdfn要素を用います
ブログの方にも『nav要素』についてまとめております。
●figure要素
| キャプション付き図表(図面・写真・ソースコードなど)を表し、自己完結しているメイン・コンテンツから参照されるようなコンテンツを表します。こちらはページの見せ方によってさまざまな考え方が出てくると思いますので、サイト全体を考えるて使う判断が難しい場合は無理して使う必要はないと思います。ブログの方に少しサンプルを追加しております。 |
主な特徴して、
|
図画・写真・コードリストなど、自己完結しているメイン・コンテンツから参照されるようなコンテンツを表します
 |
サイト全体を考えると使うタイミングが難しい印象があります
ブログの方にも『figure要素』についてまとめております。
今回は以上になります。
新要素の中で使い方がわかりにくい『section要素」と『article要素』についてですがこちらは次回まとめたいと思います。その後にHTML5での「カテゴリー」、「コンテンツ・モデル」、「アウトライン」についてまとめていきます。
次回につづく
 |
【林 豊】●1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。 またWEB制作に役立つ情報を集めて制作のヒントになるブログを更新している HTML5でサイトをつくろう：http://www.html5-memo.com/ Webデザインクリップ：http://webdesignmatome.com/ デジハリ・オンラインスクールにて自宅や会社のPCからいつでも「HTML5」を学べる講座を担当。ただいま全体の1/3の内容を無料で視聴できます。 HTML5入門講座：http://online.dhw.co.jp/course/html5/ |
