<image>: 画像要素 - HTML: ハイパーテキストマークアップ言語

<image>: 画像要素
=============

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`<image>`** は HTML の要素で、`<img>` 要素の古く、対応が不十分な前身です。
 **使用しないでください**。

ブラウザーによっては、これを自動的に `<img>` 要素に変換しようとし、`src` 属性も指定されていれば成功することがあります。

仕様書
---

 これは正式な仕様書の一部として現れていません。
 HTML+ Discussion Document - Dave Raggett, November 8, 1993 (Section 5.9 - Images) では言及されていますが、 1994 年の HyperText Markup Language Specification - 2.0 の最初の改定では含まれていませんでした。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<img>`: 文書中で画像を表示する正しい方法
* `<picture>`: 文書中で画像を表示するもっと強力な方法


<dt>: 説明用語要素 - HTML: ハイパーテキストマークアップ言語

<dt>: 説明用語要素
============

**`<dt>`** は HTML の要素で、説明または定義リストの中で用語を表す部分であり、`<dl>` の子要素としてのみ用いることができます。普通は `<dd>` 要素が続きます。しかし、複数の `<dt>` 要素が続くと、複数の用語がすぐ後に続く `<dd>` 要素で定義されていることを表します。

後に続く `<dd>`（**詳細説明**）要素は、 `<dt>` を用いて指定した用語について、定義やその他の関連する文字列を表します。

試してみましょう
--------

属性
--

この要素はグローバル属性のみを持っています。

例
-

例については、`<dl>` 要素で提供されている例を参照してください。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | フローコンテンツ。ただし配下に `<header>`、`<footer>`、区分コンテンツ、見出しコンテンツがないもの。 |
| タグの省略 | 開始タグは必須。終了タグについては、他の `<dt>` または `<dd>` 要素が後続する場合、もしくは親要素の中にそれ以上のコンテンツがない場合は省略可能。 |
| 許可されている親要素 | `<dl>` または（WHATWG HTML および W3C HTML 5.2 以降においては）`<dl>` の子である `<div>`。この要素は `<dd>` または他の `<dt>` の前で使用することができる。 |
| 暗黙の ARIA ロール | `term` |
| 許可されている ARIA ロール | `listitem` |
| DOM インターフェイス | `HTMLElement`。 Gecko 1.9.2 (Firefox 4) 以前では、Firefox はこの要素に対し `HTMLSpanElement` インターフェイスを実装していました。 |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-dt-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<dl>`
* `<dd>`


<tfoot>: 表フッター要素 - HTML: ハイパーテキストマークアップ言語

<tfoot>: 表フッター要素
================

**`<tfoot>`** は HTML の要素で、表の一連の列を総括する行のセットを定義します。

試してみましょう
--------

属性
--

この要素にはグローバル属性があります。

### 非推奨の属性

以下の属性は非推奨であり、使用すべきではありません。これらの属性は、既存のコードを更新する際の参考として、また歴史的な興味のためだけに、以下に文書化されています。

`align`
非推奨

この列挙属性は、各セルの内容物について、水平方向の配置方法を制御します。以下の値が指定可能です。

* `left`: 内容物をセルの左側に揃えます。
* `center`: 内容物をセル内で中央揃えにします。
* `right`: 内容物をセルの右側に揃えます。
* `justify`: 内容物がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。
* `char`: テキストコンテンツを特定の文字に対して、最小のオフセットで揃えます。特定の文字は `char` 属性および `charoff` 属性で定義します。

この属性が設定されていない場合は、`left` 値であるものとします。

**メモ:**

* `left`, `center`, `right`, `justify` の値と同様の効果を得るには、 CSS の `text-align` プロパティを使用してください。
* CSS で `char` の値と同様の効果を得るには、 `char` の値を `text-align` プロパティの値として使用することができます。

`bgcolor`
非推奨

表の背景色です。この属性は、列の各セルの背景色を定義します。 6 桁の 16 進数の RGB コードの前に '`#`' が付いた形です。定義済みの色キーワードの一つを使用することもできます。

同様の効果を得るには、 CSS の `background-color` プロパティを使用してください。

`char`
非推奨

この属性は、列内のセルの内容をある文字へ整列することを指定します。典型的な値としては、数字や金額を整列させようとするときのピリオド (.) があります。 `align` が `char` に設定されていない場合、この属性は無視されます。

`charoff`
非推奨

この属性は、`char` 属性で指定した揃え文字から列のデータをオフセットする文字数を示します。

`valign`
非推奨

この属性は、表本体の各行のセルにおける垂直方向のテキスト配置方法を指定します。以下の値が指定可能です。

* `baseline`: テキストを可能な限りセルの下端に近づけますが、下端ではなく文字のベースラインに揃えます。文字がサイズ全体に渡る場合は、 `bottom` と同じ効果になります。
* `bottom`: テキストを可能な限りセルの下端に近づけて配置します。
* `middle`: テキストをセル内の中央に置きます。
* `top`: テキストを可能な限りセルの上端に近づけて配置します。

**メモ:** この属性は最新の標準仕様で廃止された（対応していない）ため、使用しないでください。代わりに CSS の `vertical-align` プロパティを使用してください。

例
-

`<tfoot>` の例については、 `<table>` を参照してください。

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | 0 個以上の `<tr>` 要素 |
| タグの省略 | 開始タグは必須。親 `<table>` 要素内に以降のコンテンツがない場合は終了タグを省略可能。 |
| 許可されている親要素 | `<table>` 要素。`<tfoot>` はすべての `<caption>`, `<colgroup>`, `<thead>`, `<tbody>`, `<tr>` の各要素の後方に配置しなければなりません。これは HTML5 での要件です。HTML4 では、 `<tfoot>` 要素は `<tbody>` 要素および `<tr>` 要素の後方に配置してはなりませんでした。 |
| 暗黙の ARIA ロール | `rowgroup` |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLTableSectionElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-tfoot-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 他の表関連要素: `<caption>`, `<col>`, `<colgroup>`, `<table>`, `<tbody>`, `<td>`, `<th>`, `<thead>`, `<tr>`
* `<tfoot>` 要素のスタイル設定に役立つであろう CSS プロパティと擬似クラス:
    + `:nth-child` 擬似クラス: 列内のセルの配置を設定するため
    + `text-align` プロパティ: すべてのセル内コンテンツを '.' などの同一文字で揃えるため


<slot>: ウェブコンポーネントのスロット要素 - HTML: ハイパーテキストマークアップ言語

<slot>: ウェブコンポーネントのスロット要素
=========================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**`<slot>`** は HTML の要素――一連のウェブコンポーネント技術の一部――で、ウェブコンポーネント内で別な DOM ツリーを構築し、一緒に表示することができる独自のマークアップを入れることができるプレイスホルダーです。

属性
--

この要素にはグローバル属性があります。

`name`

スロットの名前です。

***名前付きスロット***は、 `<slot>` 要素に `name` 属性が付きます。

例
-

```html
<template id="element-details-template">
  <style>
 details {
 font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
 }
 .name {
 font-weight: bold;
 color: #217ac0;
 font-size: 120%;
 }
 h4 {
 margin: 10px 0 -8px 0;
 background: #217ac0;
 color: white;
 padding: 2px 6px;
 border: 1px solid #cee9f9;
 border-radius: 4px;
 }
 .attributes {
 margin-left: 22px;
 font-size: 90%;
 }
 .attributes p {
 margin-left: 16px;
 font-style: italic;
 }
 </style>
  <details>
    <summary>
      <code class="name">
        <<slot name="element-name">NEED NAME</slot>>
      </code>
      <span class="desc"><slot name="description">NEED DESCRIPTION</slot></span>
    </summary>
    <div class="attributes">
      <h4>Attributes</h4>
      <slot name="attributes"><p>None</p></slot>
    </div>
  </details>
  <hr />
</template>
```

**メモ:** この完全な例は、 element-details で見ることができます（ライブ実行もご覧ください）。また、テンプレートとスロットの利用にも説明があります。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 記述コンテンツ |
| 許可されている内容 | 透過的コンテンツ |
| イベント | `slotchange` |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け付ける任意の要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLSlotElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-slot-element |
| DOM Standard # shadow-tree-slots |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<button>: ボタン要素 - HTML: ハイパーテキストマークアップ言語

<button>: ボタン要素
===============

**`<button>`** は HTML の要素で、マウス、キーボード、指、音声コマンド、その他の支援技術で起動することができる操作可能要素です。起動すると、フォームを送信したりダイアログを開いたりといった操作を実行します。

既定では、HTML のボタンはユーザーエージェントが実行されているホストのプラットフォームのスタイルと似ていますが、 CSS を使用してボタンの外見を変更することができます。

試してみましょう
--------

属性
--

この要素はグローバル属性を持ちます。

`autofocus`

論理属性で、ページ読み込み時にこのボタンが入力フォーカスを持つべきであることを指定します。**文書中の要素一つだけにこの属性を設定することができます。**

`autocomplete`
Non-standard

`<button>` におけるこの属性は標準外であり、Firefox 固有のものです。他のブラウザーとは異なり、 Firefox はページを再度読み込む時に動的に無効化した状態を維持します。そのボタンに `autocomplete="off"` に設定すると、この機能が無効になります。Firefox バグ 654072 をご覧ください。

`disabled`

論理属性で、ユーザーがボタンを操作することを抑止します。押したりフォーカスを受けたりすることができなくなります。

Firefox の動作は他のブラウザーと異なり、ページを再読み込みしても `<button>` を動的に無効化した状態を維持します。この機能は `autocomplete` 属性で制御できます。

`form`

ボタンに関連付けられた `<form>` 要素（*フォームオーナー*）です。この属性の値は、同一文書内の `<form>` 要素の `id` 属性と同一でなければなりません。（この属性を設定しなかった場合、 `<button>` は祖先に `<form>` 要素が存在すれば、その要素に関連付けられます。）

この属性によって `<button>` 要素が `<form>` の中になくても、同一文書内にある任意の `<form>` 要素に関連付けることが可能になりました。また、祖先の `<form>` 要素を上書きすることができます。

`formaction`

このボタンによって送信された情報を処理する URL です。このボタンのフォームオーナーの `action` 属性よりも優先されます。フォームオーナーがない場合は何もしません。

`formenctype`

このボタンが送信ボタンである場合（`<form>` の中にあるか関連付けられており、 `type="button"` が設定されていない場合）、送信されるフォームデータのエンコード方法を指定します。指定可能な値は以下の通りです。

* `application/x-www-form-urlencoded`: この属性が使用されなかった場合の既定値。
* `multipart/form-data`: `<input>` 要素の `type` 属性に `file` を指定して使用する場合に使用します。
* `text/plain`: デバッグ目的で指定されるものです。実際のフォーム送信で使用すべきではありません。

この属性が指定された場合、そのボタンのフォームオーナーの `enctype` 属性より優先されます。

`formmethod`

このボタンが送信ボタンである場合（`<form>` の中にあるか関連付けられており、 `type="button"` が設定されていない場合）、この属性はこのフォームを送信するのに使用される HTTP メソッドを指定します。指定可能な値は以下の通りです。

* `post`: フォームのデータは、サーバーへ送信する際に HTTP リクエストの本文に含められます。フォームにパスワードなどの公開するべきではない情報が含まれている場合は、このメソッドを使用してください。
* `get`: フォームのデータは、フォームの `action` の URL に、セパレーターとして '?' を使用して追加され、その結果となる URL をサーバーへ送信します。検索フォームのように、まったく副作用がない場合にのみ、このメソッドを使用してください。

指定された場合、この属性はボタンのフォームオーナーの `method` 属性より優先して使用されます。

`formnovalidate`

論理属性で、ボタンが送信ボタンである場合に、フォームデータ送信時に内容を検証しないように指定するものです。この属性が指定された場合、ボタンの属するフォームオーナーの `novalidate` 属性より優先して使用されます。

この属性は `<input type="image">` および `<input type="submit">` 要素でも使用できます。

`formtarget`

ボタンが送信ボタンである場合、フォームの送信後に受信するレスポンスを表示する場所を示すユーザー定義の名前、もしくはアンダースコアから始まる標準化されたキーワードです。これは、*閲覧コンテキスト*（タブ、ウィンドウ、`<iframe>`）の `name` またはそれを表すキーワードです。この属性が指定された場合、ボタンのフォームオーナーの `target` 属性より優先されます。以下のキーワードは特別な意味を持ちます。

* `_self`: レスポンスを同じ閲覧コンテキストに読み込みます。これは、属性が指定されていない場合の既定値です。
* `_blank`: レスポンスを新しい無名の閲覧コンテキスト — 普通は、ブラウザーの設定に従い、新しいタブまたはウィンドウ — に読み込みます。
* `_parent`: レスポンスを現在のコンテキストの親の閲覧コンテキストに読み込みます。親要素がない場合、このオプションは `_self` と同じ振る舞いをします。
* `_top`: レスポンスを最上位の閲覧コンテキスト (現在のコンテキストの祖先で、それ以前の祖先をもたない閲覧コンテキスト) に読み込みます。親要素がない場合、このオプションは `_self` と同じ振る舞いをします。

`name`

このボタンの名前で、フォームデータの一部としてこのボタンの `value` との組み合わせで送信されます。

`popovertarget`

`<button>` 要素をポップオーバーの制御ボタンに変換します。制御するポップオーバー要素の ID を値として受け取ります。詳しくはポップオーバー API のランディングページを参照してください。

`popovertargetaction`

コントロール `<button>` によって制御されているポップオーバー要素に対して実行される動作を指定します。使用可能な値は以下の通りです。

`"hide"`

このボタンは、表示されているポップオーバーを非表示にします。非表示になっているポップオーバーを非表示にしようとした場合、何も行われません。

`"show"`

このボタンは、非表示のポップオーバーを表示します。すでに表示されているポップオーバーを表示しようとしても、何の動作も起こりません。

`"toggle"`

ポップオーバーの表示・非表示を切り替えるボタンです。ポップオーバーが非表示の場合は表示され、ポップオーバーが表示されている場合は非表示になります。`popovertargetaction` が省略された場合、`"toggle"` がこのコントロールボタンによって実行される既定の動作です。

`type`

このボタンの既定の動作です。以下の値が指定可能です。

* `submit`: このボタンはフォームのデータをサーバーへ送信します。これはこの属性が `<form>` に関連付けられたボタンに指定されていない場合、またはこの属性が空であったり不正な値であったりした場合の既定値です。
* `reset`: このボタンはすべてのコントロールを初期値に初期化します。 <input type="reset"> と同様です。 (この動作はユーザーを困らせる傾向があります。)
* `button`: ボタンには既定の動作がなく、既定では押されても何も行いません。この要素のイベントを待ち受けし、イベントが発生すると起動されるクライアント側スクリプトを設定することができます。

`value`

フォームのデータと一緒に送信される際に、ボタンの `name` に結び付けられる値を定義します。この値は、フォームに送信する際にサーバーに引数として渡されます。

メモ
--

送信ボタンに `formaction` 属性が設定されていても、関連付けられたフォームがない場合は何もしません。ボタンを `<form>` で囲むか、 `form` でフォームの id を設定するかしてフォームオーナーを設定する必要があります。

`<button>` 要素は `<input>` 要素よりもずっと簡単にスタイル付けできます。内部に HTML コンテンツを（`<em>`、 `<strong>` や `<img>` さえも）追加できますし、複雑な描画のために `::after` や `::before` 擬似要素を使用することもできます。

ボタンがサーバーにデータを送信するためのものでない場合は、 `type` 属性を `button` に設定することを忘れないでください。さもないと、フォームデータを送信して（存在しない）レスポンスを読み込み、文書の現在の状態を破棄してしまうおそれがあります。

`<button type="button">` には既定の動作がありませんが、イベントハンドラーを記述して動作を起動することができます。起動されたボタンは JavaScript を用いてプログラム可能なアクションを実行することができます。例えばアイテムをリストから削除するなどです。

例
-

```html
<button name="button">クリックしてね</button>
```

アクセシビリティの考慮
-----------

### アイコンボタン

アイコンのみを使って機能を表現するボタンは、*アクセシブル名*を持ちません。アクセシブル名はスクリーンリーダーのような支援技術で文書を解析し、アクセシビリティツリーを生成するときに、アクセスするためのプログラム的なフックを提供します。そのため、支援技術や移動やページコンテンツの操作にアクセシビリティツリーを使用します。

アイコンボタンにアクセシブル名を与えるには、 `<button>` 要素でボタンの機能を簡潔に説明するテキスト文字列を提供してください。

#### 例

```html
<button name="favorite">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  </svg>
  お気に入りに追加
</button>
```

##### 結果

ボタンのテキストを、アクセス可能な方法で視覚的に隠したい場合は、CSS プロパティの組み合わせを使用して画面から削除し、支援技術からは解析可能のままにします。

しかし、ボタンのテキストを視覚的に見えるようにしておけば、アイコンの意味に慣れていない人がボタンの目的を理解できるようになります。これは特に、技術的に慣れていない人や、アイコンボタンが使用するアイコンの文化的解釈が異なる人に適しています。

* What is an accessible name? | The Paciello Group
* MDN「WCAG を理解する ― ガイドライン 4.1 の解説」
* Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0
### 大きさと近接性

#### 大きさ

