HTML5 (2)

更新日:2018年08月17日

作成日:2017年07月04日

HTML5 では、セクションに関連する要素以外にも、新しい要素が追加されたり、意味が変更されたりしています。

よく使う新要素

以下は、比較的良く使われる HTML5 での新要素 time 要素、figure 要素、figcaption 要素、picture 要素、source 要素、mark 要素、main 要素に関しての説明です。

time 要素

time 要素は、日付や時刻を表記する際に、24時間表記の時刻またはグレゴリオ暦による正確な日付 (時刻やタイムゾーンを伴うことも可能) を表す際に使用します。日時を記述するのに、必ず time 要素を使用しなくてはならないわけではなく、コンピュータやブラウザが理解できるように日時を示すことが目的です。

注意点: この要素は計算を行えない特殊な日付に対しては適切でなく、またグレゴリオ暦導入前の日付に対して使用するべきではありません (日付の計算で混乱するため)。

time element / time 要素
カテゴリー フローコンテンツ
フレージングコンテンツ
パルバブルコンテンツ
この要素が使える場所 フレージングコンテンツが期待される場所
コンテンツモデル フレージングコンテンツ

値にはコンピューターによって取り扱い可能な文字列を指定できます。言い換えると、time 要素の日時は、規定のフォーマット(書式)に従ってマークアップする必要があります。

フォーマットは、「年-月-日T時:分:秒タイムゾーンオフセット」のようになって、以下のようなルールになっています。

  • 年月日はハイフン(-)で繋ぐ
  • 年月日と時刻は大文字の T(または半角スペース)で繋ぐ
  • 時分秒はコロン(:)で繋ぐ
  • タイムゾーンオフセットは +09:00 または +0900 等(日本などの場合)

具体的には、以下のようなフォーマット(書式)で記述します。この他のフォーマットについては「W3C time element」を参照ください。

<!--有効な月文字列-->
<time>2011-11</time>

<!--有効な日付文字列-->
<time>2011-11-12</time>

<!--有効な西暦なし日付文字列-->
<time>11-12</time>

<!--有効な時刻文字列-->
<time>14:54</time>

<time>14:54:39</time>

<time>14:54:39.929</time>

<!--有効な浮動日時文字列:日付と時刻を T または半角スペースで区切る-->
<time>2011-11-12T14:54</time>

<time>2011-11-12T14:54:39</time>

<time>2011-11-12T14:54:39.929</time>

<time>2011-11-12 14:54</time>

<time>2011-11-12 14:54:39</time>

<time>2011-11-12 14:54:39.929</time>

以下は有効なタイムゾーンオフセット文字列の例です。Z は協定世界時(UTC)を表します。(日本時間は +09:00 または +0900)

<time>Z</time>

<time>+0000</time>

<time>+00:00</time>

<time>-0800</time>

<time>-08:00</time>

以下は有効なグローバル日時文字列の一例です。

<time>2011-11-12T14:54Z</time>

<time>2011-11-12T14:54+0000</time>

<time>2011-11-12T14:54+00:00</time>

<time>2011-11-12 14:54Z</time>

<time>2011-11-12 14:54+0000</time>

<time>2011-11-12 14:54+00:00</time>

経過時間や期間を表す場合は、2つの書式があります。1つは、数値に週「w」、日「d」、時間「h」、分「m」、秒「s」の単位を付け、半角スペースで区切って表す書式です。

<!--1週間と5日3時間20分17秒-->
<time>1w 5d 3h 20m 17s</time>

もう1つは「P」に続けて、数値に日「D」の単位を付け、「T」で区切った後に、同じく時間「H」、分「M」、秒「S」を表す書式です。

<!--1週間と5日(12日)3時間20分17秒-->
<time>P12DT3H20M17S</time>

datetime 属性

datetime 属性が指定されている場合は、日時以外の内容を time 要素内に記述することが可能です。

<time datetime="2017-05-22">今日</time>

datetime 属性に規定のフォーマットに従った値を指定すれば、要素の内容は自由に記述できます。

<p>△△は <time datetime="2017-07-07 19:00">7月7日</time>に開催します。</p>

<p>1着の記録は、<time datetime="2h 34m 56S">2時間34分56秒</time>でした。</p>

また、pubdate 属性は現在は廃止されています。

figure 要素

figure 要素は、本文から参照されるイラスト・図表・写真・ソースコードなどのまとまりを表します。figure 要素によるまとまりは、単体で独立している必要があります。つまり、その部分を文書から切り出したとしても元の文書に影響がないとともに、切り出した内容自体で意味が通るようにする必要があります。単なる雰囲気のための画像などには使えません。多くの場合、キャプション(figcaption 要素)を伴って使用されます。

