さて今回は、HTML5で追加されたタグ、section/article/header/footerの使い方を改めて復習しようとおもいます。
Web制作の現場でも、HTML5がだいぶ普及してきたことによって、使う機会が多くなっている実感があります。
さて、HTML5とこれまでのXHTMLの違いを簡単に説明すると、『HTML構造がより明確に区別され簡略化された』ということでしょう。
HTML4やXHTMLのタグ要素だけでは対応しにくいことを再定義したものが、HTML5です。
つまり、「HTML5とは、現在のWeb制作者の悩みを解決してくれるもの」といってもよいでしょう!
なので、みんなで使いましょう…ってことですね。
さて、HTML5の目玉の一つである。新規タグですが、「これどういう場面で使ったらいいの!!!」とか「sectionとかarticleとか、意味わかんねーよ!」とか、そういう心の叫びも聞こえてきそうなのでちょっと復習ですね。
1.headerとfooterの使う際のお作法。
新規タグの中でおそらく、何に使うかわかるタグの首位を突っ走るheaderとfooterタグですが、 これは、まさしくコンテンツのヘッダー部分、フッター部分に使うタグです。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>サンプル</title> </head> <body> <header> <p>ヘッター部</p> </header> <div>コンテンツ</div> <footer>フッター部</footer> </body> </html> |
説明の必要も無いぐらいですね。
最初にでてくる疑問として、「ヘッダーとフッター部でしか使えないのか?」ということですが。
文法的にも、一つだけというルールはなく、例えばブログサイトのブログ記事ひとつひとつを囲む際にも使うことができるのです。
1 2 3 4 5 6 7 8 9 10 11 |
<div class="item"> <header class="head"> <h2>記事タイトル</h2> </header> <div class="content"> <p>雨ニモ負ケズ、風ニモマケズ、丈夫な身体を持ち...</p> </div> <footer class="footer"> <p>日付とか~</p> </footer> </div> |
この様に、一覧ページの一つ一つのコンテンツを囲む要素にも使う事ができます。
2.section、articleの使う場面
headerタグ、footerタグと違ってどうしたらいいか戸惑うレベルのsection、articleタグだと思います。
sectionタグとは?
そもそもSectionの英単語の意味を調べてみると断片とか、部分と言った意味になります。
sectionタグに関してはコンテンツごとの固まりとなるものを囲むものとなります。
これをカレーレシピに例えに、コーディングしてみると、
- 野菜の皮を剥く
- 肉・野菜を炒める
- 肉と野菜を鍋いれて煮込む
- 完成!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<section> <h1>野菜の皮を剥く</h1> <p>ジャガイモ、ニンジンの皮を剥きます</p> </section> <section> <h1>肉・野菜を炒める</h1> <p>先程皮を向いた野菜とお肉を炒めます。</p> </section> <section> <h1>肉と野菜を鍋に入れて煮込む</h1> <p>炒めた肉と野菜を鍋にいれて煮込みます。程よく煮込んだら、カレールーを入れて更に煮込みます。</p> </section> <section> <h1>完成</h1> <p>特製カレーの出来上がり!!</p> </section> |
articleタグとは?
続いてarticleタグですが、sectionに似ていますが根本的に違います。
こちらは、『自己完結した内容』に対したものに対して、用いるタグと定義付けられています。
『自己完結した内容』とは何かを例えると、ブログサイトやニュースサイトを例にすると分かりやすいと思います。
ブログサイトの例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<h1>記事一覧</h1> <article> <h2>今年も大晦日がやってきました!</h2> <span>2013.12.31</span> <p>気がついたら大晦日がやってきました!!大掃除まだやってません</p> </article> <article> <h2>あけましておめでとう!</h2> <span>2014.01.01</span> <p>あけましておめでとうございます。毎日寒いですね。</p> </article> <article> <h2>お餅が美味しいです!</h2> <span>2014.01.03</span> <p>お餅が美味しいです。きなこもちが一番好きです!</p> </article> |
このように、ひとつひとつの内容が異なるのものを区別するものがarticleタグとなります。
まとめ!
- 内容が異なるものを区別する場合は、articleタグを使う。
- 関連している内容を区別する場合は、sectionタグを使う。
- 厳密にどちらかわからない場合は大人しくdivタグを使う
まとめの最後にいきなりぶっこみましたが、「これどっちかわからない?」という内容に関しては、新規タグを使う事に執着せずに divタグを使うほうが、いろいろと幸せになれると思います。
おまけ!
XHTML1.1やHTML4と異なり、HTML5ではh1タグは複数登場しても良いとされています。
つまり、○○の見出しにh1、△△の見出しにh1とできるようになっています。寧ろ・・・『h1だけ使ってろ!!』との事、じゃあなんでh2~h6まであるかと(残ってる)いうと
こちらは大人の事情というか、HTML5は昔のブラウザを切る(新規タグに関しては結果として認識できませんが)よりも互換性を優先したた為のようです。
レガシーブラウザ(IE8未満)のブラウザが消滅して、HTML5.2とかHTML6とかの時代になったら若しかしたらhタグに廃統合されるかもしれませんね。
※W3Cからの勧告は2014年のようですので、今年のどっかで正式にHTML5 が勧告されるようです。
W3Cプレスリリース http://www.w3.org/2012/12/html5-cr,/p>