こんにちは、中村です。
今回はHTML5に追加された新要素、新属性について紹介します。
ただし、今回紹介する新要素はセマンティック・ウェブを実現するための要素を紹介するため、
video要素やcanvas要素といった「The HTML5」的な要素には触れません。
また、新属性と言いましたが、今回はinput要素に追加された属性・タイプを紹介します。
○header・footer要素
header要素・footer要素はそれぞれ、ページやセクションのヘッダー・フッターを表すために使用します。
これらの要素は、セクショニング・コンテンツではないため、アウトラインに影響はありません。
つまり、コードに意味を持たせるためだけに使用する要素になります。
実装例はこのようになります。
<body> <header> <h1 id="top">2012/08/22の記事～大阪桐蔭決勝へ</h1> </header> <section id="main"> <header> <h2>大阪桐蔭が明徳義塾を破り決勝へ</h2> </header> <p>大阪桐蔭、決勝進出です。</p> <footer> <a href="#top">ページの先頭へ</a> </footer> </section> <footer> <a href="http://example.com/index.html">ホームページへ</a> </footer> </body>
○hgroup要素
hgroup要素は、<h1>-<h6>要素をまとめるために使用します。
<hgroup> <h1 class="title">魔女の宅急便</h1> <h2 class="copy">おちこんだりもしたけれど、私はげんきです。</h2> </hgroup> <hgroup> <h1 class="title">耳をすませば</h1> <h2 class="copy">好きなひとが、できました。</h2> </hgroup> <hgroup> <h1 class="title">もののけ姫</h1> <h2 class="copy">生きろ。</h2> </hgroup> <hgroup> <h1 class="title">千と千尋の神隠し</h1> <h2 class="copy">トンネルのむこうは、不思議の町でした。</h2> </hgroup>
hgroup要素でまとめられた<h1>-<h6>要素は、まとめられた中の最上位の要素しかアウトラインに表示されません。
つまり、上記サンプルのアウトラインはこのようになります。
1. 魔女の宅急便 2. 耳をすませば 3. もののけ姫 4. 千と千尋の神隠し
なかなか使用する機会はないとは思いますが、アウトラインを意識した時に必要ななることもあるかと思います。
○figure要素
図形やプログラムコードなどに使用する要素です。
ただし、W3C Working Draftには以下の様な説明があります。
figure要素は自己完結型であり、一般的に本文中から単体で参照されます。 figure要素は、本文に注釈をつけるための図表、写真、コードリストなどにつけて使用できますが、 本文に影響を与えず、付録やページの横の方に分離できなければいけない。
正直なところさっぱりですが、次のような理解で良いと思います。
・サンプルコード
・「図XX ○○の推移」みたいな図表
等
○input要素の新属性・新タイプ
input要素に追加された属性・タイプは、今まで多くの人がJavaScriptで実現していたことを統合した形になります。
例えば、画面の入力に対してのクライアント側のチェックを実施する場合、JavaScriptを用いてチェック・結果の表示を行なっていたかと思います。
しかしながら、HTML5では、input要素のtype属性や新属性を利用することでJavaScriptを使用しなくとも入力に対するチェックが実施されるようになります。
また、デフォルトフォーカス指定、オートコンプリートの有無など便利な属性が多く追加されていますので、下のまとめサイトを見て確認いただければと思います。
http://www.html5-memo.com/form/input_contents/
http://www.html5-memo.com/form/input_type/