ボタンなどの操作可能な要素は、容易にアクティブ化させることができるだけの大きさで提供するようにしてください。これは、動きが不自由な人、スタイラスや指のような正確性の低い形の入力を使用している人など、様々な人に役立ちます。44×44 CSS ピクセル以上の操作のための大きさが推奨されています。

* Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1
* Target Size and 2.5.5 | Adrian Roselli
* Quick test: Large touch targets - The A11Y Project

#### 近接性

たくさんの操作可能なコンテンツ — ボタンを含む — が互いに視覚的に接近して配置されるときは、それを隔てるために間隔を置いてください。間隔を置くことは、動きが不自由で誤った操作可能なコンテンツを有効化してしまうことがある人にとって有益です。

間隔は `margin` などの CSS プロパティを使用して作成することができます。

* Hand tremors and the giant-button-problem - Axess Lab
### ARIA 状態情報

ボタンの状態を記述するために使用する正しい ARIA 属性は `aria-pressed` (en-US) であり、`aria-checked` (en-US) や `aria-selected` (en-US) ではありません。詳しくは、 ARIA button ロールについての情報をご覧ください。

### Firefox

Firefox はフォーカスされたボタンに小さな点線の境界線を表示します。この境界線はブラウザーのスタイルシートの CSS で宣言されていますが、 `button::-moz-focus-inner { }` (en-US) を使用して独自のフォーカスのスタイルを追加すると上書きすることができます。

上書きした場合は、弱視の人が知覚するのの十分なほど、**フォーカスがボタンに移動したときの状態の変化が十分に大きいことを確認すること**が重要です。

色のコントラスト比は、テキスト及び背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、大きめの文字列で 3:1 以上のコントラスト比が求められています。 (大きめの文字列とは、 `bold` の 18.66px 以上、または 24px 以上と定義されています。)

* WebAIM: Color Contrast Checker
* MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
### クリックとフォーカス

`<button>` や `<input>` のボタン型をクリックしたときに（既定で）フォーカスを得るかは、ブラウザーおよび OS により異なります。多くのブラウザーはクリックされているボタンにフォーカスを与えますが、Safari は設計上そうなりません。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、記述コンテンツ、対話型コンテンツ、リスト化、ラベル付け可能、送信可能
 な
 フォーム関連要素、知覚可能コンテンツ
  |
| 許可されている内容 | 記述コンテンツ、但し対話型コンテンツがあってはならない |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素。 |
| 暗黙の ARIA ロール | `button` |
| 許可されている ARIA ロール | `checkbox`, `combobox` (en-US),
 `link`, `menuitem` (en-US),
 `menuitemcheckbox` (en-US),
 `menuitemradio` (en-US), `option`,
 `radio`, `switch`,
 `tab` |
| DOM インターフェイス | `HTMLButtonElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-button-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<br>: 改行要素 - HTML: ハイパーテキストマークアップ言語

<br>: 改行要素
==========

**`<br>`** は HTML の要素で、文中に改行（キャリッジリターン）を生成します。詩や住所など、行の分割が重要な場合に有用です。

試してみましょう
--------

上記の例に見られるように、 `<br>` 要素はテキストを改行したい場所にそれぞれ含められます。 `<br>` の後のテキストは、テキストブロックの次の行の先頭から再開されます。

**メモ:** 段落の間を開けるために `<br>` を使わないでください。それぞれを `<p>` 要素で囲み、 CSS の `margin` プロパティで間隔を制御してください。

属性
--

この要素はグローバル属性を持ちます。

### 非推奨の属性

`clear`

改行後の次の行を開始する場所を示します。

CSS でのスタイル付け
------------

`<br>` 要素は、テキストのブロック内で改行するという、単一の明確な目的を持っています。そのため、寸法を持たず、自身が表示されることもなく、スタイル付けすることができるのはわずかです。

`<br>` 要素自体に `margin` を設定して、ブロック内のテキストの行間を開けることができますが、これは良いやり方ではありません。 — この用途のために設計された `line-height` プロパティを使用してください。

例
-

### 単純な br

以下の例では `<br>` を使用して、住所のそれぞれの行の間に改行を生成しています。

```html
Mozilla<br />
331 E. Evelyn Avenue<br />
Mountain View, CA<br />
94041<br />
USA<br />
```

以下のように出力されます。

アクセシビリティの考慮
-----------

段落間の間隔を広げるために連続した `<br>` 要素を使用することは、読み上げ技術の支援の下で操作をしている人にとっては問題になります。読み上げソフトは要素が存在することをアナウンスするものの、その中にはコンテンツが何もないという状況になる可能性があります。これは読み上げソフトを使用している人の利用を混乱させ不満をためる可能性があります。

追加の間隔をあける必要がある場合は、 `margin` のような CSS プロパティを使用して効果を得るようにしてください。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、記述コンテンツ |
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 |
 開始タグは必須で、終了タグを記述してはなりません。 XHTML
 文書では、この要素は `<br />` と書きます。
  |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | `none` (en-US), `presentation` |
| DOM インターフェイス | `HTMLBRElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-br-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<address>` 要素
* `<p>` 要素
* `<wbr>` 要素


<ins> - HTML: ハイパーテキストマークアップ言語

<ins>
=====

**`<ins>`** は HTML の要素で、文書に追加されたテキストの範囲を表します。同様に、 `<del>` 要素を使用して文書から削除されたテキストの範囲を表すことができます。

試してみましょう
--------

|  |  |
| --- | --- |
| コンテンツカテゴリー | 記述コンテンツ
 または
 フローコンテンツ |
| 許可されている内容 | 透過的コンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLModElement` |

属性
--

この要素にはグローバル属性があります。

`cite`

会議の議事録やトラブルシューティングシステムのチケットといった、追加についての説明を記したリソースへの URI を示します。

`datetime`

この属性は変更が行われた日時を示し、有効な日付または日時の文字列でなければなりません。値が日付または日時の文字列として解釈できなかった場合は、要素にタイムスタンプが関連付けられなくなります。時刻がない日付の書式については、妥当な日付文字列の書式を参照してください。日付と時刻の両方を含む場合の文字列の書式については、妥当な日時文字列の書式を参照してください。

例
-

```html
<ins>This text has been inserted</ins>
```

### 結果

アクセシビリティの考慮
-----------

`<ins>` 要素が存在することは、多くの読み上げ技術の既定の設定では読み上げられません。 CSS の `content` プロパティを `::before` および `::after` 擬似要素と共に使うことで読み上げさせることができます。

```css
ins::before,
ins::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

ins::before {
  content: " [挿入開始] ";
}

ins::after {
  content: " [挿入終了] ";
}
```

スクリーンリーダーを使用する人によっては、特に冗長になるコンテンツのアナウンスを意図的に無効にしていることがあります。このため、この手法を悪用しないようにすることは重要であり、コンテンツが挿入されていることを知らないと理解に影響するような場面でのみ使用するようにしてください。

* Short note on making your mark (more accessible) | The Paciello Group
* Tweaking Text Level Styles | Adrian Roselli
仕様書
---

| Specification |
| --- |
| HTML Standard # the-ins-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 文書の削除された部分に印をつける `<del>` 要素


<u>: 非言語的注釈（下線）要素 - HTML: ハイパーテキストマークアップ言語

<u>: 非言語的注釈（下線）要素
=================

**`<u>`** は HTML の要素で、非言語的に注釈があることを示す方法で表示する行内テキストの区間を示します。これは既定で単純な実線の下線として表示されますが、 CSS を使用して変更することもできます。

**警告:** この要素は古いバージョンの HTML で "Underline" (下線) 要素と呼ばれる傾向があり、現在でもそのように誤用されることがあります。テキストに下線を引くのであれば、代わりに CSS の `text-decoration` プロパティを `underline` に設定したスタイルを適用してください。

試してみましょう
--------

`<u>` を使用するのがどのような場合に適切で、どのような場合に適切でないのかについての詳細は、使用上の注意を参照してください。

属性
--

この要素にはグローバル属性のみがあります。

使用上の注意
------

他の純粋な整形要素と同様に、以前の HTML の下線 (`<u>`) 要素は HTML 4 で非推奨になりました。しかし `<u>` は、 HTML 5 で新しい意味論的な、何らかの曖昧な注釈が適用されるテキストをマークするという意味で復活しました。

**メモ:** （既定で下線が引かれる）ハイパーリンクと誤認されるような方法で、（これも既定で下線が引かれる）`<u>` 要素を使用することは避けるように注意してください。

### 用途

`<u>` 要素の有効な用途としては、綴りエラーの通知、中国語の文字列の固有名詞記号の記述、その他の形の注釈などがあります。

単に表現の目的で下線を引いたり、本の題名を記述したりするために `<u>` を使用するべきでは*ありません*。

### 仕様を考慮するべきその他の要素

多くの場合、次のような場合は `<u>` よりも他の要素を使用するべきです。

* `<em>`: 強調の記述
* `<b>`: テキストに注意を引かせる
* `<mark>`: キーワードや句をマーク
* `<strong>`: 強い重要性のあるテキストを示す
* `<cite>`: 書籍やその他の出版物の題名をマーク
* `<i>`: 西洋言語のテキストで技術用語、音訳、考え、船名などを記述

（`<u>` で作成された非言語的な注釈に対して）言語的な注釈を提供する場合は、 `<ruby>` 要素を使用してください。

意味論的な意味なしで下線を引きたい場合は、 `text-decoration` プロパティの値 `underline` を使用してください。

例
-

### 綴りエラーを表示

この例は、 `<u>` 要素と CSS を使用して、綴り間違いのエラーを含む段落を表示し、エラー箇所をこの目的でよく使用される、赤い波線の下線スタイルで示します。

#### HTML

```html
<p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p>
```

この HTML では、 `<u>` にクラス `spelling` を付けて、 "wrongly" という語の綴りミスを示すために使用しているのが分かります。

#### CSS

```css
u.spelling {
  text-decoration: red wavy underline;
}
```

この CSS は `<u>` 要素にクラス `spelling` がついてスタイル付けされるとき、テキストすぐ下に赤い波線の下線を引くことを示しています。これはスペルミスをスタイル付けするときに一般的なスタイル付けです。 `red dashed underline` を使って表現できるスタイルもよく使われます。

#### 結果

結果は現在利用可能なもっと有名なワープロを使ってきた人になじみがあるものでしょう。

### <u> の回避

多くの場合、実際には `<u>` を使用したいと思わないでしょう。いくつかの場面で代わりに何をするべきかを示す例を挙げましょう。

#### 意味を伴わない下線

意味を含むことがないテキストに下線を引くには、次のように、 `<span>` 要素と `text-decoration` プロパティに `"underline"` を設定したものを使用してください。

##### HTML

```html
<span class="underline">Today's Special</span>
<br />
Chicken Noodle Soup With Carrots
```

##### CSS

```css
.underline {
  text-decoration: underline;
}
```

##### 結果

#### 書籍の題名の表現

書籍の題名は `<u>` や `<i>` でもなく、 `<cite>` 要素を使用して表現してください。

##### HTML

```html
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
```

##### cite 要素のスタイル付け

なお、 `<cite>` 要素の既定のスタイルではテキストを斜体で表示します。 CSS を使用して上書きすることができます。

```html
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
```

```css
cite {
  font-style: normal;
  text-decoration: underline;
}
```

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 記述コンテンツ, 知覚可能コンテンツ
  |
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-u-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ふつう、 `<span>`, `<i>`, `<em>`, `<b>`, `<cite>` 要素が代わりに使用されます。
* 意味論的なものではない下線には、 CSS の `text-decoration` プロパティを使用してください。


<select>: HTML 選択要素 - HTML: ハイパーテキストマークアップ言語

<select>: HTML 選択要素
===================

**`<select>`** は HTML の要素で、選択式のメニューを提供するコントロールを表します。

試してみましょう
--------

上の例は、典型的な `<select>` の利用方法を示しています。アクセシビリティのために、 `<label>` と結び付けられるように `id` 属性が与えられています。それぞれのメニューの選択肢は、 `<select>` の中の `<option>` 要素で定義されます。

それぞれの `<option>` 要素は、選択肢が選択されたときにサーバーに送信するデータの値を含む `value` 属性を持ちます。 `value` 属性が含まれない場合、既定で要素の中に含まれるテキストの値が使用されます。 `<option>` 要素に `selected` 属性を付けることで、ページが最初に読み込まれたときに既定で選択状態にすることができます。

`<select>` 要素は、複数の選択肢を選択することができるかどうかを定める `multiple`、同時にいくつの選択肢を表示することができるかを定める `size` など、制御のために利用することができる固有の属性がいくつかあります。 `required`, `disabled`, `autofocus`, などのような一般のフォーム入力属性の多くも受け付けます。

さらに、 `<option>` 要素を `<optgroup>` 要素の中に入れることで、ドロップダウンの中で選択肢をグループに分割することができます。

その他の例は、ネイティブフォームウィジェット: ドロップダウンコンテンツを参照してください。

属性
--

この要素はグローバル属性を持ちます。

`autocomplete`

文字列で、ユーザーエージェントの自動補完機能のヒントを提供します。値の完全なリストや自動補完の使い方の詳細は、 HTML の autocomplete 属性を参照してください。

`autofocus`

論理属性で、ページが読み込まれた時にこのフォームコントロールが入力フォーカスを持つべきであることを指定することができます。文書内で `autofocus` 属性を持つことができるフォーム要素は一つだけです。

`disabled`

論理属性で、ユーザーがそのコントロールを利用することができないことを示します。もしこの属性が指定されていない場合、コントロールはその設定を親要素、例えば `<fieldset>` 要素から継承します。もし親要素に `disabled` 属性を持つものがなければ、そのコントロールは利用可能です。

`form`

`<select>` を関連付ける `<form>` 要素（*フォームオーナー*）です。この属性の値は、同じ文書内の `<form>` 要素の `id` でなければなりません。（この属性が設定されていない場合は、 `<select>` はその祖先である `<form>` が存在すればそれと関連付けられます。）

この属性によって、 `<select>` 要素は、 `<form>` 要素の子孫に限らず、文書内のどこの `<form>` と結び付けることもできます。これは祖先の `<form>` を上書きすることもできます。

`multiple`

論理属性で、リストの複数の選択肢を選択することができることを示します。指定されていない場合は、一度に選択することができる選択肢は一つだけです。 `multiple` が指定されている場合、多くのブラウザーは単一行のドロップダウンの代わりに、スクロールするリストボックスを表示します。

`name`

この属性は、コントロールの名前を指定するために使用します。

`required`

論理属性で、空ではない文字列の値の選択肢を選択しなければならないことを示します。

`size`

コントロールがスクロールするリストボックスとして表示される場合（つまり、 `multiple` が指定されている場合）、この属性は一度に見えるべきリストの行数を表します。ブラウザーは、 select 要素をスクロールリストボックスとして提供する必要はありません。既定値は `0` です。

**メモ:** HTML 仕様書によると、 size 属性の初期値は `1` であるべきとされています。しかしながら、実際のところは、このことによっていくつかのウェブサイトを壊してしまうことがわかり、他のブラウザーでも現在そうしているものはなく、 Mozilla は当分の間、 Firefox でも `0` を返し続けることを選択しました。

使用上の注意
------

### 複数の項目の選択

デスクトップコンピューターでは、 `<select>` 要素に `multiple` 属性がついている場合に、複数の項目を選択する方法がいくつもあります。

マウスを使用すると、 `Ctrl`、`Command`、`Shift` キー（オペレーティングシステムによって異なります）を押しながらクリックすることで、複数の項目を選択または解除することができます。

**警告:** キーボードから連続していない複数の項目を選択する仕組みは、今のところ Firefox でしか動作しないようです。

macOS では、 `Ctrl` + `↑` および `Ctrl` + `↓` のショートカットが、 OS 既定の *Mission Control* および *Application windows* のショートカットと競合するため、動作させるためにはこれらをオフにしなければならないでしょう。

キーボードを使用して、連続した複数の項目を選択するには以下のようにします。

* `<select>` 要素にフォーカスを移動します（例えば
 `Tab`
 を使用して）。
* `↑`
 および
 `↓`
 のカーソルキーを使用して、項目を上下に移動し、選択したい範囲の先頭または末尾の項目を選択する。
* `Shift`
 キーを押したまま
 `↑`
 および
 `↓`
 のカーソルキーを使用して、項目を選択する範囲を増加または減少させる。

キーボードを使用して、連続していない複数の項目を選択するには以下のようにします。

* `<select>` 要素にフォーカスを移動します（例えば
 `Tab`
 を使用するなど）。
* `Ctrl`
 キーを押したまま
 `↑`
 および
 `↓`
 のカーソルキーを使用して「フォーカスのある」選択肢を、選択したいものに移動します。「フォーカスのある」選択肢は、キーボードでリンクをフォーカスしたときと同様に、点線の輪郭線で強調されます。
* `スペース`
 を押して「フォーカスのある」選択肢を選択または解除します。
CSS のスタイル付け
-----------

`<select>` 要素は、 CSS を使って生産的にスタイル付けすることが困難です。他の要素のように、特定の側面で影響を与えることはできます。例えば、ボックスモデルや表示されるフォントを操作したり、 `appearance` プロパティを使用してシステムの既定の `appearance` を削除したりすることができます。

