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

セクション関連要素

section

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

HTML5

<section>
  <h1>見出し</h1>
  <p>本文</p>
</section>

こんなsectionは○○だ

1.見出しが無い

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

2.段組みのためだけに使う

• sectionはdivの代わりじゃない
• セマンティクスを意識しよう

nav

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

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要素で囲みます。

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>

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

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

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

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

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

footer

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

<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

HTML5

<main role='main'>
  <article>
    ...
  </article>
</main>

グループ化要素

figure/figurecaption

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

HTML5

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

###[TIPS] figure要素は自己完結型のコンテンツ

• figure要素はメインコンテンツから参照されるコンテンツ
• たとえ別の場所にあってもメインコンテンツに影響しないこと

マルチメディア関連要素

video

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

srcを指定

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

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

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

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

srcを指定

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

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

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、および、関連仕様

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

JavaScript を使って HTML5 ビデオ プレーヤーを制御する (Windows)

source

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

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で動的にイメージを生成するための要素。

HTML5

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

テキスト関連要素

mark

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

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>

表示例：

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

Wikipedia - スティーブ・ジョブズより

このNEXTSTEPこそ、後のOSXやiOSの元となったOSなのです。

time

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

HTML5

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

data

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

ruby/rt/rp/rb/rtc

テキストにルビをふります。

ruby

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

rp

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

rb

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

rtc

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

HTML5

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

表示例：

佐村河内(さむらごうち) 守(まもる)

wbr

改行しても良い位置を示す。

• ただしwbrの前後は同一の単語とはみなされない
• このためセマンティクス上は長い単語を分割するために使うことはできない

bdi

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

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

details/summary

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

HTML5

<details open>
  <summary>詳細情報</summary>
  <p>ここに詳細情報が入ります。</p>
</details>

表示例：

詳細情報

ここに詳細情報が入ります。

template

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

dialog

ダイアログボックス、インスペクタ、またはウィンドウといったユーザーがタスクを実行すると相互作用するアプリケーションの一部を示す。
via dialog要素：HTML5.1各要素別メモ

フォーム関連要素

progress

進歩を表します。

HTML5

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

表示例：

70%

meter

限定された範囲における値を表す。
low/high属性を指定した範囲ごとで領域を分割することができる。

• low 低領域
• hight 高領域
• optimum 最適値

HTML5

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

表示例： value='10'

4/5

表示例： value='50'

4/5

表示例： value='90'

4/5

表示例： value='100'

4/5

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>

表示例：

+ = 8

keygen

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

<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>

表示例：

好きなスポーツは？

参考URL

HTML 要素 - HTML5タグリファレンス - HTML5.JP
HTML5.1各要素別メモ
HTML5プロフェッショナル認定試験 無料セミナー - Qiita