概要
header,footerタグについて説明します。
内容
headerはイントロダクションやナビゲーションの支援となるグループを表します。
footerはセクショニングコンテンツのフッターを表します。
よくある例としては、サイトのタイトルとナビゲーションが画面上部にあり
コンテンツが画面中央にあり、コピーライトなどを表示するフッターが画面下部にあるような場合です。
この場合HTML5ではコンテナとなるdivタグのidでheader,contents,footerなどで分類する場合が
多かったかと思いますが、html5はタグ自体でその文書構造を表すことが出来ます。
サンプル
<!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <script type="text/javascript"></script> <title>HTML5ページ構成サンプル</title> <style type="text/css"> h1,h2 { border-style:solid; border-width:1px; background-color:yellow; } h1 { font-size:16px; } h2 { font-size:14px; margin-left:20px; } p { font-size:12px; border-style:solid; border-width:1px; background-color:gray; margin-left:30px; } article { border-style:solid; border-width:1px; border-color:green; padding:5px; } section { border-style:solid; border-width:1px; border-color:red; padding:5px; } aside { border-style:solid; border-width:1px; border-color:blue; padding:5px; margin:5px; } header { border-style:solid; border-width:1px; border-color:yellow; padding:5px; margin:5px; } footer { border-style:solid; border-width:1px; border-color:purple; padding:5px; margin:5px; } </style> </head> <body> <header> <hgroup> <h1>HTML5ページ構成サンプル</h1> <h2>概要</h2> <p>HTML5のページ構成サンプルをご紹介します</p> </hgroup> </header> <article> <hgroup> <h1>headerタグについて</h1> <h2>headerタグの文法</h2> <section>headerタグの文法は・・・・</section> <h2>headerタグのサンプル</h2> <section>headerタグのサンプルは・・・・</section> </hgroup> </article> <article> <hgroup> <h1>footerタグについて</h1> <h2>footerタグの文法</h2> <section>footerタグの文法は・・・・</section> <h2>footerタグのサンプル</h2> <section>footerタグのサンプルは・・・・</section> </hgroup> </article> <footer>Copyright (C) 2012 tbpg All Rights Reserved.</footer> </body> </html>