しかし、これらのプロパティはブラウザー間で一貫した結果が得られませんし、異なる種類のフォーム要素を互いに一列に並べたりするのは困難なことです。 `<select>` 要素の内部構造は複雑で、制御するのは困難です。完全に制御したいのであれば、スタイル付けをするのに優れた機能を備えたライブラリを使用するか、非意味的要素や JavaScript や WAI-ARIA をを使用して独自のドロップダウンメニューを実装することを検討してください。

`<select>` のスタイル付けについてのさらなる有益な情報は、以下を参照してください。

* HTML フォームのスタイル付け
* HTML フォームの高度なスタイル付け

単純な `<select>` のスタイル設定の例として、下記の「select のスタイルのカスタマイズ」の例もご覧ください。

例
-

### 基本的な select

以下の例では、とても簡単なドロップダウンメニューを生成し、既定で 2 番目の選択肢を選択状態にしておきます。

```html
<!-- 最初に Second Value が選択されます。 -->
<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>
```

#### 結果

### 高度な複数選択の機能

以下の例はもっと複雑で、 `<select>` 要素で使用できる機能をもっと示しています。

```html
<label>
  Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster" disabled>Hamster</option>
    </optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrot</option>
      <option value="macaw">Macaw</option>
      <option value="albatross">Albatross</option>
    </optgroup>
  </select>
</label>
```

#### 結果

次のことが分かるでしょう。

* `multiple` 属性を入れてあるので、複数のオプションを選択することができます。
* `size` 属性は、同時に 4 行だけ表示できるようにします。スクロールしてすべての選択肢を表示することができます。
* `<optgroup>` を入れることで、選択肢を複数のグループに分割しています。これは純粋に視覚的なグループ化であり、視覚表現は通常、太字のグループ名と字下げした選択肢で構成されます。
* "Hamster" の選択肢には `disabled` 属性が入っているので、選択することができません。
### select のスタイルのカスタマイズ

この例では、 CSS と JavaScript を使用して `<select>` ボックスに広範な独自スタイルを適用する方法を示しています。

この例では基本的に以下のことを行います。

* 親ラッパーの `<select>` のコンテキスト（`<option>` 要素）を複製し、追加の HTML 要素と JavaScript を使用して標準の期待される動作を再実装します。これには、キーボードアクセシビリティを提供するための基本的なタブの動作が含まれます。
* 状態と CSS を管理するために、いくつかの標準ネイティブの `属性` を新しい要素の `data-attributes` に対応付けします。

**メモ:** すべてのネイティブ機能をサポートしているわけではありません。これは標準的な HTML から始まりますが、 JSON データ、カスタム HTML、または他のソリューションから始めても同じ結果を得ることができます。

#### HTML

```html
<form>
  <fieldset>
    <legend>Standard controls</legend>
    <select name="1A" id="select" autocomplete="off" required>
      <option>Carrots</option>
      <option>Peas</option>
      <option>Beans</option>
      <option>Pneumonoultramicroscopicsilicovolcanoconiosis</option>
    </select>
  </fieldset>
  <fieldset id="custom">
    <legend>Custom controls</legend>
    <select name="2A" id="select" autocomplete="off" required>
      <option>Carrots</option>
      <option>Peas</option>
      <option>Beans</option>
      <option>Pneumonoultramicroscopicsilicovolcanoconiosis</option>
    </select>
  </fieldset>
</form>
```

#### CSS

```css
body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.select:focus {
  border-color: blue;
}

html body form fieldset#custom div.select[data-multiple] div.header {
  display: none;
}

html body form fieldset#custom div.select div.header {
  content: "↓";
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0;
  position: relative;
  width: auto;
  box-sizing: border-box;
  border-width: 1px;
  border-style: inherit;
  border-color: inherit;
  border-radius: inherit;
}

html body form fieldset#custom div.select div.header::after {
  content: "↓";
  align-self: stretch;
  display: flex;
  align-content: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: 0.5em;
}

html body form fieldset#custom div.select div.header:hover::after {
  background-color: blue;
}

.select .header select {
  appearance: none;
  font-family: inherit;
  font-size: inherit;
  padding: 0;
  border-width: 0;
  width: 100%;
  flex: 1;
  display: none;
}

.select .header select optgroup {
  display: none;
}

.select select div.option {
  display: none;
}

html body form fieldset#custom div.select {
  user-select: none;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border-style: solid;
  border-width: 0;
  border-color: gray;
  width: auto;
  display: inline-block;
}

html body form fieldset#custom div.select:focus,
html body form fieldset#custom div.select:hover {
  border-color: blue;
}

html body form fieldset#custom div.select[data-open] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

html body form fieldset#custom div.select[data-open] datalist {
  display: initial;
}

html body form fieldset#custom div.select datalist {
  appearance: none;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  left: 0;
  display: none;
  width: 100%;
  box-sizing: border-box;
  z-index: 2;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

html body form fieldset#custom div.select datalist div.option {
  background-color: white;
  margin-bottom: 1px;
  cursor: pointer;
  padding: 0.5em;
  border-width: 0;
}

html body form fieldset#custom div.select datalist div.option:hover,
html body form fieldset#custom div.select datalist div.option:focus,
html body form fieldset#custom div.select datalist div.option:checked {
  background-color: blue;
  color: white;
}

html
 body
 form
 fieldset#custom
 div.select
 div.optgroup
 div.option[data-disabled] {
  color: gray;
}

html
 body
 form
 fieldset#custom
 div.select
 div.optgroup
 div.option[data-checked] {
  background-color: blue;
  color: white;
}

html body form fieldset#custom div.select div.optgroup div.label {
  font-weight: bold;
}

html body form fieldset#custom div.select div.optgroup div.option div.label {
  font-weight: normal;
  padding: 0.25em;
}

html body form fieldset#custom div.select div.header span {
  flex: 1;
  padding: 0.5em;
}
```

#### JavaScript

```js
const selects = custom.querySelectorAll("select");
for (const select of selects) {
  const div = document.createElement("div");
  const header = document.createElement("div");
  const datalist = document.createElement("datalist");
  const optgroups = select.querySelectorAll("optgroup");
  const span = document.createElement("span");
  const options = select.options;
  const parent = select.parentElement;
  const multiple = select.hasAttribute("multiple");
  function onclick(e) {
    const disabled = this.hasAttribute("data-disabled");
    select.value = this.dataset.value;
    span.innerText = this.dataset.label;
    if (disabled) return;
    if (multiple) {
      if (e.shiftKey) {
        const checked = this.hasAttribute("data-checked");
        if (checked) {
          this.removeAttribute("data-checked");
        } else {
          this.setAttribute("data-checked", "");
        }
      } else {
        const options = div.querySelectorAll(".option");
        for (let i = 0; i < options.length; i++) {
          const option = options[i];
          option.removeAttribute("data-checked");
        }
        this.setAttribute("data-checked", "");
      }
    }
  }

  function onkeyup(e) {
    e.preventDefault();
    e.stopPropagation();
    if (e.keyCode === 13) {
      this.click();
    }
  }

  div.classList.add("select");
  header.classList.add("header");
  div.tabIndex = 1;
  select.tabIndex = -1;
  span.innerText = select.label;
  header.appendChild(span);

  for (const attribute of select.attributes) {
    div.dataset[attribute.name] = attribute.value;
  }
  for (let i = 0; i < options.length; i++) {
    const option = document.createElement("div");
    const label = document.createElement("div");
    const o = options[i];
    for (const attribute of o.attributes) {
      option.dataset[attribute.name] = attribute.value;
    }
    option.classList.add("option");
    label.classList.add("label");
    label.innerText = o.label;
    option.dataset.value = o.value;
    option.dataset.label = o.label;
    option.onclick = onclick;
    option.onkeyup = onkeyup;
    option.tabIndex = i + 1;
    option.appendChild(label);
    datalist.appendChild(option);
  }
  div.appendChild(header);
  for (const o of optgroups) {
    const optgroup = document.createElement("div");
    const label = document.createElement("div");
    const options = o.querySelectorAll("option");

    Object.assign(optgroup, o);
    optgroup.classList.add("optgroup");
    label.classList.add("label");
    label.innerText = o.label;
    optgroup.appendChild(label);
    div.appendChild(optgroup);
    for (const o of options) {
      const option = document.createElement("div");
      const label = document.createElement("div");

      for (const attribute of o.attributes) {
        option.dataset[attribute.name] = attribute.value;
      }
      option.classList.add("option");
      label.classList.add("label");
      label.innerText = o.label;
      option.tabIndex = i + 1;
      option.dataset.value = o.value;
      option.dataset.label = o.label;
      option.onclick = onclick;
      option.onkeyup = onkeyup;
      option.tabIndex = i + 1;
      option.appendChild(label);
      optgroup.appendChild(option);
    }
  }

  div.onclick = (e) => {
    e.preventDefault();
  };

  parent.insertBefore(div, select);
  header.appendChild(select);
  div.appendChild(datalist);
  datalist.style.top = `${header.offsetTop + header.offsetHeight}px`;

  div.onclick = (e) => {
    if (!multiple) {
      const open = div.hasAttribute("data-open");
      e.stopPropagation();
      if (open) {
        div.removeAttribute("data-open");
      } else {
        div.setAttribute("data-open", "");
      }
    }
  };

  div.onkeyup = (event) => {
    event.preventDefault();
    if (event.keyCode === 13) {
      div.click();
    }
  };

  document.addEventListener("click", (e) => {
    if (div.hasAttribute("data-open")) {
      div.removeAttribute("data-open");
    }
  });

  const width = Math.max(
    ...Array.from(options).map((e) => {
      span.innerText = e.label;
      return div.offsetWidth;
    }),
  );

  console.log(width);
  div.style.width = `${width}px`;
}
document.forms[0].onsubmit = (e) => {
  const data = new FormData(this);
  e.preventDefault();
  submit.innerText = JSON.stringify([...data.entries()]);
};
```

#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、記述コンテンツ、対話型コンテンツ、リスト化、ラベル付け可能、リセット可能、及びサブミット可能なフォーム関連要素 |
| 許可されている内容 |
 0 個以上の `<option>` 要素または
 `<optgroup>` 要素
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | `multiple` 属性が**なく**、 1 よりも大きい
 `size` 属性が**ない**ならば
 `combobox (en-US)`、それ以外の場合は
 `listbox` |
| 許可されている ARIA ロール | `multiple` 属性が**なく**、 1 よりも大きい
 `size` 属性が**ない**ならば
 `menu (en-US)`、それ以外の場合は許可されている
 `role` はなし
  |
| DOM インターフェイス | `HTMLSelectElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-select-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<select>` で発生するイベント: `change`, `input`
* `<option>` 要素
* `<optgroup>` 要素


<audio>: 埋め込み音声要素 - HTML: ハイパーテキストマークアップ言語

<audio>: 埋め込み音声要素
=================

**`<audio>`** は HTML の要素で、文書内に音声コンテンツを埋め込むために使用します。この要素は、1 つまたは複数の音源を含むことができます。音源は `src` 属性または `<source>` 要素を使用して表し、ブラウザーがもっとも適切な音源を選択します。また、 `MediaStream` を使用してストリーミングメディアを指し示すこともできます。

試してみましょう
--------

上記の例は、 `<audio>` 要素の単純な使用方法を示しています。 `<img>` 要素と同様の方法で、埋め込みたいメディアへのパスを `src` 属性に設定します。他にも自動再生や繰り返しを行うかどうか、ブラウザーの既定のオーディオコントロールを表示したいかどうか、などの情報を指定する属性を含めることができます。

開始および終了タグ `<audio></audio>` の中のコンテンツは、この要素に対応してないブラウザーで代替として表示されます。

属性
--

この要素にはグローバル属性があります。

`autoplay`

論理属性。指定された場合、音声ファイル全体のダウンロードの完了を待たずに、再生可能な状態になった時点で即座にコンテンツの再生が始まります。

**メモ:** 自動的に音声 (あるいは音声トラックを含む動画) を再生するサイトはユーザーにとって不快な体験になる可能性がありますので、可能な限り避けるべきです。自動再生機能が必須である場合は、オプトイン (ユーザーが明示的に有効化することを求める) にするべきです。ただし、ユーザーの制御下で後からソースを設定するメディア要素を作成するときは、この方法が役に立つでしょう。自動再生ガイドには autoplay の正しい使い方についての追加情報があります。

`controls`

この属性が指定された場合、ブラウザーは再生・一時停止、音量、シークの各機能を制御するコントロールを表示します。

`controlslist`
Experimental

Non-standard

`controlslist` 属性は、指定された場合、ブラウザーが自分自身で一連のコントロールを表示するとき（つまり、 `controls` 属性が指定されたとき）、 `audio` 要素にどのようなコントロールを表示するかを選択するのを支援します。

取ることができる値は `nodownload`、`nofullscreen`、`noremoteplayback` です。

`crossorigin`

この列挙型の属性は、関連する音声ファイルを取得する際に CORS を使用するかを示します。CORS が有効なリソース は、*汚染*されることなく `<canvas>` 要素で再利用できます。次の値が使用できます:

`anonymous`

資格情報を伴わずにオリジン間リクエストを実行します。すなわち、 Cookie や X.509 証明書がない `Origin:` HTTP ヘッダーを送信したり、 HTTP ベーシック認証を行ったりしません。サーバーが元のサイトに信用情報を付与しない場合 (`Access-Control-Allow-Origin:` HTTP ヘッダーの設定なし)、画像が*汚染*され、その使用も制限されます。

`use-credentials`

資格情報を伴ってオリジン間リクエストを実行します。すなわち、Cookie や X.509 証明書を伴う `Origin:` HTTP ヘッダーを送信する、あるいは HTTP ベーシック認証を行います。サーバーが元のサイトに信用情報を付与しない場合 (`Access-Control-Allow-Credentials:` HTTP ヘッダーに関わらず)、画像が*汚染*され、その使用も制限されます。

この属性が存在しない場合、リソースは CORS リクエストなしで (すなわち、 `Origin:` HTTP ヘッダーなしで) 取得され、 `<canvas>` 要素での汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワードに **anonymous** が指定されたものとして扱われます。追加の情報は CORS 設定属性を参照してください。

`disableremoteplayback`
Experimental

論理属性で、有線 (HDMI, DVI, など) や無線技術 (Miracast, Chromecast, DLNA, AirPlay, など) で接続された機器のリモート再生機能を無効にするために使用します。詳しくはこの提案中の仕様書をご覧ください。

**メモ:** Safari では、代替として `x-webkit-airplay="deny"` を使用することができます。

`loop`

論理型の属性です。指定された場合、音声プレイヤーは音声の末尾に達すると、自動的に先頭に戻ります。

`muted`

論理型の属性で、音声の既定の設定を示します。この属性を設定すると、初期状態が消音になります。既定値は `false` です。

`preload`

列挙型の属性で、ユーザーに取って最良の結果をもたらすと作者が考えていることのヒントをブラウザーに伝えるためのものです。以下の値のうちひとつを持つことができます。

* `none`: 音声を事前に読み込むべきではないことを示します。
* `metadata`: 音声のメタデータ (例えば、長さ) を読み込みます。
* `auto`: ユーザーが音声ファイルを使用しないと思われる場合でも、ファイル全体をダウンロードしてよいことを示します。
* *空文字列*: これは `auto` 値と同義です。

既定値はブラウザーによって異なります。仕様書では `metadata` にするよう助言しています。

**メモ:**

* `autoplay` 属性は `preload` より優先します。`autoplay` を指定すると、言うまでもなくブラウザーは音声を再生するためにダウンロードを始めなければなりません。
* 仕様書は、ブラウザーがこの属性の値に従うことを強制していません。これは単なるヒントです。

`src`

埋め込む音声コンテンツの URL を指定します。この属性は HTTP アクセス制御に従います。これはオプションです。代わりに `<source>` 要素を audio ブロック内で使用して、埋め込む音声を指定することもできます。

イベント
----

| イベント名 | 発生するとき |
| --- | --- |
| `audioprocess` | `ScriptProcessorNode` の入力バッファーの処理の準備ができた。 |
| `canplay` | ブラウザーがメディアを再生できるようになったものの、追加のバッファリングのために停止することなくメディアの最後まで再生するには、充分なデータが読み込まれていないとみられる。 |
| `canplaythrough` | ブラウザーがコンテンツのバッファリングのために停止することなく最後までメディアを再生することができるとみられる。 |
| `complete` | `OfflineAudioContext` のレンダリングが終了した。 |
| `durationchange` | `duration` 属性が更新された。 |
| `emptied` | メディアが空になった。例えば、このイベントはメディアがすでに読み込まれた (または部分的に読み込まれた) 状態で、再読み込みのために `HTMLMediaElement.load` メソッドが呼び出された場合など。 |
| `ended` | メディアの末尾に達したために再生が停止した。 |
| `loadeddata` | メディアの最初のフレームが読み込み終わった。 |
| `loadedmetadata` | メタデータを読み込み終えた。 |
| `pause` | 再生が一時停止した。 |
| `play` | 再生が始まった。 |
| `playing` | データがなくなったために一時停止または遅延した後で、再生の再開の準備ができた。 |
| `ratechange` | 再生レートが変更された。 |
| `seeked` | *シーク*操作が完了した。 |
| `seeking` | *シーク*捜査が始まった。 |
| `stalled` | ユーザーエージェントがメディアを読み込もうとしているが、データが予期せずに入ってこない。 |
| `suspend` | メディアデータの読み込みが停止した。 |
| `timeupdate` | `currentTime` 属性で示されている時刻が更新された。 |
| `volumechange` | 音量が変更された。 |
| `waiting` | 一時的なデータの不足により、再生が停止した。 |