また、figure要素は、セクショニングルートカテゴリに属しているので、記述されている文書のアウトラインには影響を与えません。そのため、この要素内では独自の見出しのランク付けを行うことができます。

figure element / figure 要素
カテゴリー フローコンテンツ
セクショニングルート
パルバブルコンテンツ
この要素が使える場所 フローコンテンツが期待される場所
コンテンツモデル 以下のいずれか。
  • フローコンテンツ
  • 1つの figcaption 要素に続けてフローコンテンツ
  • フローコンテンツに続けて一つの figcaption 要素

以下のように本文と関連した写真や図版、 ソースコードなどを掲載するときに使います。

<h3>ニューヨーク散歩</h3>
<p>ニューヨークは散歩がいい。見るものが多いので飽きることがありません。</p>
<figure>
 <img src="/images/wvillage.jpg" alt="古い建物の多いビレッジの風景">
</figure>
<p>ウェストビレッジは昔からアーティストに愛されてきました。</p>
<p><a href="#c3">以下は</a> load() の使用例です。</p>
<figure id="c3">
  <pre><code>$("#jqs-1 button").click(function() {
   $("#jqs-1 .injectToMe").load("../samples/ajax_02.html table#schedule");
});</code></pre>
</figure>
<p>load() は指定の URL に向けて、Ajax 要求の発行を開始します。</p>

figcaption 要素

figcaption 要素は、その親要素となる figure 要素の内容にキャプションを表示する要素です。キャプションとは、写真、挿絵、図表、コードなどの内容を表す説明文(テキスト)のことです。

figure 要素において、figcaption 要素は必須という訳ではありません。

figcaption element / figcaption 要素
カテゴリー なし
この要素が使える場所 figure 要素の最初または最後の子要素として記述可能
コンテンツモデル フローコンテンツ

figcaption 要素は、figure 要素内の最初か最後に、1つだけ記述できます。

<h3>ニューヨーク散歩</h3>
<p>ニューヨークは散歩がいい。見るものが多いので飽きることがありません。</p>
<figure>
  <figcaption>ウェストビレッジの古い建物</figcaption>
  <img src="/images/wvillage.jpg" alt="古い建物の多いビレッジの風景" />
</figure>
<p>ウェストビレッジは昔からアーティストに愛されてきました。</p>

以下は、figure 要素の途中に figcaption 要素があるので誤った使い方になります。

<h3>ニューヨーク散歩</h3>
<p>ニューヨークは散歩がいい。見るものが多いので飽きることがありません。</p>
<figure>
  <h4>ウェストビレッジ</h4> 
  <figcaption>ウェストビレッジの古い建物</figcaption> <!-- 誤まり -->
  <img src="/images/wvillage.jpg" alt="古い建物の多いビレッジの風景" />
</figure>
<p>ウェストビレッジは昔からアーティストに愛されてきました。</p>

以下は、最後になるので正しい使い方です。

<h3>ニューヨーク散歩</h3>
<p>ニューヨークは散歩がいい。見るものが多いので飽きることがありません。</p>
<figure>
  <h4>ウェストビレッジ</h4> 
  <p>ウェストビレッジを歩いていると古い建物が目に付きます。</p>
  <img src="/images/wvillage.jpg" alt="古い建物の多いビレッジの風景" />
  <figcaption>ウェストビレッジの古い建物</figcaption>
</figure>
<p>ウェストビレッジは昔からアーティストに愛されてきました。</p>

picture 要素

picture 要素は、レスポンシブイメージを文書内に埋め込む要素です。サイズや内容の異なる複数の画像候補を用意することで、ユーザーの閲覧環境に適した画像を表示させることができます。(HTML 5.1 で追加されました。)

picture 要素に内包された複数の source 要素と、img 要素により画像リソースを提供します。

ブラウザ実装状況:http://caniuse.com/#feat=picture

picture element / picture 要素
カテゴリー フローコンテンツ
フレージングコンテンツ
エンベッディッドコンテント
この要素が使える場所 エンベッディッドコンテントが期待される場所
コンテンツモデル 0個、または複数の source 要素に続いて、1つの img 要素。オプションでスクリプト支援要素

img 要素と picture 要素の使い分け

レスポンシブイメージは、img 要素または picture 要素で設定することができますが、それぞれ以下のような特徴があります。

img 要素
同じ内容の画像で、サイズや解像度の異なる画像をセットしたい場合に使用します。条件の設定は可能ですが、実際にどの画像が使用されるかはブラウザ側の裁量に委ねられます。
picture 要素
サイズや解像度の違いだけでなく、内容の異なる画像をセットしたい場合に使用します(デバイスにより縦横比の異なる画像を表示させたい場合など)。picture 要素による設定では、指定した条件下で強制的に画像を切り替えることができます。

以下は、3枚の画像(large.png、medium.png、small.png)を用意し、ブラウザの幅により表示する画像を切り替える例です。

