[HTML5] 新要素まとめ【2014/2/14版勧告候補】


# セクション関連要素

## section
セクション（章や節）を表す。

```HTML:HTML5
<section>
  <h1>見出し</h1>
  <p>本文</p>
</section>
```

### こんなsectionは○○だ

#### 1.見出しが無い
- 見出しが無い/用意できない =　章や節ではない = sectionじゃない

#### 2.段組みのためだけに使う
- sectionはdivの代わりじゃない
- セマンティクスを意識しよう

## nav
サイトナビゲーションセクションを表す。

```HTML:HTML5
<nav>
  <ul>
    <li><a href='/'>サイトトップ</li>
    <li><a href='/about'>このサイトについて</li>
    <li><a href='/contact'>お問い合わせ</li>
  </ul>
</nav>
```

### こんなnavは○○だ

#### 1.nav要素を大量に使っている
- nav要素を使うことができるのは、そのサイトにとって主要なナビゲーションだけ。
- 多くても３つくらい
- たとえば、ヘッダメニュー、サイドメニュー、ぱんくずリストはnav
- 検索ボックス、リンク集は非nav

#### 2.リストじゃない
- セマンティクス的に考えるとnavの中身はリスト要素であるべき
- 見た目はCSSでごにょごにょしよう

### [TIPS] ひとつのnav要素の中に複数のセクションを置く場合
section要素で分割するか、複数のnav要素を定義してaside要素で囲みます。

```HTML:section要素で分割
<nav>
  <section>
    <h3>カテゴリーから選ぶ</h3>
    <ul>
      <li><a href='/category/all'>全て</li>
      <li><a href='/category/book'>書籍</li>
      <li><a href='/category/game'>ゲーム</li>
    </ul>
  </section>
  <section>
    <h3>売り上げランキング</h3>
    <ul>
      <li><a href='/ranking/all'>全て</li>
      <li><a href='/ranking/book'>書籍</li>
      <li><a href='/ranking/game'>ゲーム</li>
    </ul>
  </section>
</nav>
```

```HTML:aside要素で囲む場合
<aside>
  <nav>
    <h3>カテゴリーから選ぶ</h3>
    <ul>
      <li><a href='/category/all'>全て</li>
      <li><a href='/category/book'>書籍</li>
      <li><a href='/category/game'>ゲーム</li>
    </ul>
  </nav>
  <nav>
    <h3>売り上げランキング</h3>
    <ul>
      <li><a href='/ranking/all'>全て</li>
      <li><a href='/ranking/book'>書籍</li>
      <li><a href='/ranking/game'>ゲーム</li>
    </ul>
  </nav>
</aside>
```

## article
ページのメインコンテンツを表す要素

```HTML:HTML5
<article>
  <h1>記事タイトル</h1>
  <p>本文</p>
  <section>
    <h2>この記事へのコメント</h2>
    <article>
      <h3>名無しさん</h3>
      <p>...</p>
    </article>
  </section>
</article>
```