使用上の注意
------

ブラウザーはすべてが同じファイル形式や音声コーデック (en-US)に対応しているわけではありません。内部に含められた `<source>` 要素で複数のソースを提供することができ、ブラウザーは理解できる最初のものを使用します。

```html
<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Download <a href="myAudio.mp3">MP3</a> or
    <a href="myAudio.ogg">OGG</a> audio.
  </p>
</audio>
```

私たちは大量の綿密なメディアファイル形式とその中で使用することができる音声コーデックのガイド (en-US)を提供しています。また、動画で対応しているコーデックのガイドも利用することができます。

他の使用上のメモ:

* `controls` 属性を指定しない場合、音声プレイヤーはブラウザーの既定のコントロールを含めません。 JavaScript と `HTMLMediaElement` API を使用して、独自のカスタムコントロールを作成することができます。
* 音声コンテンツを詳細に制御できるように、 `HTMLMediaElement` はさまざまなイベントを発行します。これは音声の読み込みプロセスを監視する方法も提供するので、エラーを監視したり、再生や捜査を始めることができるようになったことを検出したりすることができます。
* ウェブオーディオ API を使用すると、既存の音声ファイルのストリーミングではなく、 JavaScript コードから音声ストリームを直接生成および操作することもできます。
* `<audio>` 要素は `<video>` 要素と同じような方法で字幕を持つことができません。 Ian Devlin による WebVTT and Audio で、役立つ情報や作業があります。
* この要素を対応しているブラウザーで代替コンテンツをテストするには、`<audio>` を `<notanaudio>` のような存在しない要素に置き換えることで行うことができます。

HTML の `<audio>` 要素の使用に関する良い情報源として、映像および音声コンテンツの初心者向けチュートリアルがあります。

### CSS でのスタイル付け

`<audio>` 要素は既定では固有の視覚的な出力を持ちませんが、 `controls` 属性が指定されると、ブラウザーの標準のコントロールが表示されます。

既定のコントロールは `display` の値に既定で `inline` を持っており、テキストブロックなどの中に置いておきたい場合でない限り、配置やレイアウトを制御しやすくするために、値を `block` に設定することは、多くの場合は良い考えです。

既定のコントロールは、ブロックを単位としてて影響するプロパティでスタイル付けすることができるので、 `border` や `border-radius`、`padding`、`margin` 等を指定することができます。しかし、音声プレイヤー内の個別のコンポーネントはスタイル付けすることができず (例えば、ボタンの寸法やアイコンの変更、フォントの変更など)、またコントロールはブラウザーごとに異なります。

ブラウザー間で一貫したルック＆フィールを実現するには、カスタムコントロールを作成する必要があるでしょう。これは好きな方法でマークアップおよびスタイル付けをすることができ、 JavaScript と `HTMLMediaElement` API を使用することで、これらの機能を結合することができます。

動画プレイヤーのスタイル付けの基本 (en-US)は、便利なスタイル付けテクニックをいくつか紹介しています。これは `<video>` の文脈で書かれたものですが、多くは `<audio>` にも同様に適用されます。

### トラックの追加と削除の検出

`addtrack` および `removetrack` イベントを用いると、 `<audio>` 要素でトラックが追加されたり削除されたりしたことを検出することができます。しかし、これらのイベントは `<audio>` 要素自身に直接送信されるわけではありません。代わりに、 `<audio>` の `HTMLMediaElement` 内にある、要素に追加されたトラックの種類に対応するトラックリストオブジェクトに送信されます。

`HTMLMediaElement.audioTracks`

メディア要素のオーディオトラックのすべてを含む `AudioTrackList` です。 `addtrack` のリスナーをこのオブジェクトに追加すると、新しいオーディオトラックが要素に追加された時に通知を受け取ることができます。

`HTMLMediaElement.videoTracks`

`addtrack` リスナーをこの `VideoTrackList` オブジェクトに追加することで、要素に動画トラックが追加されたときに通知を受け取ることができます。

`HTMLMediaElement.textTracks`

`addtrack` リスナーをこの `TextTrackList` (en-US) オブジェクトに追加することで、要素にテキストトラックが追加されたときに通知を受け取ることができます。

**メモ:** `<audio>` 要素であっても、動画やテキストトラックリストを持っており、インターフェイスの実装の仕様が奇妙に見えますが、実際に動画を表示するために使用することができます。

例えば、次のようなコードで `<audio>` 要素で音声トラックが追加されたり削除されたりしたときを検出することができます。

```js
const elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};
```

このコードは音声トラックが要素で追加および削除されることを監視し、トラックエディターの論理関数を呼び出すことで、エディターにおける利用できるトラックの一覧でトラックを登録や削除を行います。

`addEventListener()` を使用して `addtrack` および `removetrack` イベント待ち受けすることもできます。

例
-

### 基本的な使用法

以下の例は `<audio>` 要素で OGG ファイルを再生する単純な例を示しています。ページで許可されていれば、 `autoplay` 属性によって自動再生され、代替コンテンツも含んでいます。

```html
<!-- シンプルな音声再生 -->
<audio src="AudioTest.ogg" autoplay>
  <a href="AudioTest.ogg">OGG 音声をダウンロード</a>。
</audio>
```

いつ自動再生が動作するのか、自動再生を使用する許可の取得方法、いつどのように自動再生を使用するのが適切であるのかについては、自動再生ガイドをご覧ください。

### <source> 要素を伴う <audio> 要素

この例では、埋め込まれる音声トラックを、 `<audio>` 要素の直接の `src` 属性ではなく、内部の `<source>` 要素のものを使用して指定しています。これは `type` 属性の中でファイルの MIME タイプを含めることで、ブラウザーがそのファイルを再生できるかどうかを知ることができ、そのファイル再生できないときに時間を浪費しません。

```html
<audio controls>
  <source src="foo.wav" type="audio/wav" />
  <a href="foo.wav">WAV 音声をダウンロード</a>。
</audio>
```

### 複数の <source> 要素を持つ <audio>

この例には複数の `<source>` 要素があります。ブラウザーは、最初の source 要素 (Opus) が再生可能であればそれを読み込もうとし、そうでなければ 2 つ目 (Vorbis) に、最後に MP3 にフォールバックします。

```html
<audio controls>
  <source src="foo.opus" type="audio/ogg; codecs=opus" />
  <source src="foo.ogg" type="audio/ogg; codecs=vorbis" />
  <source src="foo.mp3" type="audio/mpeg" />
</audio>
```

アクセシビリティの考慮事項
-------------

台詞のある音声には、実際にコンテンツを説明する字幕と文字化情報 (transcript) を提供するべきです。 WebVTT を使用して字幕を指定すると、聴力を失った人が、音声の再生時に音声の内容を理解する事ができるようになるのに対し、文字化情報を使用すると、録音されたコンテンツを理解するのに時間が掛かる人が、自分に合ったペースと書式で録音の内容を確認できるようになります。

自動字幕サービスが使用されている場合は、生成されたコンテンツが元の音声を正しく表現しているかを確認することが重要です。

`<audio>` 要素は直接 WebVTT に対応していません。機能を提供するライブラリまたはフレームワークを探すか、字幕を表示するコードを自分自身で書くかする必要があります。一つの選択肢として、 `<video>` 要素が WebVTT に対応しているので、これで音声を再生するというものもあります。

字幕や文字化情報では、話されるセリフに加えて、重要な情報を伝える音楽や音響効果も識別できるようにしてください。これには感情や口調も含みます。例えば、以下の WebVTT では、角括弧を使用して口調や感情を閲覧者に示しています。これによって音楽、物音、効果音などの雰囲気を確立するのに役立ちます。
```

1
00:00:00 --> 00:00:45
[エネルギチックなテクノ音楽]

2
00:00:46 --> 00:00:51
タイムキーパーのポッドキャストのようこそ！このエピソードでは、私たちはどちらのスイス時計が腕時計かを議論します？

16
00:00:52 --> 00:01:02
[笑い] ごめん！言いたかったのは、どの腕時計がスイスの腕時計か？です。
```

また、 `<audio>` 要素に対応していないブラウザーを使用している閲覧者向けのフォールバックとしていくらかのコンテンツ (直接ダウンロードするリンクなど) を提供するのは良い習慣です。

```html
<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    <a href="myAudio.mp3">MP3</a> または
    <a href="myAudio.ogg">OGG</a> の音声をダウンロードしてください。
  </p>
</audio>
```

* Web Video Text Tracks Format (WebVTT)
* WebAIM: Captions, Transcripts, and Audio Descriptions
* MDN WCAG を理解する ― ガイドライン 1.2 の解説
* Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0
* Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0
技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、記述コンテンツ、埋め込みコンテンツ。`controls`
 属性がある場合は、対話型コンテンツと知覚可能コンテンツ。
  |
| 許可されている内容 |
 要素が `src` 属性を持つ場合:
 0個以上の `<track>`
 要素とそれに続く、メディア要素を含まない透過的コンテンツ。すなわち
 `<audio>` 要素や `<video>`
 を子要素として配置してはなりません。その他の場合: 0個以上の
 `<source>` 要素、0個以上の
 `<track>`
 要素、メディア要素を含まない透過的コンテンツ。すなわち
 `<audio>` 要素や `<video>`
 を子要素として配置してはなりません。
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 埋め込みコンテンツを受け入れるすべての要素。 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | `application` |
| DOM インターフェイス | `HTMLAudioElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-audio-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ウェブメディア技術
    + メディアコンテナー形式 (ファイル形式)
    + ウェブで使用される音声コーデックのガイド (en-US)
* Web Audio API
* `HTMLAudioElement`
* `<source>`
* `<video>`
* 学習エリア: 動画及び音声のコンテンツ
* ブラウザーに依存しない音声の基本 (en-US)


<aside>: 余談要素 - HTML: ハイパーテキストマークアップ言語

<aside>: 余談要素
=============

**`<aside>`** は HTML の要素で、文書のメインコンテンツと間接的な関係しか持っていない文書の部分を表現します。サイドバーやコールアウトボックスなどを表現するためによく使われます。

試してみましょう
--------

属性
--

この要素にはグローバル属性のみがあります。

使用上の注意
------

* 文章中の括弧書きについては、文章の主要な流れに属するものであるといえますので、これをタグ付けするために `<aside>` 要素を使用しないでください。
例
-

### <aside> の使用

このれは `<aside>` を使用して記事の中のある段落をマークアップします。この段落は記事の主要な内容と間接的な関係しかありません。

```html
<article>
  <p>
    The Disney movie <cite>The Little Mermaid</cite> was first released to
    theatres in 1989.
  </p>
  <aside>
    <p>The movie earned $87 million during its initial release.</p>
  </aside>
  <p>More info about the movie…</p>
</article>
```

#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、区分コンテンツ、知覚可能コンテンツ |
| 許可されている内容 | フローコンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素。`<aside>` 要素は
 `<address>`
 要素の子孫要素として配置してはならない。
  |
| 暗黙の ARIA ロール | `complementary` |
| 許可されている ARIA ロール | `feed`, `none` (en-US),
 `note` (en-US), `presentation`,
 `region`, `search` |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-aside-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 他の区分化関連要素: `<body>`, `<article>`, `<section>`, `<nav>`, h1, h2, h3, h4, h5, h6, `<hgroup>`, `<header>`, `<footer>`, `<address>`
* HTML のセクションとアウトラインの使用
* ARIA: Complementary ロール


<title>: 文書題名要素 - HTML: ハイパーテキストマークアップ言語

<title>: 文書題名要素
===============

**`<title>`** は HTML の要素で、ブラウザーの題名バーやページのタブに表示される文書の題名を定義します。テキストのみを含めることができます。要素内のタグはすべて無視されます。

```html
<title>Grandma's Heavy Metal Festival Journal</title>
```

|  |  |
| --- | --- |
| コンテンツカテゴリー | メタデータコンテンツ |
| 許可されている内容 | 要素間のホワイトスペースではないテキスト。 |
| タグの省略 |
 開始タグと終了タグの両方が必要。なお、
 `</title>`
 を忘れると、ブラウザーがページの残りの部分を無視することがある。
  |
| 許可されている親要素 |
 他に `<title>` 要素を含まない
 `<head>` 要素。
  |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLTitleElement` |

属性
--

この要素にはグローバル属性のみがあります。

使用上のメモ
------

`<title>` 要素は常にページの `<head>` ブロックの中で使われます。

### ページの題名と SEO

ページの題名の内容は、検索エンジン最適化 (SEO) に著しい影響を与えることがあります。一般的に、長く、説明的な題名は、短く、一般的な題名よりも効果があります。題名の内容は、検索エンジンのアルゴリズムが検索結果にページを列挙する順序を決定するために使用する材料の一つです。また、題名は検索結果ページを眺めている読者の注意を引く最初の「フック」となります。

良い題名を作成するためのガイドラインやコツを示します。

* 1 ～ 2 語の題名は避けましょう。説明的な文言を使用したり、用語集や参照スタイルのページでは用語と定義の組を使用したりしましょう。
* 検索エンジンは通常、ページの題名は最初のおよそ 55–60 文字を表示します。それを超えるテキストは失われることがあるので、それよりも長くはしないようにしてください。もっと長い題名を使う必要があるのであれば、重要な部分を前にもってくると、題名の中の重要な部分が落とされにくくなります。
* 「キーワード BLOB」を使用しないでください。題名が単なるキーワードの羅列であると、アルゴリズムはそのページの検索結果内の順位を落とすことがあります。
* 題名はできるだけサイト内で固有のものにするようにしてください。複写や複写に近いものは検索結果を不正確にすることがあります。
例
-

```html
<title>素敵で面白いこと</title>
```

この例ではページの題名全体 (ウィンドウの最上部またはウィンドウのタブに表示されるもの) を「素敵で面白いこと」にします。

アクセシビリティの考慮
-----------

正確で簡潔な題名を提供し、ページの目的を記述することが重要です。

支援技術を使用するユーザーのためのナビゲーション技術として、ページの題名を読んで、どのようなコンテンツが含まれるかを推測するというものが良く使われます。これはコンテンツを特定するためにページ間を移動すると、時間を消費したり手順を間違える可能性があったりするからです。題名はウェブサイトのページごとに固有のものであるべきです。ページの主な目的を最初に示し、その後にウェブサイト名が続くのが理想的です。このパターンに従うことで、ページの主な目的が確実にスクリーンリーダーによって最初に告知されるようになります。こうすることで、ユーザーが同じウェブサイト内で移動するすべてのページで、固有のページ題名よりも先にウェブサイトの名前が読み上げられるのを待たなければならないよりも、はるかに優れた使い勝手になります。

### 例

```html
<title>Menu - Blue House Chinese Food - FoodYum: Online takeout today!</title>
```

フォームの送信にエラーが含まれていて、送信すると現在のページが再表示された場合、題名を使用してユーザーに送信のエラーを認識させることができます。例えば、ページ `title` の値を更新して、重要なページの状態変化（検証状態の問題など）を反映します。

```html
<title>
  2 errors - Your order - Sea Food Store - Food: Online takeout today!
</title>
```

**メモ:** 現在のところ、ページの題名を動的に更新しても、スクリーンリーダーによって自動的にアナウンスされることはありません。ページの状態の大幅な変更を反映するためにページの題名を更新する場合は、ARIA ライブリージョンを使用する必要があるかもしれません。

* MDN WCAG を理解する ― ガイドライン 2.4 の解説
* Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.1
仕様書
---

| Specification |
| --- |
| HTML Standard # the-title-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* SVG の `<title>` 要素


<embed>: 埋め込み外部コンテンツ要素 - HTML: ハイパーテキストマークアップ言語

<embed>: 埋め込み外部コンテンツ要素
======================

**`<embed>`** は HTML の要素で、外部のコンテンツを文書中の指定された場所に埋め込みます。コンテンツは外部アプリケーションや、対話型コンテンツの他の出所（ブラウザーのプラグインなど）によって提供されます。

試してみましょう
--------

**メモ:** 本文書は、HTML Living Standard の一部として定義された要素についてのみ記載します。以前の標準化されていない要素の実装については扱いません。

最近のほとんどのブラウザーは、ブラウザーのプラグインの対応を非推奨にして削除しているため、サイトを平均的なユーザーのブラウザーで操作できるようにしたいのであれば、 `<embed>` に頼ることは賢明ではないということを意識しておいてください。

属性
--

この要素にはグローバル属性があります。

`height`

このリソースを表示する高さを CSS ピクセル値で示します。絶対的な値でなければなりません。パーセント値は使用*できません*。

`src`

埋め込むリソースの URL を示します。

`type`

インスタンス化するプラグインを選択するために使用する MIME タイプ。

`width`

このリソースを表示する幅を CSS ピクセル値で示します。絶対的な値でなければなりません。パーセント値は使用*できません*。

使用上のメモ
------