以下の場合、ウィンドウサイズが 980px 以上なら large.png が、640px 以上なら medium.png が 、640px 未満なら small.png が読み込まれます。

<picture>
  <source media="(min-width: 980px)" srcset="images/large.png">
  <source media="(min-width: 640px)" srcset="images/medium.png">
  <img src="images/small.png" alt="サンプル画像"> 
</picture>   

Window Width :

サンプル画像

基本的な記述方法(ウィンド幅による画像の切り替え)は、

  • source 要素media 属性を使ってメディアクエリを設定(条件を設定)
  • source 要素の srcset 属性を使って画像候補を指定(表示される画像を設定)
  • 必要に応じて複数の source 要素を配置
  • source 要素の後に img 要素を配置して、デフォルトで表示される画像を指定

img 要素は必ず最後に記述します。img 要素の後に書かれた source 要素はすべて無視されるので注意が必要です。また、ブラウザが picture 要素をサポートしていない場合には、自動的に img 要素に指定された画像が表示されます。

以下は画像解像度(ピクセル密度)により画像を切り替える例です。

<picture>
  <source media="(min-width: 768px)" 
          srcset="images/large.png 1x,
                  images/large_1.5x.png 1.5x,
                  images/large_2x.png 2x" />
  <source media="(min-width: 320px)" 
          srcset="images/medium.png 1x,
                  images/medium_1.5x.png 1.5x,
                  images/medium_2x.png 2x" />
  <img src="images/small.png" 
       srcset="images/small_1.5x.png 1.5x,
               images/small_2x.png 2x"
       alt="サンプル画像" />
</picture>

srcset 属性には複数の画像リソースを指定でき、それぞれの画像はカンマ区切りで記述します。

「1x」や「1.5x」「2x」という値は画像解像度を示しています。「1.5x」は通常の1.5倍の画像解像度の場合はこの画像を使用するように、と指定をします。「1x」の記述は省略可能です。

以下は、sizes 属性を使い、画像を常にビューポートの幅 80% で表示する例です。

割合で指定する場合は % ではなく vw 単位を使います( viewport widthの略)。割合は親要素の幅に対するものではなく、ビューポートの幅に対するものです。

<picture>
  <source media="(min-width: 768px)" 
          sizes="80vw"
          srcset="images/large.png 320w,
                  images/large_1.5x.png 480w,
                  images/large_2x.png 640w" />
  <source media="(min-width: 320px)" 
          sizes="80vw"
          srcset="images/medium.png 320w,
                  images/medium_1.5x.png 480w,
                  images/medium_2x.png 640w" />
  <img src="images/small.png" 
       sizes="80vw"
       srcset="images/small_1.5x.png 480w,
               images/small_2x.png 640w"
       alt="サンプル画像" />
</picture>

以下は間違った例です。sizes 属性を指定した場合、source 要素の srcset 属性の値は、幅を指定する必要があります(解像度・画素密度記述子を指定すると W3C でチェックすると以下のようなエラーになります)。

Error: Bad value images/large.png, images/large_1.5x.png 1.5x,images/large_2x.png 2x for attribute srcset on element source:
No width specified for image images/large.png.
(When the sizes attribute is present, all image candidate strings must specify a width.)

<!--誤った使い方-->
<picture>
  <source media="(min-width: 768px)" 
          sizes="80vw"
          srcset="images/large.png (誤り), 
                  images/large_1.5x.png 1.5x (誤り),
                  images/large_2x.png 2x (誤り)" />
  <source media="(min-width: 320px)" 
          sizes="80vw"
          srcset="images/medium.png (誤り),
                  images/medium_1.5x.png 1.5x(誤り),
                  images/medium_2x.png 2x(誤り)" />
  <img src="images/small.png" 
       sizes="80vw"
       srcset="images/small_1.5x.png 1.5x(誤り),
               images/small_2x.png 2x(誤り)"
       alt="サンプル画像" />
</picture>

source 要素

source 要素は audio 要素、video 要素、picture 要素において、選択可能なファイルを複数指定します。複数のファイルを用意することで、閲覧者の環境に合わせて適切なファイルが選択されます。

source element / source 要素
カテゴリー なし
この要素が使える場所 メディア要素(audio 要素、video 要素、picture 要素)の子要素として記述可能。ただし、すべてのフローコンテンツや track 要素より前に記述する。
コンテンツモデル

以下は source 要素を picture 要素内に配置した場合のものです。(video 要素や audio 要素内に配置する場合とは異なります)

使用できる属性