### [TIPS]article要素にするかどうか決めるたったひとつの基準
そのコンテンツが **単独のフィードのエントリー** として、ふさしいかどうか。
(実際にフィードを配信しているかどうかは別として）

### こんなarticleは○○だ

#### 記事一覧をarticle要素で囲ってしまう
- トップページなどの記事一覧は個々の記事をそれぞれarticle要素で囲みます

## aside
メインコンテンツと関係が薄く、仮に無くなってもそのコンテンツには影響が無い（少ない）ものを指します。
ややつかいどころのむずかしい要素。

### こんなコンテンツはasideだ
- 広告
- 参考リンク
- アイキャッチ画像
- 補足記事
- この商品を買った人はこんな商品も買っています

### [TIPS]Q.asideにするか迷ったら
- 自分がしたいようにすればOK！
- 結局、そのコンテンツが自分のメインコンテンツにとって重要かどうか。

# ページの構造化要素

## header
セクションのヘッダーに当たる部分を表します。

```HTML5
<article>
  <header>
    <h1>見出し</h1>
  </header>
  <p>...</p>
</article>
```

## footer
セクションのフッターに当たる部分を表します。

```HTML5
<article>
  <header>
    <h1>見出し</h1>
  </header>
  <p>...</p>
  <footer>
    ※1 注釈
  </footer>
  <section>
    <h2>コメント</h2>
    ...
  </section>
</article>
```

### [TIPS] footerはセクションの末尾以外で使ってもいい
上の例ではフッターの後にコメント一覧をマークアップしています。

## main
ページの主要な部分であることを明示する。

>文書内で、main 要素が出てきていいのは、1回まで コンテンツモデルは Flow content ただし、main 要素を、article、aside、footer、header、nav 要素の子孫として使わないでね セクショニング・コンテンツではないので、アウトラインは生成しません
*via [HTML5 勧告候補に main 要素が追加、hgroup 要素は予定通り削除 | WWW WATCH](http://hyper-text.org/archives/2013/04/add_main_html5_cr.shtml)*

```HTML:HTML5
<main role='main'>
  <article>
    ...
  </article>
</main>
```

# グループ化要素

## figure/figurecaption
画像/動画やコードなどのコンテンツとキャプションをまとめます。

```HTML:HTML5
<figure>
  <img src="..." alt="...">
  <figurecaption>画像のキャプション</figurecaption>
</figure>
```

###[TIPS] figure要素は自己完結型のコンテンツ
- figure要素はメインコンテンツから参照されるコンテンツ
- たとえ別の場所にあってもメインコンテンツに影響しないこと

# マルチメディア関連要素

## video
動画の読み込みと再生を行う。
対象コーデックはブラウザによって異なる。

```HTML:srcを指定
<video src='sample.mp4'>
  <p>ご利用のブラウザでは再生できません。</p>
</video>
```

source要素を使用した場合、複数のコーデックに対応できます。
(上から順に評価し、再生可能なものを使用。）

```HTML:source要素を使用
<video>
  <source src='sample.ogg' type='video.ogg'></source>
  <source src='sample.mp4' type='video.mp4'></source>
  <p>ご利用のブラウザでは再生できません。</p>
</video>
```

### 属性
- controls ブラウザ標準の再生コントローラを表示
- autoplay 自動再生
- autobuffer 事前バッファ
- loop ループ再生
- poster='ファイル名' サムネイルの指定
- width/height サイズ指定

## audio

音声の読み込みと再生を行う。
対象コーデックはブラウザによって異なる。

```HTML:srcを指定
<audio src='sample.mp3'>
  <p>ご利用のブラウザでは再生できません。</p>
</audio>
```

source要素を使用した場合、複数のコーデックに対応できます。
(上から順に評価し、再生可能なものを使用。）

```HTML:source要素を使用
<audio>
  <source src='sample.ogg' type='video.ogg'></source>
  <source src='sample.mp3' type='video.mp3'></source>
  <p>ご利用のブラウザでは再生できません。</p>
</audio>
```

### 属性
- controls ブラウザ標準の再生コントローラを表示
- autoplay 自動再生
- autobuffer 事前バッファ
- loop ループ再生

### [Tips] video/audio要素をJavascriptから操作

[video要素、audio要素をJavaScriptから操作する－HTML5のAPI、および、関連仕様](http://www.htmq.com/video/)

早送りや、巻き戻しも実装可能。

[JavaScript を使って HTML5 ビデオ プレーヤーを制御する (Windows)](http://msdn.microsoft.com/ja-jp/library/ie/hh924823(v=vs.85).aspx)

## source
videoやaudioのメディアファイルを指定。
type属性に詳細なコーデックを指定することもできる。
メディアクエリの指定も。

```HTML:HTML5
<source src='sample.mp4' type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' media='handheld'>
```

## track
audio要素や、video要素に対して、字幕、キャプション、チャプターなどのトラック情報を指定する際に用いられます。

```
<video src="brave.webm">
 <track kind="subtitles" src="brave.ja.vtt" srclang="ja" label="Japanese">
 <track kind="subtitles" src="brave.en.vtt" srclang="en" label="English">
 <track kind="subtitles" src="brave.de.vtt" srclang="de" label="Deutsch">
</video>
```

## canvas
Javascriptで動的にイメージを生成するための要素。

```HTML:HTML5
<canvas width='300' height='150'>
  <!-- フォールバック用コンテンツ -->
</canvas>
```

# テキスト関連要素

## mark
- ハイライトを表す
- 他の場面で言及されていること
- 引用文の中でも使える（セマンティクス的には、引用もとではなく、引用主が強調していることを表す）

```HTML:HTML5
<blockquote cite='http://ja.wikipedia.org/wiki/スティーブ・ジョブズ'>
<p>当初、ジョブズは700万ドルをNeXTに投資し、1987年までには新しい製品が投入できるともくろんでいたが、実際に、NeXTの製品 (NeXTcube) を発表できたのは1988年秋で、最終版の出荷は、1989年になってのことだった。ジョブズはそれでも「5年は先取りしている」と語ったが（結果的にはMac OS Xの12年の先取り）、NeXTのロゴデザイン（ポール・ランドに依頼）に10万ドルを投じたり、OS (<mark>NEXTSTEP</mark>) の凝った仕様を開発するべく膨大な時間をかけたり、NeXTcubeの筐体デザインをフロッグデザインに依頼するなどして、過剰に資金を浪費した。1987年にはゼネラル・モーターズで成功していたロス・ペローから2000万ドルの出資を、1989年には、キヤノンから1億ドルの出資を引き出した。</p>
</blockquote>
<cite>Wikipedia - スティーブ・ジョブズ</cite>より
<p>このNEXTSTEPこそ、後のOSXやiOSの元となったOSなのです。</p>
```

表示例：

<blockquote cite='http://ja.wikipedia.org/wiki/スティーブ・ジョブズ'>
<p>当初、ジョブズは700万ドルをNeXTに投資し、1987年までには新しい製品が投入できるともくろんでいたが、実際に、NeXTの製品 (NeXTcube) を発表できたのは1988年秋で、最終版の出荷は、1989年になってのことだった。ジョブズはそれでも「5年は先取りしている」と語ったが（結果的にはMac OS Xの12年の先取り）、NeXTのロゴデザイン（ポール・ランドに依頼）に10万ドルを投じたり、OS (<mark>NEXTSTEP</mark>) の凝った仕様を開発するべく膨大な時間をかけたり、NeXTcubeの筐体デザインをフロッグデザインに依頼するなどして、過剰に資金を浪費した。1987年にはゼネラル・モーターズで成功していたロス・ペローから2000万ドルの出資を、1989年には、キヤノンから1億ドルの出資を引き出した。</p>
</blockquote>
<cite>Wikipedia - スティーブ・ジョブズ</cite>より
<p>このNEXTSTEPこそ、後のOSXやiOSの元となったOSなのです。</p>

## time
日時を表します。
pubdate属性を指定すると、ページあるいはコンテンツの投稿/更新日時を表します。

```HTML:HTML5
<article>
  <h1>タイトル</h1>
  <time datetime="2014-03-10T09:03:24" pubdate>1時間前に更新</time>
  ...
</article>
```

## data
>コンピューターに理解してほしいデータを表す。 データたる内容テキストは人間に読める自然言語で書き、value属性値にはコンピューターに理解できるように特定の型・規格等にそった書式に変換して当該データを埋め込む。
*via [data要素：HTML5.1各要素別メモ](http://mtrootyy.web5.jp/htmllint/html5memo/data.html)*



## ruby/rt/rp/rb/rtc
テキストにルビをふります。

### ruby
ルビを振るテキストを囲む

### rp
ルビが使えないブラウザへのフォールバック
(使えるブラウザではこの中は無視されます）

### rb
ルビ定義のルビを振られる部分を明示する。

### rtc
ルビ定義のうち、ルビ注記部分のコンテナとして使用。主に二重ルビで用いる。

```HTML:HTML5
<ruby>
  佐村河内<rp>(</rp><rt>さむらごうち</rt><rp>)</rp>
  守<rp>(</rp><rt>まもる</rt><rp>)</rp>
</ruby>
```
表示例：

<ruby>
  佐村河内</rb><rp>(</rp><rt>さむらごうち</rt><rp>)</rp>
  守<rp>(</rp><rt>まもる</rt><rp>)</rp>
</ruby>

## wbr
改行しても良い位置を示す。
- ただしwbrの前後は同一の単語とはみなされない
- このためセマンティクス上は長い単語を分割するために使うことはできない

## bdi
bidirectional（双方向）の略で、英語とヘブライ語が混ざるような双方向テキストにおいて、周囲の方向と独立して存在する区分を示すのに用いられます。

# インタラクティブ（WEBアプリケーション関連）要素

## details/summary
開閉可能な詳細情報の表示。
summaryには要約を入れます。

```HTML:HTML5
<details open>
  <summary>詳細情報</summary>
  <p>ここに詳細情報が入ります。</p>
</details>
```
表示例：
<details open>
  <summary>詳細情報</summary>
  <p>ここに詳細情報が入ります。</p>
</details>

# template
再利用を前提とした断片。
デフォルトではレンダリングされず、Scriptから利用する。

# dialog

>ダイアログボックス、インスペクタ、またはウィンドウといったユーザーがタスクを実行すると相互作用するアプリケーションの一部を示す。
*via [dialog要素：HTML5.1各要素別メモ](http://mtrootyy.web5.jp/htmllint/html5memo/dialog.html)*


# フォーム関連要素

## progress
進歩を表します。

```HTML:HTML5
<progress value='70' max='100'>
  70% <!-- フォールバック -->
</progress>
```

表示例：

<progress value='70' max='100'>
  70% <!-- フォールバック -->
</progress>

## meter
限定された範囲における値を表す。
low/high属性を指定した範囲ごとで領域を分割することができる。
- low 低領域
- hight 高領域
- optimum 最適値

```HTML:HTML5
<meter value='10' min='0' max='100' low='30' high='70' optimum='100'>
  4/5 <!-- フォールバック -->
</meter>
```

表示例： value='10'
<meter value='10' min='0' max='100' low='30' high='70' optimum='100'>
  4/5 <!-- フォールバック -->
</meter>

表示例： value='50'
<meter value='50' min='0' max='100' low='30' high='70' optimum='100'>
  4/5 <!-- フォールバック -->
</meter>

表示例： value='90'
<meter value='90' min='0' max='100' low='30' high='70' optimum='100'>
  4/5 <!-- フォールバック -->

表示例： value='100'
<meter value='100' min='0' max='100' low='30' high='70' optimum='100'>
  4/5 <!-- フォールバック -->
</meter>

## output
フォームの計算結果を表す。
valueの値を直接出力する特性を持つ。

```
<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
 <input name=a type=number step=any value=5> +
 <input name=b type=number step=any value=3> =
 <output name=o>8</output>
</form>
```

表示例：

<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
 <input name=a type=number step=any value=5> +
 <input name=b type=number step=any value=3> =
 <output name=o>8</output>
</form>

## keygen
フォームデータのセキュリティ強化に用いるための鍵ペアを作成する。
秘密鍵はブラウザ側に保存され、公開鍵はサーバに送られます。

```
<keygen name="key" challenge="123456789">
```

表示例：

<keygen name="key" challenge="123456789">

## datalist

optionと組み合わせて入力項目の選択肢を定義します。

```
<label>
  好きなスポーツは？
  <input type="text" name="fav_sports" list="sports_list">
  <datalist id="sports_list">
    <option value="サッカー">
    <option value="野球">
    <option value="ゴルフ">
  </datalist>
</label>
```

表示例：

<label>
  好きなスポーツは？
  <input type="text" name="fav_sports" list="sports_list">
  <datalist id="sports_list">
    <option value="サッカー">
    <option value="野球">
    <option value="ゴルフ">
  </datalist>
</label>

# 参考URL
[HTML 要素 - HTML5タグリファレンス - HTML5.JP](http://www.html5.jp/tag/elements/index.html)
[HTML5.1各要素別メモ](http://mtrootyy.web5.jp/htmllint/html5memo/0mokuji.html)
[HTML5プロフェッショナル認定試験 無料セミナー - Qiita](http://qiita.com/budougumi0617/items/5be51d12411df79efdff)