`object-position` プロパティを使用して、要素のフレーム内の埋め込みオブジェクトの位置を調整することができ、 `object-fit` プロパティを使用して、オブジェクトの寸法をフレーム内にどのように合わせるかを制御することができます。

例
-

```html
<embed
 type="video/quicktime"
 src="movie.mov"
 width="640"
 height="480"
 title="Title of my video" />
```

アクセシビリティの考慮
-----------

`embed` 要素に `title` 属性を使用してコンテンツにラベルを付けるようにしてください。そうすれば、読み上げソフトのような支援技術を使用して捜査している人々が内容を理解することができるようになります。題名がないと、埋め込みコンテンツが何であるかを特定することができません。このようにして文脈を見失うと、特に `embed` 要素が動画や音声のような対話的なコンテンツを含んでいたとに、混乱したり時間を浪費したりします。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、記述コンテンツ、埋め込みコンテンツ、対話型コンテンツ、知覚可能コンテンツ |
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 | 開始タグは必須。終了タグを記述してはならない。 |
| 許可されている親要素 | 埋め込みコンテンツを受け入れるすべての要素。 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | `application`, `document`,
 `img` (en-US), `none` (en-US),
 `presentation` |
| DOM インターフェイス | `HTMLEmbedElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-embed-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 様々な種類のコンテンツの埋め込みのために使用されるその他の要素: `<audio>`, `<canvas>`, `<iframe>`, `<img>`, `<math>`, `<object>`, `<svg>`, `<video>`
* フレーム内での埋め込みコンテンツの位置や寸法の設定: `object-position` および `object-fit`


<section>: 汎用セクション要素 - HTML: ハイパーテキストマークアップ言語

<section>: 汎用セクション要素
====================

**`<section>`** は HTML の要素で、文書の自立した一般的なセクション（区間）を表します。そのセクションを表現するより意味的に具体的な要素がない場合に使用します。少数の例外を除いて、セクションには見出しを置いてください。

試してみましょう
--------

属性
--

この要素にはグローバル属性のみがあります。

使用上の注意
------

前述のように、 `<section>` は汎用的な区分要素ですので、それを表現するためのより具体的な要素がない場合にのみ使用してください。例えば、ナビゲーションメニューは `<nav>` 要素で囲むべきですが、検索結果のリストや地図表示とそのコントロールなどは特定の要素を持たないので、 `<section>` の中に入れることができます。

また、次のようなことも考慮してください。

* この要素の内容が単独の、自立した記事として配信されて意味のある不可分の単位のコンテンツ（例えば、ブログ投稿やブログのコメント、新聞記事など）を表す場合は、`<article>` 要素を使用したほうがいいでしょう。
* 内容が、メインコンテンツと一緒に機能する有用な付帯情報を表しているものの、メインコンテンツの一部ではない場合（関連リンクや著者の経歴など）は、 `<aside>` を使用してください。
* 内容が文書のメインコンテンツを表す場合は、 `<main>` を使用してください。
* スタイル付けのためのラッパーとしてのみ使用する場合は、 `<div>` を使用してください。大まかに言うと、 `<section>` は文書のアウトラインの中に論理的に現れるべきです。

 繰り返しになりますが、それぞれの `<section>` はできるだけ、特に見出し
 (h1 - h6 要素) を `<section>` の子要素に含めて識別できるようにするべきです。見出しのない `<section>` の例については以下を参照してください。

例
-

### 単純な使い方の例

#### 導入前

```html
<div>
  <h2>見出し</h2>
  <p>素晴らしいコンテンツの数々</p>
</div>
```

##### 結果

#### 導入後

```html
<section>
  <h2>見出し</h2>
  <p>素晴らしいコンテンツの数々</p>
</section>
```

##### 結果

### 見出しのないセクションの使用

`<section>` が見出しなしで使用されている状況は、伝統的な文書構造よりも、ウェブアプリケーションや UI のセクションでよく見られます。文書内では、コンテンツの内容を示す見出しのない独立したセクションがあっても、実際には何の意味もありません。このような見出しは、すべての読者にとって便利ですが、特にスクリーンリーダーのような支援技術のユーザーにとっては便利であり、また、 SEO にも有効です。

しかし、二次的なナビゲーションの仕組みを考えてみましょう。グローバルナビゲーションがすでに `<nav>` 要素で囲まれている場合、 `<section>` の中に前へ/次へのメニューを入れることも考えられます。

```html
<section>
  <a href="#">前の記事</a>
  <a href="#">次の記事</a>
</section>
```

また、アプリを制御するためのボタンバーのようなものはどうでしょうか。必ずしも見出しが必要ではないかもしれませんが、それでも文書の明確なセクションであることに変わりはありません。

```html
<section>
  <button class="reply">返信</button>
  <button class="reply-all">全員に返信</button>
  <button class="fwd">転送</button>
  <button class="del">削除</button>
</section>
```

支援技術やスクリーンリーダーに適した CSS を使って非表示にするには、次のようにします。

```css
.hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
```

#### 結果

コンテンツによっては、見出しを入れることで SEO 施策にもなるので、選択肢の一つとして検討してみてはいかがでしょうか。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 区分コンテンツ,
 知覚可能コンテンツ |
| 許可されている内容 | フローコンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素。ただし、`<section>` 要素は
 `<address>`
 要素の子孫要素として配置してはならない。
  |
| 暗黙の ARIA ロール | `region`
 （要素にアクセシブル名がある場合）、それ以外の場合は対応するロールなし |
| 許可されている ARIA ロール | `alert`, `alertdialog`,
 `application`, `banner`,
 `complementary`,
 `contentinfo`, `dialog`,
 `document`, `feed`,
 `log`, `main`,
 `marquee` (en-US), `navigation`,
 `none` (en-US), `note` (en-US),
 `presentation`, `search`,
 `status`, `tabpanel` (en-US) |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-section-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* その他の区分化関連要素: `<body>`, `<nav>`, `<article>`, `<aside>`, h1, h2, h3, h4, h5, h6, `<hgroup>`, `<header>`, `<footer>`, `<address>`
* HTML のセクションとアウトラインの使用
* ARIA: Region ロール
* Why You Should Choose HTML5 article Over section, by Bruce Lawson


<h1>–<h6>: HTML の見出し要素 - HTML: ハイパーテキストマークアップ言語

<h1>–<h6>: HTML の見出し要素
======================

**`<h1>`** ～ **`<h6>`** は HTML の要素で、セクションの見出しを 6 段階で表します。`<h1>` が最上位で、`<h6>` が最下位です。

試してみましょう
--------

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ, 見出しコンテンツ, 知覚可能コンテンツ |
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素。 |
| 暗黙の ARIA ロール | heading |
| 許可されている ARIA ロール | `tab`、`presentation`、
 `none` (en-US) の何れか
  |
| DOM インターフェイス | `HTMLHeadingElement` |

属性
--

見出し要素にはグローバル属性のみがあります。

使用上の注意
------

* 見出し情報は、ユーザーエージェントが自動的に文書の目次を作成するために使用することがあります。
* テキストの大きさを変えるために見出し要素を使用しないでください。代わりに CSS の `font-size` プロパティを使用してください。
* 見出しレベルを飛ばさないでください。常に `<h1>` から始め、次に `<h2>`、以下も同様にしてください。
### 1 つのページに複数の `<h1>` 要素を使用しない

1 つのページに複数の `<h1>` 要素を使用することは HTML 標準では認められていますが（入れ子でない限り）、これはよい習慣とはみなされません。1 つのページには、ページの内容を説明する 1 つの `<h1>` 要素（文書の `<title> 要素`と同様）を置くのが一般的です。

**メモ:** 入れ子になったコンテンツ区分要素の中で複数の `<h1>` 要素を入れ子にすることは、HTML 標準の古いバージョンでは認められていました。しかし、これはよい習慣とはみなされず、現在は非適合となっています。詳しくは、There Is No Document Outline Algorithm をご覧ください。

1 ページに 1 つの `<h1>` を使用し、レベルをスキップせずに見出しを入れ子にすることを推奨します。

例
-

### すべての見出し

以下のコードでは、すべての見出しレベルを示しています。

```html
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
```

### ページの例

以下のコードでは、いくつかの見出しとその配下のコンテンツを示しています。

```html
<h1>Heading elements</h1>
<h2>Summary</h2>
<p>Some text here…</p>

<h2>Examples</h2>
<h3>Example 1</h3>
<p>Some text here…</p>

<h3>Example 2</h3>
<p>Some text here…</p>

<h2>See also</h2>
<p>Some text here…</p>
```

アクセシビリティの考慮
-----------

### ナビゲーション

スクリーンリーダーの利用者のよくあるナビゲーションテクニックとして、ページの内容を手早く特定するために、見出しから見出しへとジャンプすることがあります。このため、見出しレベルを飛ばさないようにすることが重要です。見出しレベルを飛ばしてしまうと、このようにナビゲーションしている人が、見つからない見出しがどこにあるのかわからなくなり混乱してしまいます。

**悪い例:**

```html
<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
```

**良い例:**

```html
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
```

#### 入れ子

見出しはページのコンテンツの構造を反映して、節として入れ子になることがあります。多くのスクリーンリーダーはページのすべての見出しの順序付きリストを生成し、利用者がコンテンツの階層構造を手早く特定することもできます。

1. `h1` Beetles
    1. `h2` Etymology
    2. `h2` Distribution and Diversity
    3. `h2` Evolution
        1. `h3` Late Paleozoic
        2. `h3` Jurassic
        3. `h3` Cretaceous
        4. `h3` Cenozoic
    4. `h2` External Morphology
        1. `h3` Head
            1. `h4` Mouthparts
        2. `h3` Thorax
            1. `h4` Prothorax
            2. `h4` Pterothorax
        3. `h3` Legs
        4. `h3` Wings
        5. `h3` Abdomen

見出しが入れ子になった場合、見出しレベルは節が閉じる際に「飛ばされる」ことがあります。

* Headings • Page Structure • WAI Web Accessibility Tutorials
* MDN "WCAG を理解する ― ガイドライン 1.3 の解説"
* Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
* MDN "WCAG を理解する ― ガイドライン 2.4 の解説"
* Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0
* Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0
* Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0
### 区分コンテンツのラベル付け

スクリーンリーダー利用者のための他のナビゲーションテクニックとして、区分コンテンツの一覧を作成して、ページのレイアウトを特定するために使用するものがあります。

区分コンテンツは `aria-labelledby` および `id` 属性の組み合わせで、セクションの目的を詳細に記述するラベルを付けることができます。このテクニックは、同一ページに 2 つ以上の区分要素がある場合に有用です。

#### 例

```html
<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">Primary navigation</h2>
    <!-- navigation items -->
  </nav>
</header>

<!-- ページコンテンツ -->

<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">Footer navigation</h2>
    <!-- navigation items -->
  </nav>
</footer>
```

この例では、スクリーンリーダーは 2 つの `<nav>` セクションがあり、1 つが "Primary navigation" でもう 1 つが "Footer navigation" であるとアナウンスするでしょう。ラベルが提供されていない場合は、スクリーンリーダーを使用している人がそれぞれの `nav` 要素の中身を調べて、それぞれの用途を確かめなければならないかもしれません。

* aria-labelledby 属性の利用
* Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials
仕様書
---

| Specification |
| --- |
| HTML Standard # the-h1,-h2,-h3,-h4,-h5,-and-h6-elements |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<p>`
* `<div>`
* `<section>`


<legend>: フィールドセット凡例要素 - HTML: ハイパーテキストマークアップ言語

<legend>: フィールドセット凡例要素
======================

**`<legend>`** は HTML の要素で、その親要素である `<fieldset>` の内容のキャプションを表します。

試してみましょう
--------

属性
--

この要素には、グローバル属性以外の属性はありません。

例
-

`<legend>` の使用例は、 `<form>` のページを参照してください。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | 記述コンテンツ
 および
 見出し
 （h1–h6 要素）
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | `<fieldset>` 要素。`<legend>`
 要素は
 `<fieldset>`
 の最初の子要素として配置しなくてはならない。
  |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLLegendElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-legend-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ARIA: Form ロール


<center>: 中央揃えテキスト要素 - HTML: ハイパーテキストマークアップ言語

<center>: 中央揃えテキスト要素
====================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`<center>`** は HTML の要素で、中に含まれるブロックレベルまたはインラインコンテンツを中央揃えして表示するブロックレベル要素です。コンテナーはふつう `<body>` ですが、必ずしもそうとは限りません。

このタグは HTML 4（および XHTML 1）で非推奨要素に指定され、CSS の `text-align` プロパティを `<div>` 要素に適用するか、それぞれの `<p>` 要素に適用する方式が採用されました。ブロックを中央揃えするには、別な CSS プロパティである `margin-left` および `margin-right` など用いて、値を `auto` に設定してください（または、 `margin` を `0 auto` に設定してください）。

DOM インタフェース
-----------

この要素は `HTMLElement` インタフェースを実装しています。

例 1
---

```html
<center>
  This text will be centered.
  <p>So will this paragraph.</p>
</center>
```

例 2 （CSS での方法）
--------------

```html
<div style="text-align:center">
  This text will be centered.
  <p>So will this paragraph.</p>
</div>
```

例 3 （CSS での方法）
--------------

```html
<p style="text-align:center">
  This line will be centered.<br />
  And so will this line.
</p>
```

メモ
--

`text-align``:center` を `<div>` または `<p>` 要素に適用すると、その*コンテンツ*を中央揃えにしますが、コンテンツの寸法はどれも変更されません。

仕様書
---

| Specification |
| --- |
| HTML Standard # center |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `text-align`
* `display`


<track>: 埋め込みテキストトラック要素 - HTML: ハイパーテキストマークアップ言語

<track>: 埋め込みテキストトラック要素
=======================

**`<track>`** は HTML の要素で、メディア要素 (`<audio>` および `<video>`) の子として使用します。この要素は自動的に処理される字幕など、時間指定されたテキストトラック (または時系列データ) を指定することができます。トラックは WebVTT 形式 (`.vtt` ファイル) を用います。

試してみましょう
--------

|  |  |
| --- | --- |
| コンテンツカテゴリー | None |
| 許可されている内容 | なし。この要素は空要素です。 |
| タグの省略 | 空要素であるため開始タグは必須、また終了タグを置いてはなりません。 |
| 許可されている親要素 | メディア要素、 `<audio>` または `<video>` |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLTrackElement` |

属性
--

この要素にはグローバル属性があります。

`default`

この属性は、別の track が適切であるとユーザーの設定が示さない限り有効にすべき track であることを表します。この属性はメディア要素ごとに 1 つの `track` 要素のみで使用できます。

`kind`

どのように使用するトラックであるかをを表します。省略した場合、既定の種類は `subtitles` です。属性に無効な値が含まれている場合は `metadata` を使用します (バージョン 52 より前の Chrome は、無効な値を `subtitles` として扱っていました)。以下のキーワードが利用できます。

* `subtitles`
    + 字幕は、視聴者が理解できないコンテンツの翻訳を提供します。例えば、英語の映画における英語以外の言語による会話やテキストです。
    + 字幕には追加コンテンツ、一般的には付加的な背景情報を含む場合があります。例えばスターウォーズの冒頭のテキストや、シーンの日時および場所です。
* `captions`
    + クローズドキャプションは書写、あるいは音声の翻訳を提供します。
    + これは音楽のキューやサウンドエフェクトといった重要な非言語情報を含む場合があります。これはキューのソース (例: 音楽、テキスト、キャラクター) を示すでしょう。
    + 耳が不自由なユーザーや音声をミュートしている場合に適しています。
* `descriptions`
    + テキストによる動画コンテンツの説明です。
    + 目が不自由なユーザーや動画を視聴できない場合に適しています。
* `chapters`
    + チャプタータイトルは、ユーザーがメディアリソースの操作を行う際に使用することを意図しています。
* `metadata`
    + スクリプトが使用するトラック情報です。ユーザーには見えません。

`label`

使用可能なテキストトラックを一覧表示する際にブラウザーが使用する、ユーザーに見せるテキストトラックのタイトルです。

`src`

トラック（`.vtt` ファイル）のアドレスです。有効な URL であることが必要です。この属性は定義する必要があり、 URL の値は文書として — `track` 要素の親要素である `<audio>` または `<video>` が `crossorigin` 属性を持たない限り — 同じオリジンを持たなければなりません。

`srclang`

テキストデータの言語です。有効な BCP 47 言語タグであることが必要です。`kind` 属性に `subtitles` を設定した場合は、`srclang` 属性を定義しなければなりません。

使用上の注意
------

### トラックのデータの種類

`track` 要素でメディアに付加するデータの種類は `kind` 属性で設定します。使用できる値は `subtitles`, `captions`, `descriptions`, `chapters`, `metadata` です。この要素は、ユーザーが付加データを要求した際にブラウザーが提供する、時間指定テキストを含むソースファイルを指示します。

メディア要素は `kind`、`srclang` および `label` が同一の `track` を複数持つことはできません。

### キューの変更の検出

配下にある `TextTrack` は `track` プロパティで示され、現在表示されているキューが変更される度に `cuechange` イベントを受信します。これは、このトラックがメディア要素に関連付けられていない場合でも発生します。

このトラックがメディア要素に関連付けられている場合、 `<track>` を `<audio>` または `<video>` 要素の子として使用すると、 `cuechange` イベントは `HTMLTrackElement` にも送信されます。

```js
let textTrackElem = document.getElementById("texttrack");