media
メディアクエリを指定。ブラウザはそのメディアクエリの条件に一致した場合だけ、このソースを選択します。この属性は picture 要素の内部でのみ使用します。
src
文書内に埋め込む音声・動画ファイルの URL を指定。(audio 要素および video 要素では必須。picture 要素の内部にある source 要素では、この値は無視されます)
srcset
ブラウザが使用できる画像のセット(候補)をカンマ区切りで並べたリストで指定。ブラウザは、条件に合わせてこれらの中から画像を選択します。(詳細は「srcset 属性と sizes 属性」を参照)
sizes
source で示した画像を最終的に表示する幅を表す、ソースサイズのリスト。それぞれのソースサイズは、条件と長さのペアをカンマ区切りで並べたものです。この情報は srcset で指定された画像を使用する際に、ページのレイアウトを行う前にブラウザが使用します。sizes 属性は、source 要素が picture 要素の子要素である場合にのみ効果があります。(詳細は「srcset 属性と sizes 属性」を参照)
type
リンク先の MIME タイプを指定(例:type="image/webp")

mark 要素

mark 要素は、ハイライトされるテキストを表します。文章の中で特に目立たせたいテキストを示す要素で、その文章における重要性や強調を表すものではありません。テキストの特定の部分に対して参照や言及をするときに、「この部分です」と読者の意識を引きつけるために使います。

例えばウェブサイトの検索結果を表示するページ上で、検索した語句をハイライトする為などに使用できます。対応しているブラウザでは、背景が 黄色くハイライト された状態で表示されます。

mark element / mark 要素
カテゴリー フローコンテンツ
フレージングコンテンツ
パルバブルコンテンツ
この要素が使える場所 フレージングコンテンツが期待される場所
コンテンツモデル フレージングコンテンツ

mark 要素は、 ハイライト されるテキストを表します。

<p>mark 要素は、<mark>ハイライト</mark>されるテキストを表します。</p>   

main 要素

main要素は文書内の主要なコンテンツを表します。この要素は、文書内で1つだけ配置することができます。(個数制限に関しては、変更になる可能性があります)

主要なコンテンツとは、Webサイト内の各ページで繰り返し使われるサイトのロゴやヘッダー、ナビゲーション、検索フォームや著作権のクレジットなどを除いた、その文書内で主な内容となる部分になります。また、セクショニングコンテンツではないので、文書のアウトラインに影響を与えません。

main element / main 要素
カテゴリー フローコンテンツ
パルバブルコンテンツ
この要素が使える場所 フローコンテンツが期待される場所
コンテンツモデル フローコンテンツ。但し、article、aside、footer、header、nav の各要素内で使用することはできません。(逆に、これらの要素が main 要素に含まれているのは問題ありません)

※ IE11 以下では main 要素をインライン要素として規定されているようです。そのため、IE でもブロック要素として表示させたい場合は以下を指定する必要があります。

main { display: block; }

以下の例では、ジャズに関する記事が2つありますが(スウィングとビバップ)、main 要素を使うことで、主要なコンテンツを特定しています。

<!-- 他のコンテンツ -->
<main>
  <h1>ジャズ</h1>
  <p>ジャズは....</p>
  <article>
    <h2>スウィング</h2>
    <p>スウィングしなければ....</p>
    <p>... </p>
    <p>... </p>
  </article>
  <article>
    <h2>ビバップ</h2>
    <p>ビバップとは...</p>
    <p>... </p>
    <p>... </p>
  </article>
</main>
<!-- 他のコンテンツ -->

main 要素は WAI-ARIA が策定する role 属性において、role="main" としてマッピングされますが、ブラウザーがこのマッピングを実装するまでは、main 要素の role属性に "main" を追加する事が提案されています。

<main role="main">
  <article>
    <h1>ビンテージギター</h1>
    <p>1950年代に作成された...</p>
  </article>
</main>

但し、W3C でチェックすると「Warning: The main role is unnecessary for element main.」と警告が表示されます。

ルビ関連の新要素

HTML5 では、ルビ(ふりがな)関連の新しい要素が追加されています。ルビとは文章内の任意のテキストに対するふりがな、説明、異なる読み方などの役割を持つテキストを、本文より小さく上部または下部に表示するものです。

  • ruby 要素:rt 要素や rp 要素と組み合わせてルビを表示する要素
  • rt 要素:ルビテキスト(ふりがなの文字列)を表示する要素
  • rb 要素:ルビベース(対象のテキスト)を明示的に示す要素
  • rp 要素:ruby 要素に対応していないルビの内容を括弧で表示する要素
  • rtc 要素:ルビテキストコンテナーを表す要素

ruby 要素

ruby 要素は、ルビ(ふりがな)を振るテキストの範囲を表します。

ruby 要素は、テキストにルビを振りたい場合に使用し、この要素内に対象のテキスト(ルビベース)を配置して、rt 要素でルビテキストを指定します。また、必要に応じて rb 要素、rtc 要素、rp 要素も使用することができます。

