コーディング/jQueryのアイデア /

HTML5の新規タグ「section、article、header、footer」の使い方

さて今回は、HTML5で追加されたタグ、section/article/header/footerの使い方を改めて復習しようとおもいます。
Web制作の現場でも、HTML5がだいぶ普及してきたことによって、使う機会が多くなっている実感があります。

さて、HTML5とこれまでのXHTMLの違いを簡単に説明すると、『HTML構造がより明確に区別され簡略化された』ということでしょう。
HTML4やXHTMLのタグ要素だけでは対応しにくいことを再定義したものが、HTML5です。

つまり、「HTML5とは、現在のWeb制作者の悩みを解決してくれるもの」といってもよいでしょう!
なので、みんなで使いましょう…ってことですね。

 

さて、HTML5の目玉の一つである。新規タグですが、「これどういう場面で使ったらいいの!!!」とか「sectionとかarticleとか、意味わかんねーよ!」とか、そういう心の叫びも聞こえてきそうなのでちょっと復習ですね。

1.headerとfooterの使う際のお作法。

新規タグの中でおそらく、何に使うかわかるタグの首位を突っ走るheaderとfooterタグですが、 これは、まさしくコンテンツのヘッダー部分、フッター部分に使うタグです。

説明の必要も無いぐらいですね。
最初にでてくる疑問として、「ヘッダーとフッター部でしか使えないのか?」ということですが。
文法的にも、一つだけというルールはなく、例えばブログサイトのブログ記事ひとつひとつを囲む際にも使うことができるのです。

この様に、一覧ページの一つ一つのコンテンツを囲む要素にも使う事ができます。

 

2.section、articleの使う場面

headerタグ、footerタグと違ってどうしたらいいか戸惑うレベルのsection、articleタグだと思います。

 

sectionタグとは?

そもそもSectionの英単語の意味を調べてみると断片とか、部分と言った意味になります。
sectionタグに関してはコンテンツごとの固まりとなるものを囲むものとなります。

これをカレーレシピに例えに、コーディングしてみると、

  1. 野菜の皮を剥く
  2. 肉・野菜を炒める
  3. 肉と野菜を鍋いれて煮込む
  4. 完成!
この行程をsectionタグを用いてコーディングすると以下のようになります。

このように『カレーをつくる』という目的に関連するものを区切るのがSectionタグとなります。

 articleタグとは?

続いてarticleタグですが、sectionに似ていますが根本的に違います。
こちらは、『自己完結した内容』に対したものに対して、用いるタグと定義付けられています。

『自己完結した内容』とは何かを例えると、ブログサイトやニュースサイトを例にすると分かりやすいと思います。

ブログサイトの例

このように、ひとつひとつの内容が異なるのものを区別するものが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>  

この記事を書いた人

solecolor-design

PAGE TOP