textTrackElem.addEventListener("cuechange", (event) => {
  let cues = event.target.track.activeCues;
});
```

例
-

```html
<video controls poster="/images/sample.gif">
  <source src="sample.mp4" type="video/mp4" />
  <source src="sample.ogv" type="video/ogv" />
  <track kind="captions" src="sampleCaptions.vtt" srclang="en" />
  <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en" />
  <track kind="chapters" src="sampleChapters.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles\_de.vtt" srclang="de" />
  <track kind="subtitles" src="sampleSubtitles\_en.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles\_ja.vtt" srclang="ja" />
  <track kind="subtitles" src="sampleSubtitles\_oz.vtt" srclang="oz" />
  <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1" />
  <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2" />
  <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3" />
  <!-- Fallback -->
  …
</video>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # the-track-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* WebVTT テキストトラック形式
* `HTMLMediaElement.textTracks`


<form>: フォーム要素 - HTML: ハイパーテキストマークアップ言語

<form>: フォーム要素
==============

**`<form>`** は HTML の要素で、ウェブサーバーに情報を送信するための対話型コントロールを含む文書の区間を表します。

試してみましょう
--------

CSS の `:valid` および `:invalid` 擬似クラスを使用すると、`<form>` 要素をフォーム内の要素が有効であるかどうかに応じてスタイル付けすることができます。

属性
--

この要素にはグローバル属性があります。

`accept`
非推奨

サーバーが受け付けるコンテンツ型のカンマ区切りリストです。

**メモ:** **この属性は非推奨であり、使用すべきではありません。** 代わりに `<input type=file>` 要素の `accept` 属性を使用してください。

`accept-charset`

 サーバーが受け付ける空白区切りの文字エンコーディングです。ブラウザーは、列挙されたされた順に使用します。既定値は、ページと同じエンコーディングを意味します。
 （以前のバージョンの HTML では、文字エンコーディングをカンマで区切ることもできました。）

`autocapitalize`
Non-standard

これは iOS 版 Safari で使用する標準外の属性であり、テキスト用のフォーム要素が自動的に大文字化を行うかどうかを制御します。フォーム要素の `autocapitalize` 属性は、`<form>` のものより優先します。指定可能な値は次の通りです。

* `none`: 自動大文字化機能を無効にします。
* `sentences`: 文の先頭文字を自動的に大文字化します。
* `words`: 単語の先頭文字を自動的に大文字化します。
* `characters`: すべての文字を自動的に大文字化します。

`autocomplete`

input 要素が既定で、ブラウザーによる値の入力補完を受けるかを示します。フォーム要素の `autocomplete` 属性は、 `<form>` のものより優先します。指定可能な値は次の通りです。

* `off`: ブラウザーは自動的には項目を補完しません。（ブラウザーは、ログインフォームが疑わしい場合、これを無視する傾向があります。autocomplete 属性とログインフィールドを参照してください。
* `on`: ブラウザーは自動的に項目を補完することがあります。

`name`

フォームの名前。この値は空文字列であってはならず、また、フォームコレクションに含まれる `form` 要素がある場合は、その中で一意でなければなりません。

`rel`

注釈や、このフォームが作成するリンク種別を制御します。注釈には `external`、`nofollow`、`opener`、`noopener`、`noreferrer` があります。リンク種別には `help`、`prev`、`next`、`search`、`license` があります。`rel` の値はこれらの列挙値の空白区切りの値です。

### フォーム送信のための属性

以下の属性は、フォーム送信中の動作を制御します。

`action`

フォーム経由で送信された情報を処理するプログラムの URL。この値は `<button>`、`<input type="submit">`、`<input type="image">` の `formaction` 属性によって上書きすることが可能です。この属性は `method="dialog"` が設定されている場合は無視されます。

`enctype`

`method` 属性の値が `post` であるとき、この属性はフォームをサーバーに送信する際に使用する、コンテンツの MIME タイプを示します。以下の値が指定可能です。

* `application/x-www-form-urlencoded`: 既定値です。
* `multipart/form-data`: フォームが `<input>` の `type=file` を含む場合に使用してください。
* `text/plain`: デバッグ用に有用です。

この値は、`<button>`、`<input type="submit">`、`<input type="image">` の `formenctype` 属性によって上書きすることが可能です。

`method`

フォームを送信する際にブラウザーが使用する HTTP メソッドです。以下の値が指定可能です。

* `post`: `POST` メソッドです。フォームのデータはリクエスト本体として送信されます。
* `get`: `GET` メソッドです。フォームのデータは `action` 属性の URL に `?` で区切って追加されます。このメソッドはフォームに副作用がない場合に使用してください。
* `dialog`: フォームが `<dialog>` 要素の中にある場合に使用し、送信の操作を行うと、ダイアログが閉じて `submit` イベントを発行しますが、データを送信したりフォームをクリアしたりはしません。

この値は、 `<button>`、`<input type="submit">`、`<input type="image">` の `formmethod` 属性によって上書きすることが可能です。

`novalidate`

フォームを送信するときに検証しないことを示す論理値です。この属性を指定していない（つまり検証される）場合は、既定の設定を `<button>`、`<input type="submit">`、`<input type="image">` の `formnovalidate` 属性で上書きすることが可能です。

`target`

フォームを送信した後に受け取ったレスポンスの表示先を示す名前またはキーワードです。これは *閲覧コンテキスト*（タブ、ウィンドウ、インラインフレームなど）の名前またはキーワードです。以下のキーワードは特別な意味を持ちます。

* `_self`（既定値）: 現在と同じ閲覧コンテキストに読み込みます。
* `_blank`: 無名の新しい閲覧コンテキストに読み込みます。
* `_parent`: 現在の親の閲覧コンテキストに読み込みます。親がない場合は、`_self` と同じ動作をします。
* `_top`: 最上位の閲覧コンテキスト（すなわち、現在の閲覧コンテキストの祖先に当たり、親がないもの）に読み込みます。親がない場合は、`_self` と同じ動作をします。

この値は、 `<button>`、`<input type="submit">`、`<input type="image">` の `formtarget` 属性によって上書きすることが可能です。

例
-

```html
<!-- 現在の URL に GET リクエストを送信するフォーム -->
<form method="get">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- 現在の URL に POST リクエストを送信するフォーム -->
<form method="post">
  <label>
    Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- fieldset, legend, label のあるフォーム -->
<form method="post">
  <fieldset>
    <legend>Do you agree to the terms?</legend>
    <label><input type="radio" name="radio" value="yes" /> Yes</label>
    <label><input type="radio" name="radio" value="no" /> No</label>
  </fieldset>
</form>
```

### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、知覚可能コンテンツ |
| 許可されている内容 | フローコンテンツ。ただし、 `<form>` 要素を内包することは許可されていません。 |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | `form`（フォームにアクセシブル名がある場合）、それ以外の場合は対応するロールなし。 |
| 許可されている ARIA ロール | `search`,
 `none` (en-US),
 `presentation` |
| DOM インターフェイス | `HTMLFormElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-form-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* HTML フォームガイド
* フォームの作成に使用される、その他の要素: `<button>`, `<datalist>`, `<fieldset>`, `<input>`, `<label>`, `<legend>`, `<meter>`, `<optgroup>`, `<option>`, `<output>`, `<progress>`, `<select>`, `<textarea>`
* フォーム内の要素一覧の取得: `HTMLFormElement.elements`
* ARIA: Form ロール
* ARIA: Search ロール


<address>: 連絡先要素 - HTML: ハイパーテキストマークアップ言語

<address>: 連絡先要素
================

**`<address>`** は HTML の要素で、この中の HTML が個人、団体、組織の連絡先情報を提供していることを示します。

試してみましょう
--------

`<address>` 要素の内容で提供される連絡先情報は、その文脈で適切であればどのような形でもよく、必要とされるあらゆる形の連絡先情報（住所、 URL、メールアドレス、電話番号、ソーシャルメディアのアカウント、地理上の座標など）を含めることができます。`<address>` には、連絡先情報が参照する個人、団体、組織の名前を含めてください。

`<address>` は様々な文脈で使用することができます。ページヘッダーでビジネスの連絡先を提供したり、`<address>` を `<article>` 要素に入れることで、記事の著者を識別したりすることができます。

属性
--

この要素にはグローバル属性のみがあります。

使用上の注意
------

* `<address>` 要素、直近の `<article>` または `<body>` 要素の連絡先情報を表すためにのみ使用できます。
* この要素には、公開日（`<time>` によるもの）のような連絡先情報以外の情報を含めるべきではありません。
* 一般的に、 `<address>` 要素は現在のセクションに `<footer>` 要素があれば、その中に配置することができます。
例
-

この例は `<address>` 要素で記事の編集者の連絡先情報を示す使い方を示しています。

```html
<address>
  作者の連絡先は
  <a href="http://www.somedomain.com/contact"> www.somedomain.com</a>
  です。<br />
  バグを発見した場合は<a href="mailto:webmaster@somedomain.com"
 >ウェブマスターへご連絡ください</a
 >。<br />
  住所は下記の通りです。<br />
  Mozilla Foundation<br />
  331 E Evelyn Ave<br />
  Mountain View, CA 94041<br />
  USA
</address>
```

### 結果

この要素は文字列を `<i>` 要素や `<em>` 要素と同じ既定のスタイルで描画しますが、付加的な意味情報として連絡先情報を扱うときに `<address>` を使用するのがより適切でしょう。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、知覚可能コンテンツ |
| 許可されている内容 | フローコンテンツ。ただし
 `<address>` 要素をネストしたり、見出しコンテンツ
 (`<hgroup>`, h1,
 h2, h3,
 h4, h5,
 h6), 区分コンテンツ
 (`<article>`, `<aside>`,
 `<section>`, `<nav>`),
 `<header>` 要素および
 `<footer>` 要素を入れたりしてはなりません。
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツ
 を受け入れるすべての要素。ただし `<address>` 要素は除く
 (論理的な対称性の原理によれば、親要素である
 `<address>` タグは
 `<address>`
 要素を入れ子にすることができません。したがって、同じ
 `<address>` のコンテンツの親に
 `<address>` タグを置くこともできません)。
  |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLElement`。 Gecko 2.0 (Firefox 4) より前では
 `HTMLSpanElement`
 インターフェイスが提供されます。
  |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-address-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 他のセクション関連要素: `<body>`, `<nav>`, `<article>`, `<aside>`, h1, h2, h3, h4, h5, h6, `<hgroup>`, `<footer>`, `<section>`, `<header>`
* HTML 文書のセクションとアウトライン


<wbr>: 改行可能要素 - HTML: ハイパーテキストマークアップ言語

<wbr>: 改行可能要素
=============

**`<wbr>`** は HTML の要素で、改行可能位置 — テキスト内でブラウザーが任意で改行してよい位置を表しますが、この改行規則は必要のない場合は改行を行いません。

試してみましょう
--------

属性
--

この要素にはグローバル属性のみがあります。

メモ
--

UTF-8 エンコードを使用するページでは、 `<wbr>` 要素は `U+200B ZERO-WIDTH SPACE` コードポイントのように作用します。特に、この要素は Unicode bidi BN コードポイントのように作用するため、双方向性には影響を与えません。 `<div dir=rtl>123,<wbr>456</div>` が 2 行に分かれないときは `456,123` ではなく `123,456` と表示されます。

同じ理由で、 `<wbr>` 要素は改行位置でハイフンを生成しません。行末にのみハイフンを表示させるには、代わりにソフトハイフンの文字エンティティ (``) を使用してください。

例
-

*The Yahoo Style Guide* では、句読点などの区切り文字が行末に置かれることを避けるため URL を句読点の*前*で改行することを推奨しています。区切り文字が行末にあると、読者が URL の末尾を誤解する可能性があります。

```html
<p>
  http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages
</p>
```

### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 記述コンテンツ |
| 許可されている内容 | なし |
| タグの省略 | この要素は空要素です。開始タグは必須であり、終了タグを記述してはなりません。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-wbr-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `overflow-wrap`
* `word-break`
* `hyphens`
* `<br>` 要素


<optgroup>: 選択肢グループ要素 - HTML: ハイパーテキストマークアップ言語

<optgroup>: 選択肢グループ要素
=====================

**`<optgroup>`** は HTML の要素で、 `<select>` 要素内の選択肢のグループを作成します。

試してみましょう
--------

**メモ:** optgroup 要素を入れ子にすることはできません。

属性
--

この要素にはグローバル属性があります。

`disabled`

この論理属性が指定された場合、このオプショングループ内の項目のいずれも選択不能となります。多くの場合、ブラウザーはそのコントロールをグレーアウトで表示し、マウスクリックやフォーカスなど、いかなるイベントも受け付けなくなります。

`label`

ブラウザーがユーザーインターフェイス上の選択肢にラベル付けするのに使用できるオプションのグループの名前。この要素を使用する場合には、この属性は必須です。

例
-

```html
<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup>
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>
```

### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | 0 個以上の `<option>` 要素 |
| タグの省略 | 開始タグは必須。要素の直後に他の `<optgroup>` 要素が接続する場合、または親要素が他の内容を持たない場合、終了タグが省略可能となる。 |
| 許可されている親要素 | `<select>` 要素 |
| 暗黙の ARIA ロール | `group` |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLOptGroupElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-optgroup-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 他のフォーム関連要素: `<form>`, `<legend>`, `<label>`, `<button>`, `<select>`, `<datalist>`, `<option>`, `<fieldset>`, `<textarea>`, `<input>`, `<output>`, `<progress>`, `<meter>`


<blockquote>: ブロック引用要素 - HTML: ハイパーテキストマークアップ言語

<blockquote>: ブロック引用要素
======================

**`<blockquote>`** は HTML 要素で、内包する要素のテキストが引用文であることを示します。通常、字下げして表示されます（整形方法については注意の項を参照してください）。引用元の URL は `cite` 属性により与えることができ、引用元のテキスト表現は `<cite>` 要素を用いて与えることができます。

試してみましょう
--------

属性
--

この要素にはグローバル属性があります。

`cite`

引用元の文書の URL、または引用元の情報に関するメッセージを示します。この属性は、引用文の背景や出典についての説明を指し示すためのものです。

使用上の注意
------

引用された文字列に適用される字下げを変更するには、 CSS の `margin-left` や `margin-right` プロパティ、または一括指定の `margin` プロパティを使用してください。

独立したブロックというより行内の短い引用を行うには、 `<q>` (Quotation) 要素を使用してください。

例
-

この例は RFC 1149, A Standard for the Transmission of IP Datagrams on Avian Carriers からの文言を引用するために `<blockquote>` 要素を使用する例です。

```html
<blockquote cite="https://datatracker.ietf.org/doc/html/rfc1149">
  <p>
    Avian carriers can provide high delay, low throughput, and low altitude
    service. The connection topology is limited to a single point-to-point path
    for each carrier, used with standard carriers, but many carriers can be used
    without significant interference with each other, outside early spring. This
    is because of the 3D ether space available to the carriers, in contrast to
    the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
    avoidance system, which increases availability.
  </p>
</blockquote>
```

以下のように出力されます。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ, 区分化ルート, 知覚可能コンテンツ |
| 許可されている内容 | フローコンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLQuoteElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-blockquote-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<q>`: インラインの引用のための要素
* `<cite>`: 情報源の引用のための要素


<code>: インラインコード要素 - HTML: ハイパーテキストマークアップ言語

<code>: インラインコード要素
==================

**`<code>`** は HTML の要素で、コンピューターコードの短い断片の文字列であると識別できるような外見のコンテンツを表示します。既定では、中の文字列がユーザーエージェントの既定の等幅フォントを使用して表示されます。

試してみましょう
--------

属性
--

この要素にはグローバル属性以外の属性はありません。

例
-

`<code>` を含むテキストの段落です。

```html
<p>
  The function <code>selectAll()</code> highlights all the text in the input
  field so the user can, for example, copy or delete the text.