ruby element / ruby 要素
カテゴリー フローコンテンツ
フレージングコンテンツ
パルバブルコンテンツ
この要素が使える場所 フレージングコンテンツが期待される場所
コンテンツモデル 次のグループを1つ以上配置:
1つ以上のフレージング・コンテンツまたは rb 要素、その後に1つ以上の rt 要素または rtc 要素 (rp 要素を使用する場合は、rt 要素または rtc 要素の直前か直後に配置)

以下は文字毎のルビ(モノルビ)の例です。

<p>
  <ruby> 
    日<rt>に</rt>
    本<rt>ほん</rt>
    語<rt>ご</rt>
  </ruby>
</p>    

ほん

以下は熟語のルビ(グループルビ)の例です。

<p>
  <ruby> 
    日本語<rt>にほんご</rt>
  </ruby>
</p>

日本語 にほんご

以下は、rb要素を使って対象のテキストを明示的に示している例です。(前述の例と意味的には同じです)

<p>
  <ruby> 
    <rb>日本語</rb><rt>にほんご</rt>
  </ruby>
</p>

日本語 にほんご

以下は、非対応ブラウザでは rt 要素の内容がそのまま表示されるので、rp 要素を記述して非対応ブラウザでは括弧で囲んだルビテキストが表示されるようにする例です。

<p>
  <ruby> 
    日本語<rp>(</rp><rt>にほんご</rt><rp>)</rp>
  </ruby>
</p>

日本語 にほんご

rt 要素

rt 要素はルビテキストを表し、ruby 要素の内容となるテキストに与えられるルビ(ふりがな、説明、読み方など)として表示されます。ルビに対応していないブラウザーでは、rt 要素の内容は本文中にそのまま表示されます。

また、rt 要素の終了タグは、直後に rb、rp、rt、rtc 要素が続く場合は省略できますが、メンテナンス性を考慮すると省略しない方が良いでしょう。

rt element / rt 要素
カテゴリー なし
この要素が使える場所 ruby または rtc 要素の子として
コンテンツモデル フレージングコンテンツ

rb 要素

ルビの対象となるテキスト(ルビベース:ルビを振られるテキスト)を表します。この要素は、ruby要素の子要素として使用します。

ruby 要素内に複数の rt 要素が存在する場合に、ルビ対象テキストとルビを関連付けられます。

rb element / rb 要素
カテゴリー なし
この要素が使える場所 ruby 要素の子要素として
コンテンツモデル フレージングコンテンツ

以下は、rb 要素を使用した例です。

<p>
  <ruby> 
    <rb>日</rb>
    <rb>本</rb>
    <rb>語</rb>
    <rt>に</rt>
    <rt>ほん</rt>
    <rt>ご</rt>
  </ruby>
</p>

ほん

rp 要素

rp 要素は ruby 要素に対応していないブラウザーにおいて、本文中にそのまま表示されるルビテキストを囲む括弧を表示します。ruby 要素の子要素、かつ rt 要素の前後に記述します。

ruby 要素に対応しているブラウザーでは無視され、何も表示されませんが、ruby 要素に未対応のブラウザーでは、rt 要素の前後に rp 要素の内容が表示されます。

rp element / rp 要素
カテゴリー なし
この要素が使える場所 ruby 要素の子として。ただし、rt または rtc 要素の直前または直後のどちらかにいれなければいけません。しかし rt 要素の間に入れることはできません。
コンテンツモデル フレージングコンテンツ

rp 要素の内容には括弧を入れるのが一般的ですが、他の文字を入れることも可能です。

rp 要素を使う場合は、rt 要素の「前後」に rp 要素を配置する必要があります(rt 要素の間に入れることはできません)。

以下は rp 要素の使用例です。

<p>
  <ruby> 
    日本語<rp>(</rp><rt>にほんご</rt><rp>)</rp>
  </ruby>
</p>

日本語 にほんご

<p>
  <ruby> 
    日<rp>(</rp><rt>に</rt><rp>)</rp>
    本<rp>(</rp><rt>ほん</rt><rp>)</rp>
    語<rp>(</rp><rt>ご</rt><rp>)</rp>
  </ruby>
</p>

ほん

rtc 要素

rtc 要素はルビテキストコンテナーを表します。ルビテキストコンテナーとはルビテキストの集まりを指し、1つのルビ対象テキストに対して、複数のルビを適用したい場合等に使用できます。

rtc element / rtc 要素
カテゴリー なし
この要素が使える場所 ruby 要素の子として
コンテンツモデル フレージングコンテンツ、または、rt 要素。

rtc 要素は、rt 要素(ルビテキスト)のコンテナを明示的に示します。次の例では、rtc 要素を使って rt 要素のコンテナを明示的に示しています。

