HTML5で追加されたタグとその使用法

HTML5勉強企画第2弾。

今回も参照させてもらったサイトを以下に（敬称略）。

• HTML5 W3C working draft
• livedoor labs EDGE
• EDGEのトップページをHTML5化した件について:Blog hamashun.com
• HTML5のセクション(その2)：vantguarde

前記事同様、基本的にW3Cのワーキングドラフト（英文）を読んでいるので、ここに書かれていることが原文と全く同じとは限りません。翻訳に際して生じる間違いがある場合がございますこと、ご理解いただけると助かります。

間違いを発見した場合、ご連絡いただけると勉強になるのでとても嬉しいです。
連絡先：[e-mail]

section

文章の章を表すのに使う。ある程度意味の同じコンテンツをまとめる。
一般的にheader要素と共に用いられ、footer要素をともなうこともある。

header

見出しを表す。
基本的に、サイトのタイトルとタグライン・サブタイトルを示すheadline要素（h1～h6の見出しタグ）を囲むのに用いる。
また、section要素のタイトル・サブタイトル、文章の概略や説明を示すために使用してもよい。

header要素は、h1と同様高い重要度を持つというように解釈される。

footer

その文章を誰が書いたのか、いつ書いたのか、関連している記事はどれか、などをマークアップするためのタグ。
footer要素の中に著作者の連絡先を入れる場合、その部分をaddressタグで囲まなければならない。
addressタグは、記事に対する直接の連絡先以外をマークアップしてはいけない。
たとえば郵便番号とか、会社の住所とか。

（それらが本当に記事の直接の連絡先だったらOKだが、メールアドレスで記事に対して対応するのが一般的な気がするので、その場合はメールアドレスをaddressでマークアップする。）

ちなみに、footer要素は必ずsection要素の後ろに来なければいけないわけではなく、「次のページへ」などといったコンテンツの上部・下部に共通のリンクがあった場合は、header要素の前にfooter要素を持ってくることも可能。

以上のsection、header、footerは、それぞれが入れ子にはならず、並列の関係である。

article

独立した文章の部分を囲む。
header要素、section要素、footer要素を囲んでひとつの記事とするもの。
articleでマークアップする例としては、フォーラムの投稿や、雑誌・新聞記事、ブログエントリ、ユーザコメントなどが挙げられる。

articleタグを入れ子にする場合は、親のarticleと子のarticleに関連性がないといけない。
たとえば、ブログエントリでコメントを表示する場合は、ブログエントリとそのコメントをarticleタグでくくり、入れ子にしてもOKな例だという。

<article>
<header>ブログエントリ</header>
<section>内容</section>
<footer>著作情報</footer>
  <article>
  <header>コメント</header>
  <section>コメント群</section>
  </article>
</article>

という感じになるということだろうか？（予想）

footerタグに入れる作者情報は、article要素と結びつくが、
入れ子の中にあるarticleには適用されないそうだ。

また、article要素内にあるheader要素、footer要素はその記事のヘッダー・フッターと解釈され、
body直下（articleの外）にあるheader要素、footer要素は、そのサイト全体のヘッダー・フッターというふうに解釈されるようです。

だんだんややこしくなってきましたね！

nav

ページ内の関連リンクや、他の関連するページへのリンク集合、
つまりナビゲーションリンクをマークアップするもの。

かといって、ページ内のナビゲーション的なリンクをすべてnavタグで囲む必要はなく、
主幹となる（primary）ナビゲーションに対して囲めばよい。

ただ、サイトの下部によくある「お問い合わせ」「サイトマップ」などといった、サイト共通のユーティリティ系のリンクは、footerタグで囲んでくださいとのこと。

aside

本編から少しそれた、追記とか、その周辺のものをマークアップするときに使用する。
たぶん、「余談だが」あたりをマークアップするときに使用されると思われます。

dialog

ミーティング、チャット、台本など、会話文をマークアップするのに使う。

<dialog>
<dt>発話者</dt><dd>発話内容</dd>
<dt>発話者</dt><dd>発話内容</dd>
</dialov>

として使う。
定義リストの派生系といった感じだろうか？

mark

テキストにハイライトを入れる（蛍光マーカーで線を引く感じ）。
たとえば、引用文を使用するときや、翻訳の原文として使用するときなどに、
「その文章の書き手は強調していないけれども、自分はこの部分を強調して読んでもらいたい」
というときなどにその部分をmark要素でマークアップするようだ。

また、

<p>The highlighted part below is where the error lies:</p>
<pre><code>var i: Integer;
begin
   i := <mark>1.1</mark>;
end.</code></pre>

のようにcode要素の中の計算式の答えをmarkでマークアップしている例文があることから、
「それ単体では意味を為さないが、注目して欲しい点」
「何かの過程を示していて、前の過程との変更点」
を示したいときに使うのかなと思いました。

time

日付、時間をマークアップするタグ。
たとえば、

<time datetime="2009-04-04T14:00">昨日の昼</date>にブログ更新しました。

という使用法もできるし、

単に

今日は<time>8:00</time>に起きました。

というようにもできるらしい。

他にも種類は色々あったのですが、
私が使えそうな範囲はこのあたりまででしたので、ここでご紹介させていただきました。

---

全体を見て思ったのが、
「HTML5はブログのマークアップ用に作られてる気がする」ということ。

普通にWebサイトを作っていて、ひとつのページ内に全然違うテーマの文章が存在するのは稀だと思います。
ブログでは基本的に記事が新しい順に並んでいくので、内容の違う記事が一挙に同じページにあがることになり、このarticleといったタグの必要が出てくるのだと思います。

HTMLにおけるマークアップの対象も、論文などの一貫した文章から、ブログ・日記などといった散文的なものに変わっていっていますし、時代の流れ、ですね。

これでブログを構築したら面白そうだなと考えてます。