</p>
```

### 結果

補足
--

複数行のコードを表すには、 `<code>` 要素を `<pre>` 要素の中に入れてください。 `<code>` 要素自身は、コードの単一のフレーズや 1 行のみを表します。

CSS のルールによって、`code` セレクターを定義して、ブラウザーの既定のフォントを上書きすることができます。ユーザーによる設定を CSS による指定より優先させることもできます。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 記述コンテンツ, 知覚可能コンテンツ
  |
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLElement`。Gecko 1.9.2 (Firefox 4)
 以前では、この要素には `HTMLSpanElement`
 インターフェイスが実装されています。
  |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-code-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<samp>`
* `<kbd>`
* `<var>`
* `<pre>`


<em>: 強調要素 - HTML: ハイパーテキストマークアップ言語

<em>: 強調要素
==========

**`<em>`** は HTML の要素で、強調されたテキストを示します。`<em>` 要素は入れ子にすることができ、入れ子の段階に応じてより強い程度の強調を表すことができます。

試してみましょう
--------

属性
--

この要素にはグローバル属性以外の属性はありません。

使用上のメモ
------

`<em>` 要素は、周囲の文字列と比較して強調される言葉のためのものであり、ふつうは文内の一語または数語に限定され、文自体の意味に影響します。

通常、この要素はイタリック体で表示されます。しかしながら、単にイタリック体のスタイルを適用するために用いるべきではありません。そのような場合は CSS の `font-style` によるスタイル付けを使用してください。著作物（書籍、演劇、歌など）の題名を示すためには、 `<cite>` 要素を使用してください。学名や他の言語の単語のようによくイタリック体が使われるような、トーンやムードが異なるテキストをマークするには `<i>` 要素を使用してください。これらも通常、斜体のスタイルとなりますが、異なる意味を持っています。周辺のテキストよりも高い重要性を持つテキストを示すためには、`<strong>` 要素を使用してください。

**メモ:** （訳注）日本語フォントでは斜体を持たないフォントが多く、斜体で表示されないことがあります。

### <i> と <em>

新しい開発者はよく、同様の結果を生み出すために複数の要素があることによく混乱します。 `<em>` と`<i>` はその代表例で、どちらも文字列を斜体にするものです。違いは何でしょうか。どちらを使用するべきでしょうか。

既定では、視覚的な結果は同じです。しかし、意味論的な意味合いは異なります。 `<em>` 要素はその内容を強調することを表しますが、一方で `<i>` 要素は、外来語、架空の登場人物の考え、用語の定義を表す文字列など、通常の文章から外れた文字列を表します。（書籍や映画などの作品名には、 `<cite>` を使用してください。）

つまり、どちらを使うのが正しいかは場面に依存します。どちらも純粋な装飾目的ではなく、それは CSS による整形の役割です。

`<em>` の例は "Just *do* it already!" や "We *had* to do something about it" です。文字列を読む人やソフトウェアは、斜体の単語を強調して読み上げるでしょう。

`<i>` の例は "The *Queen Mary* sailed last night" です。ここで、 "Queen Mary" という語句に強調や重要性は与えていません。これは単に、対象物が Mary という名前の女王ではなく*Queen Mary* という名前の船であることを示します。`<i>` の別の例として "The word *the* is an article" があります。

例
-

`<em>` 要素は、暗黙的あるいは明示的な対比を表すためによく使われます。

```html
<p>
  In HTML 5, what was previously called
  <em>block-level</em> content is now called <em>flow</em> content.
</p>
```

### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 記述コンテンツ, 知覚可能コンテンツ
  |
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLElement`。 Gecko 1.9.2 (Firefox 4)
 以前では、この要素には `HTMLSpanElement`
 インターフェイスが実装されています。
  |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-em-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<i>`


<canvas>: グラフィックキャンバス要素 - HTML: ハイパーテキストマークアップ言語

<canvas>: グラフィックキャンバス要素
=======================

**HTML の `<canvas>` 要素** と キャンバススクリプティング API や WebGL API を使用して、グラフィックやアニメーションを描画することができます。

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 記述コンテンツ,
 埋め込みコンテンツ, 知覚可能コンテンツ
  |
| 許可されている内容 |
 透過的コンテンツ、ただし子孫に対話型コンテンツのうち `<a>` 要素,
 `<button>` 要素, `<input>`
 要素の `type` 属性が
 `checkbox`, `radio`,
 `button` のいずれか以外を含まないもの
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLCanvasElement` |

属性
--

他のすべての HTML 要素と同様に、グローバル属性を持ちます。

`height`

CSS ピクセルで示した座標空間の高さ。既定では 150 ピクセルに設定されています。

`moz-opaque`
Non-standard

非推奨

canvas に半透明性がファクターになるかを知らせます。キャンバスは半透明性がないことがわかっていれば、描画パフォーマンスを最適化できます。これは Mozilla ベースのブラウザーしか対応していません。代わりに標準化された `canvas.getContext('2d', { alpha: false })` を使用してください。

`width`

CSS ピクセルで示した座標空間の幅。既定では 300 ピクセルに設定されています。

使用上の注意
------

### 代替コンテンツ

`<canvas>` のブロックの中で、代替コンテンツを提供すべきです。その内容物は、 canvas に対応しない古いブラウザーおよび JavaScript が無効であるブラウザーで描画されます。

### </canvas> タグが必要

`<img>` 要素とは異なり、 `<canvas>` 要素は終了タグ (`</canvas>`) が**必要です**。

### CSS と HTML におけるキャンバスの寸法指定の違い

表示されるキャンバスの寸法は、スタイルシートを用いて変更できますが、そうすると画像はスタイルで設定した寸法に合うように拡大縮小され、最終的なグラフィックが歪んで表示されることがあります。

キャンバスの寸法は、HTML または JavaScript を用いて `width` および `height` 属性を `<canvas>` 要素に直接設定するした方がいいでしょう。

### キャンバスの最大寸法

`<canvas>` 要素の最大寸法はとても広いのですが、正確な寸法はブラウザーに依存します。以下のものは様々なテストやその他の情報源（Stack Overflow など）から収集したいくらかのデータです。

| ブラウザー | 最大高 | 最大幅 | 最大面積 |
| --- | --- | --- | --- |
| Chrome | 32,767 pixels | 32,767 pixels | 268,435,456 pixels (つまり 16,384 x 16,384) |
| Firefox | 32,767 pixels | 32,767 pixels | 472,907,776 pixels (つまり 22,528 x 20,992) |
| Safari | 32,767 pixels | 32,767 pixels | 268,435,456 pixels (つまり 16,384 x 16,384) |
| IE | 8,192 pixels | 8,192 pixels | ? |

**メモ:** 寸法や面積の最大値を超えると、キャンバスが使用できなくなります。 — 描画コマンドが動作しなくなります。

例
-

### HTML

このコードスニペットは、 HTML 文書に canvas 要素を追加します。ブラウザーがキャンバスをレンダリングできない場合や、キャンバスを読み込めない場合には、代替テキストが提供されます。

```html
<canvas width="300" height="300">
  キャンバスの表示内容を説明する代替テキストです。
</canvas>
```

### JavaScript

それから JavaScript コード内で `HTMLCanvasElement.getContext()` を呼び出して描画コンテキストを取得し、キャンバス上に描画を開始します。

```js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
```

### 結果

アクセシビリティの考慮
-----------

### 代替コンテンツ

`<canvas>` 要素は単なるビットマップであり、描かれたオブジェクトに関する情報は提供しません。キャンバスのコンテンツには、セマンティック HTML のようなアクセシビリティツールには公開されていません。一般的に、アクセシビリティに配慮したウェブサイトやアプリではキャンバスを使用しないでください。アクセシビリティを改善するには、以下のガイドが役立ちます。

* Canvas accessibility use cases
* Canvas element accessibility issues
* HTML Canvas Accessibility in Firefox 13 – by Steve Faulkner
* Best practices for interactive canvas elements
仕様書
---

| Specification |
| --- |
| HTML Standard # the-canvas-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* MDN のキャンバスポータル
* キャンバスチュートリアル
* キャンバス関連のデモ
* キャンバス早見表 (2009)
* キャンバス早見表 (pdf) (2015)
* キャンバス早見表 (pdf)
* Apple によるキャンバスの紹介 (2013)


<img>: 画像埋め込み要素 - HTML: ハイパーテキストマークアップ言語

<img>: 画像埋め込み要素
===============

**`<img>`** は HTML の要素で、文書に画像を埋め込みます。

試してみましょう
--------

上記の例では、 `<img>` 要素の使い方を示しています。

* `src` 属性は**必須**で、埋め込みたい画像へのパスを入れます。
* `alt` 属性は画像のテキストによる説明で、必須ではありませんがアクセシビリティのために**非常に有用**です。 — スクリーンリーダーがこの説明を読み上げることで、画像が何を表すかをユーザーが知ることができます。また、ネットワークエラーやコンテンツのブロック、リンク切れ等の理由で画像が読み込めなかった場合にも代替テキストが表示されます。

他にも、様々な目的で指定できる属性がたくさんあります。

* セキュリティとプライバシーのためのリファラー/CORS 制御。 `crossorigin` および `referrerpolicy` を参照してください。
* `width` と `height` の両方を使用して画像の固有の寸法を設定すると、画像を読み込む前に場所を確保し、コンテンツのレイアウトが移動することを防ぐことができます。
* `sizes` および `srcset` を使用したレスポンシブ画像のヒント (`<picture>` 要素とレスポンシブ画像のチュートリアルもご覧ください)。
対応している画像形式
----------

HTML 標準では、対応する画像形式を指定していないので、ユーザーエージェントによって対応する画像形式は異なります。

**メモ:** 画像ファイルの種類と形式ガイド には、画像ファイルとウェブブラウザーの対応に関する包括的な情報があります。
 この節は概要のみです。

ウェブで最もよく使われる画像ファイル形式は、以下の通りです。

* APNG (Animated Portable Network Graphics) — 可逆性のあるアニメーションシーケンスに適しています（GIF はパフォーマンスが劣る）
* AVIF (AV1 Image File Format) — 高い性能により、画像とアニメーションの両方に適しています。
* GIF (Graphics Interchange Format) — シンプルな画像やアニメーションに適しています。
* JPEG (Joint Photographic Expert Group image) — 静止画の非可逆圧縮に適しています（現在最も普及しています）。
* PNG (Portable Network Graphics) — 静止画の可逆圧縮に適しています（JPEG より若干画質が良い）。
* SVG (Scalable Vector Graphics) — ベクター画像形式。異なるサイズでも正確に描画する必要がある画像に使用します。
* WebP (Web Picture format) — 画像とアニメーションの両方に優れた選択です。

WebP や AVIF などは、PNG、JPEG、GIF よりはるかに性能が良く、静止画と動画の両方で使えるのでおすすめします。 WebP は広く対応されていますが、 AVIF は Edge での対応が不足しています。

SVG は、異なるサイズでも正確に描画する必要がある画像に推奨される形式であることに変わりはありません。

画像読み込みエラー
---------

画像の読み込みまたは描画の間にエラーが発生した場合で、かつ `onerror` イベントハンドラーが `error` イベントを扱うよう設定されていた場合は、イベントハンドラーが呼び出されます。これは例えば次のように、様々な状況で発生します。

* `src` 属性が空 (`""`) または `null` である。
* 指定された `src` の URL が現在ユーザーがいるページの URL と同じである。
* 指定された画像が何らかの理由で読み込みが妨害され、中止された。
* 指定された画像のメタデータが、寸法を受け取ることができないなどの理由で読み込みが中止され、かつ `<img>` 要素の属性に寸法が指定されていなかった場合。
* 指定された画像が、ユーザーエージェントが対応している形式ではない場合。
属性
--

この要素にはグローバル属性があります。

`alt`

この属性は、画像を説明する代替文字列を定義します。

**メモ:** ブラウザーは常に画像を表示するわけではありません。ブラウザーが画像を表示しない状況はいくつかがあります。

* 視覚ブラウザー以外のブラウザー（視覚障碍者向けのものを含む）で閲覧された場合
* ユーザーが画像を非表示に設定している場合（帯域の節約、プライバシー上の理由）
* 画像が無効であったり未対応の画像形式であったりした場合

このような場合、ブラウザーは、画像をこの要素の `alt` 属性で定義された文字列に置き換えます。このような理由から、 `alt` には可能な限り役に立つ値を指定するべきです。

この属性に空文字列を設定すると (`alt=""`)、この画像がコンテンツにおいて重要な箇所*ではない*ことを示し、視覚ブラウザーではない場合はレンダリングを省略することがあります。視覚ブラウザーでは、 `alt` 属性が空欄で、画像の表示に失敗した場合は、壊れた画像のアイコンの表示が省略される場合もあります。

この属性は画像をテキストにコピー＆ペーストした場合や、リンクされた画像をブックマークに保存したときにも使用されます。

`crossorigin`

関連する画像の取得の際に CORS を使用しなければならないかどうかを示します。 CORS リクエストから返されたCORS が有効な画像は、 `<canvas>` 要素で「汚染」されることなく再利用することができます。

`crossorigin` 属性が指定されて*いない*場合は、 (`Origin` リクエストヘッダーがない) CORS 以外のリクエストが送信され、ブラウザーは画像が汚染されたものとしてマークし、その画像データへのアクセスを制限して、 `<canvas>` 要素での使用を防ぎます。

`crossorigin` 属性が指定されて*いる*場合は、(`Origin` リクエストヘッダーを伴う) CORS リクエストが送信されます。しかし、サーバーがオリジンのサイトによる画像データへのオリジン間アクセスを許可することをオプトインしない場合 (`Access-Control-Allow-Origin` レスポンスヘッダーが一切送信されていないか、送信された `Access-Control-Allow-Origin` レスポンスヘッダーにサイトのオリジンが含まれていない場合)、ブラウザーは画像を読み込むことをブロックし、開発ツールのコンソールに CORS エラーを記録します。

許可されている値:

`anonymous`

CORS リクエストは、資格情報を省略して (つまり、クッキー、X.509 証明書、 `Authorization` リクエストヘッダーなしで) 送信されます。

`use-credentials`

CORS リクエストは、資格情報 (つまり、Cookie、X.509 証明書、 `Authorization` リクエストヘッダー) が含まれた状態で送信されます。サーバーが元のサイトとの資格情報の共有を選択する (`Access-Control-Allow-Credentials: true` レスポンスヘッダーを送り返す) ことをしなかった場合、ブラウザーは画像を汚染されたものとしてマークし、その画像データへのアクセスを制限します。

この属性の値が無効である場合は、列挙型のキーワードに `anonymous` が指定されたものとして扱われます。詳しくはCORS 設定属性を参照してください。

`decoding`

この属性は、ブラウザーが画像のデコードを他の DOM コンテンツのレンダリングと一緒に行い、より「正しく」見えるようにするのか (`sync`)、それとも他の DOM コンテンツを先にレンダリングして表示し、画像をデコードして後で表示するのか (`async`) のヒントを提供します。実際には、`async` は次の描画が画像のデコードを待たないことを意味します。

静的な `<img>` 要素に `decoding` を使用した場合、顕著な効果を認識することは困難です。画像ファイルが（ネットワークやキャッシュから）取得される間、最初は空の画像としてレンダリングされ、その後は独立して処理されるため、コンテンツの更新の「同期」はあまり意識されません。しかし、デコード中にレンダリングがブロックされることは、非常に小さいことが多いものの、計測可能です。より詳細な分析については、画像デコード属性は実際に何をしているのか を参照してください (tunetheweb.com, 2023)。

異なる `decoding` タイプを使用すると、 JavaScript を使って動的に `<img>` 要素を DOM に挿入する際に、より顕著な違いが生じます - 詳しくは `HTMLImageElement.decoding` を参照してください。

許可されている値は次の通りです。

`sync`

他の DOM コンテンツのレンダリングと同期して画像をデコードし、すべてを一緒に表示します。

`async`

他の DOM コンテンツをレンダリングして表示した後、非同期に画像をデコードします。

`auto`

デコードモードの優先順位はありません。ブラウザーがユーザーにとって最適なものを決定します。これは既定値です。

`elementtiming`

`PerformanceElementTiming` API による監視のために画像をマークします。指定された値は、監視される画像要素の識別子になります。`elementtiming` 属性のページも参照してください。

`fetchpriority`
Experimental

画像を取得する際に使用する相対的な優先順位のヒントを提供します。許可されている値は次の通りです。

`high`

他の画像と比較して読み込みの優先度が高いことを示します。

`low`

他の画像と比較して読み込みの優先度が低いことを示します。

`auto`

既定値。他の画像との相対的な読み込みの優先順位を自動的に決定することを指示します。

`height`

画像固有の高さをピクセル値で指定します。単位のない整数でなければなりません。

**メモ:** `height` と `width` を記載することで、画像を読み込む前にブラウザーが画像の縦横比を計算することができるようになります。このアスペクト比は、画像を表示するために必要な空間を確保するために使用され、画像をダウンロードして画面に表示したときのレイアウトのずれを縮小したり、防止したりすることができます。レイアウトのずれを縮小することは、良い使い勝手とウェブパフォーマンスの主要な構成要素です。

`ismap`

論理属性で、この画像がサーバーサイドマップの一部であるかを示します。そうである場合は、クリック位置の正確な座標をサーバーに送信します。

**メモ:** この属性は `<img>` 要素が、有効な `href` 属性を持つ `<a>` 要素の子孫である場合に限り許可されます。これにより、ポインティングデバイスを持たないユーザーのフォールバック先を提供します。

`loading`

ブラウザーがどのように画像を読み込むかを示します。

* `eager`
    + : 画像が現在可視ビューポートに入っているかどうかにかかわらず、直ちに画像を読み込みます (これが既定値です)。
* `lazy`
    + : 画像がブラウザーで定義されたビューポートからの距離に達するまで、画像の読み込みを遅延させます。これは、画像が必要とされるのが合理的に確実になるまで、処理に必要なネットワークやストレージの帯域幅を使用しないようにするためです。これは一般的に、ほとんどの典型的な使用法において、コンテンツの性能を向上させることができます。
**メモ:** 読み込みが延期されるのは JavaScript が有効になっているときだけです。これはトラッキング対策であり、スクリプトが無効になっているときにユーザーエージェントが遅延読み込みに対応している場合でも、サーバーがいつ何枚の画像が要求されたかを追跡できるようにページのマークアップに画像を戦略的に配置することで、サイトがセッション全体を通してユーザーのおおよそのスクロール位置を追跡することが可能になるからです。