<p>
  <ruby> 
    日本語
    <rtc><rt>にほんご</rt></rtc>
  </ruby>
</p>

日本語 にほんご

しかし、rt 要素は暗黙的なコンテナ内に配置されているので、上記の例は rtc 要素を使わずに以下のように記述することができます。

<p>   
  <ruby> 
    日本語
    <rt>にほんご</rt>
  </ruby>
</p>

日本語 にほんご

rtc 要素を利用するケースとしては、1つのルビ対象テキストに対して、複数のルビを適用したい場合があります。

rtc 要素の中には暗黙的に rt 要素があるとみなされるので、rtc 要素内に直接テキストを記述することができます。

<p>   
  <ruby> 
    日本語
    <rt>にほんご</rt>
    <rtc>Japanese</rtc>
  </ruby>
</p>

日本語 にほんご Japanese

rtc 要素内のルビテキストを分割したい場合は、以下のように rtc 要素内に rt 要素を配置します。

<p>
  <ruby> 
    <rb>日</rb>
    <rb>本</rb>
    <rb>語</rb>
    <rt>に</rt>
    <rt>ほん</rt>
    <rt>ご</rt>
    <rtc>
      <rt>ni</rt>
      <rt>hon</rt>
      <rt>go</rt>
    </rtc>
  </ruby>
</p>

ほん ni hon go

rp 要素を使用した例

<p>
  <ruby>
    <rb>日</rb>
    <rb>本</rb>
    <rb>語</rb>
    <rp>(</rp>
    <rt>に</rt>
    <rt>ほん</rt>
    <rt>ご</rt>
    <rp>)</rp>
    <rp>[</rp>
    <rtc>
      <rt>ni</rt>
      <rt>hon</rt>
      <rt>go</rt>
    </rtc>
    <rp>]</rp>
  </ruby>
</p>

ほん ) [ ni hon go ]

カスタムデータ属性 data-*

HTML5 で新たに追加されたカスタムデータ属性は、接頭辞 data- からはじまる任意の属性名を使って HTML の各要素に対し独自の値を設定することができます。

カスタムデータ属性は、既存の属性に適切なものがなかった場合に、独自のデータ(値)を属性に設定して使用します。全ての HTML 要素に対し、複数設定することが可能です。

data- からはじまる任意の属性名をつけることができますが、カスタムデータ属性の名前に使えるのは、アルファベット(小文字のみ)、数字、ハイフン、アンダースコアです。大文字は使えません。

