html5タグ要素について

6

11月

2011

html5についての某勉強会に参加し、html5で新たに追加された新要素(articleやsectionなど)についての知識の無さを痛感したので、
自分なりに調べました。
※html5は策定中の仕様のため、確定でない事項が含まれている可能性があります。

コンテンツモデル

色々と調べると、articleやsectionの仕様を把握するには、コンテンツ・モデルの理解が必要と感じました。
コンテンツモデルは、旧来のHTMLで用いられていたブロック要素、インライン要素の代わりに登場した概念のようです。

コンテンツモデルとは、要はタグ要素に含めるコンテンツの仕様で、
タグ要素に入れるコンテンツは、そのタグ要素に対して定められたコンテンツモデルに則したコンテンツを入れる必要があるようです。

コンテンツモデルには下記の7つがあります。

メタデータ・コンテンツ

  • 記述した箇所以降の表示や動作をセットしたり、外部ファイルを読み込んだりする、情報伝達をするコンテンツ

base command link meta noscript script style title

フロー・コンテンツ

  • ほとんど全てのhtml要素が該当
  • 要素の中にテキストノードか、エンベッディッド・コンテンツが含まれている必要がある
  • スクリプト用のプレースホルダーとして内容が無いdivタグ等を使用することがあるが、要素の内容が空になることは好ましくない

a abbr address area (map 要素の子孫の場合) article aside audio b bdi bdo blockquote br button canvas cite code command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong style (scoped 属性が存在している場合) sub sup svg table textarea time u ul var video wbr テキスト

セクショニング・コンテンツ

  • 見出しとアウトラインを持つ要素
  • 最初に出現する見出しは、そのセクションコンテンツの見出しを表すことになる。以降の見出しで、ランクが同じか高い見出しは暗黙的に新しいセクションが開始になり、低いランクの見出しの場合は、今いるセクションに従属するセクションの開始となる
  • セクショニングルートを持つ要素は、自分自身のアウトラインを持つことができ、見出しのランクがクリアされる
    • blockquote,body,details,fieldset,figure,td
  • 見出しランクはセクションに対しすべてh1でも良いし、全体構造に則したランクを付けても良い
  • 見出しを使用する場合は、セクショニングコンテンツを利用することでドキュメントを明確に表現するとこができる
    • ※もちろんセクショニングコンテンツを使用しなく、見出しを使用し暗黙にセクションを開始させる方法でも良い

article aside nav section

ヘッディング・コンテンツ

  • セクションのヘッダーを定義する、要は見出し。

h1 h2 h3 h4 h5 h6 hgroup

フジージング・コンテンツ

  • テキストノードのこと
  • フレージングコンテンツは入れ子にできるが、フローコンテンツを入れることができない

a (フレージング・コンテンツのみが入れられている場合) abbr area ( map 要素の子孫の場合) audio b bdi bdo br button canvas cite code command datalist del (フレージング・コンテンツのみが入れられている場合) dfn em embed i iframe img input ins (フレージング・コンテンツのみが入れられている場合) kbd keygen label map (フレージング・コンテンツのみが入れられている場合) mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time u var video wbr テキスト

エンベッディッド・コンテンツ

  • 他のリソースを読み込むコンテンツ

audio canvas embed iframe img math object svg video

インタラクティブ・コンテンツ

  • 名前の通り、インタラクティブに特化したコンテンツ
  • アクティベーション・ビヘイベア(クリックした際に何かしらのアクション動作を持つ要素)を持つ要素

a audio (controls 属性が存在している場合) button details embed iframe img (usemap 属性が存在している場合) input (type 属性が hidden 状態でない場合) keygen label menu (type 属性が toolbar 状態の場合) object (usemap 属性が存在している場合) select textarea video (controls 属性が存在している場合)

HTML5で追加された主要タグ

コンテンツモデルをひと通り把握した上で、次に新要素について調べました。

article 要素

  • articleで定義されたブロックは、そのブロックだけで意味が成り立つような独立されたコンテンツとなる
  • articleをネストする場合は、親のarticleに関連したコンテンツにする。例としてはブログのコメント
articleのネスト例
<article>
 <header>
  <h1>The Very First Rule of Life</h1>
  <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <section>
  <h1>Comments</h1>
  <article>
   <footer>
    <p>Posted by: George Washington</p>
    <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
   </footer>
   <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article>
   <footer>
    <p>Posted by: George Hammond</p>
    <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
   </footer>
   <p>Hey, you have the same first name as me.</p>
  </article>
 </section>
</article>
  • コメントに情報を与えるためにfooter要素を使用しているが、適切であれば上記例のようにfooter要素をセクションの先頭に入れることもできる

section 要素

  • ひとかたまりのコンテンツを表す
  • 見出しが付けられないのであればsectionを使うべきではない
  • 見出しが付けられるコンテンツで、article,nav,asideが適切でない場合はsectionを使う
  • articleは自己完結できる内容に対し、sectionは見出しと内容をグループ化するために用いられる
  • 見た目目的やスクリプトで使用する場合はsectionではなくdivを使うべき
section使用例
<article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h1>Red Delicious</h1>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h1>Granny Smith</h1>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
</article>

header

  • ナビゲーションやイントロダクションなどのグループを表す要素
  • 通常は見出しを利用すべきだが、必須ではない。
  • セクションの目次や検索フォーム等を囲むためにも利用できる
  • header,footerの入れ子はできない
  • headerはセクショニングコンテンツではないので、アウトラインを終了することはできない

footer

  • そのセクションに関する情報を含める要素
  • セクショニングコンテンツに対するフッターを表す
  • 通常はセクションの最後に現れるが、必ずではない

aside

  • コンテンツの本筋ではないが、軽く触れておきたいようなコンテンツ
  • 印刷慣例で補足記事として表されるもの

nav

  • ナビゲーションリンクがあるセクションを表す
  • 必要であれば複数使用することもできる

その他、html5で変更になった要素

s要素 変更されたという意味を与える。※削除訂正の場合はdel要素を使う
small要素 免責条項、著作権表記などを表す
em要素 アクセントを強くしたいテキストに使用する
strong要素 重要性を表す
hr 段落レベルのテーマの変わり目に使用する
cite要素 書籍、映画、テレビ番組、芸術などの作品タイトルを表す。※人の名前には使用できない

 

 

 


Tags:HTML5

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

トラックバック:http://blog.orangemittoo.net/post/html5_tags/trackback/