`referrerpolicy`

リソースを読み込む際に、どのリファラーを使用するかを示す文字列です。

* `no-referrer`: `Referer` ヘッダーを送信しないことを表します。
* `no-referrer-when-downgrade`: あるオリジンへTLS (HTTPS) を使用せずに移動した場合に、 `Referer` ヘッダーを送信しないことを表します。
* `origin`: 送られるリファラーは、参照しているページページのオリジン、すなわちスキーム、ホスト名、ポート番号のみとなります。
* `origin-when-cross-origin`: 異なるオリジンへの移動では、リファラーをスキーム、ホスト、ポートのみに制限します。同一のオリジンへの移動では、リファラーのフルパスを含めます。
* `same-origin`: リファラーは同じオリジンに対しては送信されますが、オリジン間リクエストではリファラー情報が入りません。
* `strict-origin`: プロトコルのセキュリティレベルが同等 (HTTPS→HTTPS) である場合は、リファラーとしてこの文書のオリジンが送信されますが、安全性の低い宛先 (HTTPS→HTTP) には送信されません。
* `strict-origin-when-cross-origin`（既定値）: 同一オリジンリクエストを行う際には完全な URL を送信し、セキュリティレベルが同等 (HTTPS→HTTPS) の場合はオリジンのみを送信し、安全性の低い宛先 (HTTPS→HTTP) にはヘッダーを送信しません。
* `unsafe-url`: リファラーにはオリジンとパスを含めることを表します（ただし、フラグメント、パスワード、ユーザー名は含めません）。**この値は安全ではありません**。オリジンやパスの情報が TLS で保護されたリソースから安全でないオリジンへ漏えいするからです。

`sizes`

ソースのサイズのセットを示す、カンマ区切りの文字列を1個以上並べたリストです。それぞれのソースサイズの構成は以下のとおりです。

1. メディア条件。リスト内の最後のアイテムでは省略しなければなりません。
2. ソースサイズ値。

メディアの状態は*ビューポート*のプロパティで記述するものであり、*画像*のプロパティではありません。例えば、 `(max-height: 500px) 1000px` は、*ビューポート*の高さが 500px 以下であれば 1000px 幅のソースを使用することを提案します。

ソースサイズ値は、画像の表示サイズを指定するものです。ユーザーエージェントは `srcset` 属性で与えられたソースからひとつを選択するために、現在のソースサイズを使用します。そのとき、ソースは幅記述子 ('`w`') を使用して説明します。選択したソースサイズは画像の固有の寸法（CSS スタイルが適用されていない場合の、画像の表示サイズ）に影響します。`srcset` 属性がない場合、あるいは幅記述子 (`w`) を持つ値がない場合は、`sizes` 属性の効果はありません。

`src`

画像の URL です。 `<img>` 要素に必須です。 `srcset` に対応するブラウザーでは `src` を、画素密度記述子 `1x` の候補画像であるように扱います。ただし、この画素密度記述子が `srcset` で定義済みである、または `srcset` に '`w`' 記述子が含まれている場合を除きます。

`srcset`

ユーザーエージェントが使用可能なソース画像のセットを示す、カンマ区切りで文字列を 1 個以上並べたリストです。各々の文字列の構成は以下のとおりです。

1. 画像の URL
2. 任意で、ホワイトスペースの後に以下のいずれかを記述します。
    * 幅記述子（正の整数の直後に `w` を付加したもの）。幅記述子は実際の画素密度を計算するために、`sizes` 属性で与えられたソースサイズで割られます。
    * 画素密度記述子（正の浮動小数点数の直後に `x` を付加したもの）。

記述子を指定しない場合は、ソースを既定の記述子 `1x` に割り当てます。

幅記述子と画素密度記述子を同一の `srcset` 属性に混在させると無効になります。重複した記述子（例えばひとつの `srcset` に2つのソースがあり、どちらも '`2x`' とする）も無効になります。

`srcset` 属性が幅の記述子を使用した場合、 `sizes` 属性も指定しなければなりません。そうでなければ、 `srcset` 自体が無視されます。

ユーザーエージェントには、利用可能なソースからひとつを選択する裁量があります。これは、ユーザー設定や帯域幅の条件などに基づいて選択を適合させるような、かなりの裁量が与えられています。例としてはレスポンシブ画像のチュートリアルをご覧ください。

`width`

画像固有の幅をピクセル値で指定します。単位のない整数でなければなりません。

`usemap`

要素に関連づけられたイメージマップの部分的な URL ('`#`' で始まる) です。

**メモ:** `<img>` 要素が `<a>` または `<button>` 要素の子孫である場合は、この属性を使用することはできません。

### 非推奨の属性

`align`
非推奨

周囲のコンテキストに対する画像の配置を指定します。代わりに CSS の `float` プロパティや `vertical-align` プロパティを使用してください。使用できる値は次の通りです。

`top`

`vertical-align: top;` または `vertical-align: text-top;` と等価です。

`middle`

`vertical-align: -moz-middle-with-baseline;` と等価です。

`bottom`

値の既定値はなく `vertical-align: unset;` または `vertical-align: initial;` と等価です。

`left`

`float: left;` と等価です。

`right`

`float: right;` と等価です。

`border`
非推奨

画像の周りの境界線の幅を指定します。代わりに CSS の `border` プロパティを使用してください。

`hspace`
非推奨

画像の左右に挿入する空間の幅をピクセル単位で指定します。代わりに CSS の `margin` プロパティを使用してください。

`longdesc`
非推奨

画像の詳細な説明へのリンクです。有効な値は、 URL または要素の `id` です。

**メモ:** この属性は、最新の W3C のバージョンである HTML 5.2 でも言及されていますが、 WHATWG の HTML Living Standard では完全に削除されています。将来が不確実なので、代わりに、`aria-describedby` または`aria-details` のような WAI-ARIA の代替手段を使用してください。

`name`
非推奨

要素の名前です。代わりに `id` 属性を使用してください。

`vspace`
非推奨

画像の上下に挿入する空間の幅をピクセル単位で指定します。代わりに CSS の `margin` プロパティを使用してください。

CSS でのスタイル付け
------------

`<img>` は置換要素です。 `display` の値が既定で `inline` ですが、既定の寸法は埋め込まれた画像の内部的な値で定義されます。画像には `border`/`border-radius`, `padding`/`margin`, `width`, `height`, などのプロパティを設定することができます。

`<img>` にはベースラインがありません。つまり `vertical-align``: baseline` を伴うインライン整形コンテキスト内で使用したときに、画像の下端はコンテナーのベースラインに揃えられます。

`object-position` プロパティを使用して、要素ボックス内の画像の位置を指定したり、 `object-fit` プロパティを使用して、ボックス内の画像の寸法を調整したり（例えば、クリッピングが必要な時に画像をボックスに合わせるか埋めるか）することができます。

画像の種類に応じて、固有の寸法を持つことができます。ただし、固有の寸法が必須ではない画像形式があります。例えば SVG 画像は、固有の寸法を持ちません。つまり、 SVG 画像には `<svg>` 要素に `width` または `height` が設定されていない限り、固有の寸法はありません。

例
-

### 代替テキスト

以下の簡単な例では、ページに画像を埋め込み、アクセシビリティを向上させるために代替テキストを含めています。

```html
<img src="favicon144.png" alt="MDN ロゴ" />
```

### 画像リンク

この例は前回のを土台に、画像をリンクにする方法を示しています。これを行うのはとても単純です。 `<img>` タグを `<a>` の中に組み込むだけです。一つの考慮事項として、リンクが指すリソースを説明する代替テキストを作成するようにしてください。

```html
<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="MDN サイトにおいでください" />
</a>
```

### srcset 属性の使用

この例では、 `srcset` 属性によって高解像度版のロゴの参照を指定しています。これで、高解像度の端末では `src` 画像の代わりにこちらが読み込まれます。 `src` で参照される画像は、 `srcset` に対応しているユーザーエージェントでは、 `1x` の候補としてカウントされます。

```html
<img src="favicon72.png" alt="MDN ロゴ" srcset="favicon144.png 2x" />
```

### srcset および sizes 属性の使用

`src` 属性は、 `srcset` に対応しているユーザーエージェントで '`w`' 記述子を使用している場合は無視されます。 `(max-width: 600px)` のメディア条件に一致すると、 200px の幅の画像 (200px にもっと近いもの) が読み込まれ、そうでなければ他の画像が読み込まれます。

```html
<img
 src="clock-demo-200px.png"
 alt="時計"
 srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
 sizes="(max-width: 600px) 200px, 50vw" />
```

**メモ:** その場で大きさを変更してみるには、この例を別なページで表示させる必要があり、そうすればコンテンツ領域の大きさを実際に使用することができます。

セキュリティとプライバシーの考慮事項
------------------

`<img>` 要素の多くは無害な使用ですが、ユーザーのセキュリティとプライバシーに望ましくない結果をもたらす可能性もあります。詳細情報と緩和策については Referer ヘッダー: プライバシーとセキュリティの考慮事項を参照してください。

アクセシビリティの考慮
-----------

### 意味のある代替説明を書く

`alt` 属性の値は明確で簡潔に画像の内容を説明するものにしてください。画像そのもの存在を説明するものであったり、画像のファイル名であったりするべきではありません。画像が言葉で説明できるものではなく、 `alt` 属性を意図的に省略する場合は、画像が伝えようとしていることの内容を他の方法で表すように考慮してください。

#### 悪い例

```html
<img alt="image" src="penguin.jpg" />
```

#### 良い例

```html
<img alt="海岸に立っているイワトビペンギン" src="penguin.jpg" />
```

`alt` 属性が画像にない場合、読み上げソフトによっては代わりに画像のファイル名を読み上げることがあります。ファイル名が画像の内容を表していない場合、これが操作を混乱させる可能性があります。

* An alt Decision Tree • Images • WAI Web Accessibility Tutorials
* Alt-texts: The Ultimate Guide — Axess Lab
* How to Design Great Alt Text: An Introduction | Deque
* MDN "WCAG を理解する ― ガイドライン 1.1 の解説"
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
### SVG を画像として識別

VoiceOver のバグにより、VoiceOver は SVG 画像を画像として正しくアナウンスしません。SVG のソースファイルを持つすべての `<img>` 要素に `role="img"` (en-US) を記載し、支援技術が SVG を画像コンテンツとして正しくアナウンスするようにしてください。

```html
<img src="mdn.svg" alt="MDN logo" role="img" />
```

### title 属性

`title` 属性を `alt` 属性の代わりに利用することはできません。加えて、 `alt` 属性の値を同じ画像の `title` 属性に複製して宣言することは避けてください。このようにすると、読み上げソフトが説明を二回読み上げ、操作を混乱させる可能性があります。

`title` 属性は、画像の `alt` の説明と組み合わせた補助的な説明として使用するべきでもありません。画像にキャプションが必要であれば、 `figure` および `figcaption` 要素と組み合わせて使用してください。

`title` 属性の値は、よくツールチップとして、画像の上でカーソルを停止させた後で間もなく表示されます。これはユーザーに追加の情報を提供する*ことができます*が、ユーザーが必ず見ると仮定してはいけません。ユーザーが見ることが特に重要または有益である情報があるのであれば、上記の `title` を使用するのではなく、何らかの方法で行内に表示するべきです。

* Using the HTML title attribute – updated | The Paciello Group
技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、
 記述コンテンツ、
 埋め込みコンテンツ、
 知覚可能コンテンツ。要素が `usemap` 属性を持つ場合は、対話型コンテンツのカテゴリーの一角にもなります。
  |
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 | 開始タグは必須。終了タグを記述してはなりません。 |
| 許可されている親要素 | 埋め込みコンテンツを受け入れるすべての要素。 |
| 暗黙の ARIA ロール | * 空ではない `alt` がある場合や `alt` 属性がない場合:
 ``img` (en-US)`
* 空の `alt` 属性がある場合:
 `presentation`
 |
| 許可されている ARIA ロール | * 空ではない `alt` がある場合:
    + `button`
    + `checkbox`
    + `link`
    + `menuitem` (en-US)
    + `menuitemcheckbox` (en-US)
    + `menuitemradio` (en-US)
    + `option`
    + `progressbar`
    + `scrollbar` (en-US)
    + `separator` (en-US)
    + `slider`
    + `switch`
    + `tab`
    + `treeitem` (en-US)
* 空の `alt` 属性がある場合、 `none` (en-US)
 または `presentation`
* `alt` 属性がない場合、許可されている `role` なし
 |
| DOM インターフェイス | `HTMLImageElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-img-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<picture>`, `<object>`, `<embed>` 要素
* その他の画像に関する CSS プロパティ: `object-fit`, `object-position`, `image-orientation`, `image-rendering`, `image-resolution`
* HTML の画像
* 画像のファイル形式のガイド
* レスポンシブ画像


<body>: 文書本体要素 - HTML: ハイパーテキストマークアップ言語

<body>: 文書本体要素
==============

**`<body>`** は HTML の要素で、 HTML 文書のコンテンツを示す要素です。 `<body>` 要素は文書中に一つだけ配置できます。

|  |  |
| --- | --- |
| コンテンツカテゴリー | 区分化ルート |
| 許可されている内容 | フローコンテンツ |
| タグの省略 | 開始タグは、内容の先頭が空白文字、コメント、 `<script>` 要素、 `<style>` 要素でない場合は省略可能です。終了タグは、 `<body>` 要素に内容または開始タグがあり、かつ、直後のノードがコメントでない場合は省略可能です。 |
| 許可されている親要素 | `<html>` 要素の子要素でなければなりません。 |
| 暗黙の ARIA ロール | `generic (en-US)` |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLBodyElement`* `<body>` 要素は `HTMLBodyElement` インターフェイスを提供します。
* `<body>` 要素は `document.body` プロパティからアクセス可能です。
 |

属性
--

この要素にはグローバル属性があります。

`alink`
非推奨

ハイパーリンクの選択時の文字色です。**この属性を使用しないでください。代わりに CSS の `color` プロパティを `:active` 擬似クラスで使用してください。**

`background`
非推奨

背景画像の URI です。**この属性を使用しないでください。代わりに CSS の `background` プロパティを使用してください。**

`bgcolor`
非推奨

文書の背景色です。**この属性を使用しないでください。代わりに CSS の `background-color` プロパティを使用してください。**

`bottommargin`
非推奨

body の下マージンです。**この属性を使用しないでください。代わりに CSS の `margin-bottom` プロパティを使用してください。**

`leftmargin`
非推奨

body の左マージンです。**この属性を使用しないでください。代わりに CSS の `margin-left` プロパティを使用してください。**

`link`
非推奨

未訪問のハイパーリンクの文字色です。**この属性を使用しないでください。代わりに CSS の `color` プロパティを `:link` 擬似クラスで使用してください。**

`onafterprint`

ユーザーによる印刷データ作成直後に呼び出す関数

`onbeforeprint`

ユーザーによるブラウザーへの印刷指示直後に呼び出す関数

`onbeforeunload`

文書のアンロードの直前に呼び出す関数

`onblur`

文書からフォーカスが外されたときに呼び出す関数

`onerror`

文書を正常にロードできなかった際に呼び出す関数

`onfocus`

文書にフォーカスが当たった際に呼び出す関数

`onhashchange`

文書の現在のアドレスのフラグメント識別子 (ハッシュ文字 `'#'` から始まる部分) が変更された際に呼び出す関数

`onlanguagechange`

言語が変更された際に呼び出す関数

`onload`

文書の読み込み完了時に呼び出す関数

`onmessage`

文書が API からメッセージを受信した際に呼び出す関数

`onoffline`

ネットワークとの交信が不能になった際に呼び出す関数

`ononline`

ネットワークとの交信が発生あるいは回復した際に呼び出す関数

`onpopstate`

ユーザーによるセッション履歴のナビゲート時に呼び出す関数

`onredo`

ユーザーがトランザクション履歴を元に戻した際に呼び出す関数

`onresize`

文書を表示するウィンドウがリサイズされた際に呼び出す関数

`onstorage`

ストレージ領域が変化した際に呼び出す関数

`onundo`

ユーザーがトランザクション履歴をさかのぼることによって後方へ移動した際に呼び出す関数

`onunload`

文書からの離脱時に呼び出す関数

`rightmargin`
非推奨

body の右マージンです。**この属性を使用しないでください。代わりに CSS の `margin-right` プロパティを使用してください。**

`text`
非推奨

基本文字色です。**この属性を使用しないでください。代わりに CSS の `color` プロパティを使用してください。**

`topmargin`
非推奨

body の上マージンです。**この属性を使用しないでください。代わりに CSS の `margin-top` プロパティを使用してください。**

`vlink`
非推奨

訪問済みのハイパーリンクの文字色です。**この属性を使用しないでください。代わりに CSS の `:visited` 擬似クラスで `color` プロパティを使用してください。**

例
-

```html
<html lang="en">
  <head>
    <title>Document title</title>
  </head>
  <body>
    <p>
      The <code><body></code> HTML element represents the content of an
      HTML document. There can be only one <code><body></code> element in
      a document.
    </p>
  </body>
</html>
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # the-body-element |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<html>`
* `<head>`