そして、その属性に対して値を入れておくことで、CSS や javascript、jQuery からその値にアクセスすることができるようになります。(関連ページ:jQuery カスタムデータの格納 data()

データ属性とCSS

CSSでは属性セレクターを使って要素のスタイルを指定することができます。

<p data-color="orange">オレンジ</p> 
<p data-color="green">メロン</p> 
p[data-color="orange"] {
  color: orange;
  font-weight: bold;
}
p[data-color="green"] {
  color: #449A6A;
  font-weight: bold;
}

オレンジ

メロン

また、attr() を使って属性値を取得することができます。

以下は、::after 擬似要素を使って属性値を表示する例です。

<p data-add-text="追加のテキスト">Lorem ipsum dolor sit amet</p> 
<p data-add-text="追加のテキスト#2">Animi sint corrupti ipsum sunt</p>
p[data-add-text]::after {
  content: "( "attr(data-add-text)" )";
}

Lorem ipsum dolor sit amet

Animi sint corrupti ipsum sunt

HTML5 で廃止された要素・属性

以下は HTML5 で廃止された主な要素です。

廃止された主な要素
要素 意味 代替方法
acronym 略語(頭字語) abbr 要素
applet Javaアプレット embed 要素、object 要素
basefont 基準フォント CSS font プロパティ
bgsound 効果音・BGM audio 要素
big フォントサイズを一回り大きく CSS font プロパティ
blink 文字を点滅 N/A
center センタリング CSS margin:auto、text-align:center
dir ディレクトリ型のリスト ul 要素
font フォント CSS font プロパティ
frame フレーム内の設定 フレームを使わない
frameset フレーム分割 フレームを使わない
isindex 検索キーワード用の入力欄 input 要素 type="text"
marquee 文字をスクロール CSS3 マーキー系プロパティ
nobr 改行なしで表示 CSS white-space:nowrapなど
noframes フレームが表示できない場合の表示内容 フレームを使わない
strike 打ち消し CSS text-decoration:line-through
tt 等幅フォント CSS font-family:monospace
u 等幅フォント CSS text-decoration:underline

以下は HTML5 で廃止された主な属性です。CSS で代用できる属性などが廃止になっています。

廃止された属性
要素 廃止された属性
a charset shape rev coords name
area nohref
body background bgcolor text link vlink alink
br clear
caption align
col width align valign char charoff
colgroup width align valign char charoff
div align
dl compact
form accept
h1~h6 align
head profile
hr size width align noshade
html version
iframe longdesc scrolling frameborder marginwidth marginheight align
img longdesc name align border hspace vspace
input align usemap ismap
legend align
li type
link charset target rev
menu compact
meta scheme
object classid codetype archive codebase standby declare align border hspace vspace
ol compact
p align
param valuetype type
pre width
table summary width frame rules cellspacing cellpadding align bgcolor
tbody align valign char charoff
td align valign char charoff abbr scope axis width height bgcolor nowrap
tfoot align valign char charoff
th align valign char charoff axis width height bgcolor nowrap
thead align valign char charoff
tr align valign char charoff bgcolor
ul type compact

WAI-ARIA

WAI-ARIA は、Web Accessibility Initiative - Accessible Rich Internet Applications の頭文字で、HTML や SVG で利用できるアクセシビリティ確保のための属性の仕様です。

WAI-ARIA(または単に ARIA)はネイティブ HTML で対応できないアクセシビリティの問題がある領域を仲介するのに適しており、アクセシビリティ ツリーでの要素の解釈方法を変更する属性を指定することで機能します。

developers.google.com - ARIA の概要

HTML5 と ARIA との関係

HTML5 では、役に立つ多くのセマンティックなタグを HTML に導入しました。新たな <progress> 要素のようにいくつかのタグは、ARIA で使用可能なロールと正に重複します。ARIA にも存在する HTML5 タグをブラウザがサポートする場合は、通常その要素に ARIA のロールやステートも追加する必要はありません。ARIA には HTML5 で使用できない多くのロール、ステート、プロパティが含まれており、それらは HTML5 を使用する開発者にとって引き続き有用でしょう。

developer.mozilla.org - HTML5 と ARIA との関係は?

WAI-ARIA の本体仕様では、大きく分けて以下の2つの属性があります。

  • コンテンツの役割(Roles)を表すための role 属性
  • コンテンツの状態(States)や性質(Properties)を表すための aria 属性

コンテンツの役割や状態、性質を明確にすることで、コンテンツを読み取る機械(スクリーンリーダー等)はウェブページやアプリケーション内の文脈を理解することができます。それによりユーザーに情報を的確に提供することができ、アクセシビリティが高まります。

役割を表す role 属性

各要素の中に「role="xxx"」という属性を記述することで、「役割」を表わすことができます。

例えば、本来特に意味を持たない div 要素に対して、ナビゲーションとして振る舞わせたければ、以下のように記述します。

<div role="navigation">...</div>

同じことは、HTML5 の nav 要素を使えば実現可能です。

<nav>...</nav>

以下は複数のボタンを組み合わせたボタンのグループですが、ボタンの親要素の div 要素に role="group" を指定する例です。

<div class="btn-group" role="group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Roles(ロール・役割)には以下のようなものがあります。(ロールの分類

  • ランドマークロール(Landmark Roles)
  • ウィジェットロール(Widget Roles)
  • 文書構造(Document Structure)

ランドマークロール(Landmark Roles)

Landmark Roles は、Web ページ内のランドマークを表わします。例えば、role="banner" と指定されている要素は、それがバナーであることを、role="navigation" と指定されている要素は、それがナビゲーションであることを伝えます。

Landmark Roles には、以下のようなものがあります。

  • banner
  • complementary
  • contentinfo
  • form
  • main
  • navigation
  • region
  • search

ウィジェットロール(Widget Roles)

Widget Roles は、各種ウィジェット類を表わします。例えば、role="tab" と指定されている要素は、それがタブであることを、role="tabpanel" と指定されている要素は、それが各タブに紐づいて表示されるパネルでであることを伝えます。

Widget Roles には、以下のようなものがあります。

  • alert
  • alertdialog
  • button
  • checkbox
  • dialog
  • gridcell
  • link
  • log
  • marquee
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • option
  • progressbar
  • radio
  • scrollbar
  • searchbox
  • slider
  • spinbutton
  • status
  • switch
  • tab
  • tabpanel
  • textbox
  • timer
  • tooltip
  • treeitem

また、以下のように、複数の Widget Roles をひとまとめにするものもあります。

  • combobox
  • grid
  • listbox
  • menu
  • menubar
  • radiogroup
  • tablist
  • tree
  • treegrid

文書構造(Document Structure)

Document Structure は、Web ページの文書構造を表わします。例えば、role="heading" と記述されている要素は、それが見出しであることを伝えます。

Document Structure には、以下のようなものがあります。

  • application
  • article
  • cell
  • columnheader
  • definition
  • directory
  • document
  • feed
  • figure
  • group
  • heading
  • img
  • list
  • listitem
  • math
  • none
  • note
  • presentation
  • region
  • row
  • rowgroup
  • rowheader
  • separator
  • table
  • term
  • toolbar

状態や性質を表す aria 属性

aria 属性は、要素の状態や性質を表すことができ、用途に応じた属性が多数用意されています。ステート(状態/States)とプロパティ(性質/Properties)の2つのタイプがあります。

ステートは、要素の「状態」を伝達し、プロパティは、要素の「性質」を伝達します。いずれも、各要素の中に「aria-xxxx="(属性値)"」という記述をすることで、「状態」や「性質」を表わすことができます。

ステートは、ユーザーの操作によって生じる状態を表わすものなので、必要に応じて JavaScript を使って、属性値をその時々で変更します。

  • ステートに関する aria:多くの属性で、属性値に true または false を指定
  • プロパティに関する aria:属性値に参照先の ID や数値または真偽値を指定

例えば、アイコンフォントなどそれが単に装飾目的のための場合は、aria-hidden="true" を指定します。(aria-hidden の値に「true」を指定することで、その要素が非表示であることをブラウザに伝え、読み上げをしないようにすることができます。)

<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> E-mail

また、例えばテキストの代わりに画像だけで目的を示しているボタンがあり、この視覚的なマークを見ることができないユーザー向けに目的を明確に示したい場合、aria-label 属性を使用します。

<button type="button" class="close" aria-label="閉じる"><span aria-hidden="true">&times;</span></button>

参照:ARIA ラベルと関係性(developers.google.com)

グローバルなステートおよびプロパティ

一部のステートおよびプロパティは、ロールが適用されるかどうかに関係なく、すべての要素に適用可能です。以下のステートおよびプロパティは、すべてのロール及びすべての基本マークアップ要素によってサポートされます。

  • aria-atomic
  • aria-busy (ステート)
  • aria-controls
  • aria-current (ステート)
  • aria-describedby
  • aria-details
  • aria-disabled (ステート)
  • aria-dropeffect
  • aria-errormessage
  • aria-flowto
  • aria-grabbed (ステート)
  • aria-haspopup
  • aria-hidden (ステート)
  • aria-invalid (ステート)
  • aria-keyshortcuts
  • aria-label
  • aria-labelledby
  • aria-live
  • aria-owns
  • aria-relevant
  • aria-roledescription

ステートおよびプロパティの分類

ステートおよびプロパティは、次のように分類されています。

  • ウィジェット属性
  • ライブ領域属性
  • ドラッグアンドドロップ属性
  • 関係属性

ウィジェット属性

以下の属性は、ウィジェットロールをサポートするために使用されます。

  • aria-autocomplete
  • aria-checked
  • aria-disabled
  • aria-errormessage
  • aria-expanded
  • aria-haspopup
  • aria-hidden
  • aria-invalid
  • aria-label
  • aria-level
  • aria-modal
  • aria-multiline
  • aria-multiselectable
  • aria-orientation
  • aria-placeholder
  • aria-pressed
  • aria-readonly
  • aria-required
  • aria-selected
  • aria-sort
  • aria-valuemax
  • aria-valuemin
  • aria-valuenow
  • aria-valuetext

ライブ領域属性

この属性は、任意の要素に適用することができます。

  • aria-atomic
  • aria-busy
  • aria-live
  • aria-relevant

ドラッグアンドドロップ属性

ドラッグ可能な要素とそのドロップターゲットのような、ドラッグアンドドロップインターフェイス要素に関する情報を示す属性です。

  • aria-dropeffect
  • aria-grabbed

関係属性

文書構造から容易に決定することができない要素間の関係または関連を示す属性です。

  • aria-activedescendant
  • aria-colcount
  • aria-colindex
  • aria-colspan
  • aria-controls
  • aria-describedby
  • aria-details
  • aria-errormessage
  • aria-flowto
  • aria-labelledby
  • aria-owns
  • aria-posinset
  • aria-rowcount
  • aria-rowindex
  • aria-rowspan
  • aria-setsize

スクリーンリーダー限定テキスト

例えばフォームで placeholder 属性でラベルをテキストボックス内に表示したりしますが、label 要素を省略してしまうと目の不自由な方がスクリーンリーダー(Screen Reader)からラベルが読み上げられなくなってしまいます。また、アイコンなどを画像やアイコンフォントだけで表示しているコンテンツなどは、スクリーンリーダーにその意味が読み上げられません。

対策としては、スクリーンリーダには読み上げられるが、画面には表示しないようにします。

以下は、Bootstrap で使われているスクリーンリーダー限定テキストの CSS (sr-only クラス)の例です。

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

以下は「コンテンツの非表示と更新(developers.google.com)」に掲載されている例です。

.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

WAI-ARIA 参考になるサイトのリスト

HTML5 参考になるサイトのリスト