<header>

ヘッダーに使います。今まで

とやっていたのが、

こうなるわけですね。

ヘッダーになにを含めるのかは人によってまちまちです。

たとえばメインビジュアルメインビジュアルをヘッダーに含めるかどうか、メインメニューをヘッダーに含めるかどうかなど、意見は様々ですが……自分が信じる方でよいでしょう(笑)

考えて、自分なりに意図が言えればそれでよしです。

<footer>

同じく、フッターですね。

copyrightや下部サイトマップなどに使用します。

「上部に戻る」ボタンをフッターにいれるかどうかは、迷いどころです(笑)

<nav>

メインメニューを司るタグです。

そのサイトがどんなページやエリアをもっているのかをプログラムに教える重要なタグなので、漏れがないように気をつけましょう！

特にサイドバーにメインメニューがある場合に忘れやすいですね。

サイドメニューであっても、<nav>は必ずつけましょう。

<article>

記事の内容、コンテンツ本文が存在するエリアにつけるタグです。

RSS配信の際、このタグの内容から情報がとってこられたりするので、大変重要な役割を担っています！

基本的にひとつのページに「ひとつだけ」あるべきですが、コメントエリアを<article>を入れ子にしてマークアップする場合もあるみたいですね。

<aside>

補足情報をあらわすタグです。

本文とは直接関係のない裏話や註釈などに使われることを想定しているそうですが、それだとあまり使わなそう……。

なので、個人的にはサイドバーによく使ってます。

サイドバーを「メインコンテンツに関する補足情報」とみなしているわけですね。

「この記事と関連する記事」のようなエリアにもいいかも！

<section>

ざっくりと「ひとまとまり」であることを示します。

HTML5の論理構造は「セクショニングコンテンツ」という考え方をベースに構築されているので、<section>で囲まれたエリアが本当にひとまとまりにしてよいものか、常に考える必要があります。

たとえば、HTML5では<section>で囲まれて階層化されていれば、なんと<h1>タグを複数使いまわすことも推奨されているのです！

（これについてはまたいつか書きます）

また、「ひとまとまり」とはいっても、「意味的なひとまとまり」なので、レイアウトのための「配置的なひとまとまり」をつくる場合には今まで通り<div>を使って下さい。

<time>

その名の通り日時を示すタグです。

文章中にでる日付や日時にそのまま使ってもいいですし、とある記事の公開日時を示すために使ってもいい、意外と汎用性の高いタグですね(￣▽￣)

<figure>

図表であることを示します。

イラスト・図・写真など、本文中から参照される図表の<img>タグを囲みます。

基本的に<figcaption>と共に使われていますね。

<figcaption>

<figure>タグで囲んだ図表にキャプションをつけるときに使います。

上記の例の通り<figure>タグの中にマークアップする感じですね。

<summary>

後述する<details>の要約を示します。

<details>

その名の通り、任意の情報の「詳細」を示します。

<summary>によってその詳細を要約した、いわゆる見出しを囲みます。

↓

<canvas>

図形やアニメーションを描画できる画期的なタグです。

HTML5といったらこれ！

<video>

<img>タグを使うように動画を埋込みできます。

<video src="foobar">のように指定するか、後述の<source>タグを使ってファイルを指定する感じですね(´▽｀)

<audio>

<video>タグと同じ要領で、音声ファイルを埋め込めます！

便利になりましたね(￣▽￣)

<source>

<video>と<audio>のソースや種類を指定します。

<track>

キャプチャータイトルや字幕がつけられる便利なタグです。

<video>タグや<audio>タグの子要素として使われます。

<embed>

FLASHやMIDIファイルなどを埋込みするときに使います。

<menu>

<nav>タグとごっちゃになりそうですが、<nav>はサイトのナビゲーション、<menu>は「操作メニュー」を作成するタグです。

サイトよりもWebアプリなどで用いられそうですね。

　↓

<command>

<menu>タグで操作メニューを作成する際、コマンドを指定するためのタグです。

<datalist>

フォーム入力の入力候補を定義します。

まず、<input>要素のautocomplete属性の値をonにします。

次に<datalist>のid属性の値と、<input>タグのlist属性の値を一致させます。

<option>のvalue属性に値をいれて、入力候補の定義が完了です！

　↓

実際、超便利です。

<keygen>

フォームを送信する際にキーを発行するタグです。

key generatorの略ですね。

公開鍵と秘密鍵のペアを生成するためのコントローラーを生成してくれます。

　↓

<progress>

タスクの進行状況を表示するタグです。

HTML5ではサイトよりもアプリ用のデフォルトタグが増えた印象が強いですね。

<output>

<input type="range">などでユーザーが入力した結果を表示するためのタグです。

　↓

まだブラウザ対応はそんなに追いついていないようです…。

<meter>

割合としての測定値を示します。

たとえばりんごを20個中8個食べたときは、

　↓
20個中8個

となります。

<ruby>

ルビをふるためのタグです。見たことある人・使ったことある人もいると思いますが、HTML5でやっと標準仕様となりました。

使い方は、ルビのテキストを<rt>で囲み、<ruby>タグに対応していないブラウザのために<rp>でルビを囲む『（）』などの記号を指定します。

日(に)
本(ほん)

<rt>

上記の<ruby>タグにおいてルビのテキストを囲むためのタグですね。

Ruby Textの略です。

<rp>

同じく、Ruby Parenthesesの略ですね。

<ruby>タグに対応していないブラウザでは上記の例は、

日(に)本(ほん)

のようになります。

<wbr>

単語の区切り（改行）を示すタグです。日本語ではあまり気にしないでも大丈夫です。

英字が続くときなど必要なときに使いましょう。

<mark>

文章をハイライトします。

　↓

あなたが検索したのはHTML5というワードですね。

<bdi>

書字方向の相違から起こる問題を解決するタグです。

具体的に言うと、アラビア語などは右から左に読むので、ピリオドやコロンなどの記号が左側に配置されてしまい、それがリスト項目だったときにそこだけおかしな表示になってしまいます。

そんなときにその文字だけを<bdi>で囲めば、その部分だけを独立してくれるので、レイアウトが崩れなくてすむのです。

普段はあまり使わないタグかもしれませんね。