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

<video>: 動画埋め込み要素
=================

**`<video>`** は HTML の要素で、文書中に動画再生に対応するメディアプレイヤーを埋め込みます。 `<video>` を音声コンテンツのために使用することもできますが、 `<audio>` 要素の方がユーザーにとって使い勝手が良いかもしれません。

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

上記の例は `<video>` 要素のシンプルな使い方を示しています。 `<img>` 要素の方法と同様に、 `src` 属性の中に表示したいメディアへのパスを含めます。他の属性を含めて、動画の幅や高さ、自動再生やループをするかどうか、ブラウザーの標準の動画コントロールを表示するかなどの情報を指定することができます。

開始・終了タグである `<video></video>` タグの間の内容は、この要素に対応していないブラウザーで代替として表示されます。

属性
--

他のすべての HTML 要素と同様に、この要素はグローバル属性に対応しています。

`autoplay`

論理属性です。この属性が指定された場合、データの読み込みが完了し、再生可能な状態になった時点で即座にコンテンツの再生が始まります。

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

動画の自動再生を無効にするために `autoplay="false"` を指定しても機能しません。 `<video>` タグにこの属性があれば、動画が自動的に再生されます。自動再生を無効にするには、属性を完全に取り除くことが必要です。

一部のブラウザー (Chrome 70.0 など) では、 `muted` 属性がないと autoplay は動作しません。

`controls`

この属性が指定された場合、再生、音量、シーク、ポーズの各機能を制御するコントロールを表示します。

`controlslist`
Experimental

Non-standard

`controlslist` 属性が指定されていると、ブラウザー自身のコントロールのセットを表示する場合（例えば `controls` 属性が設定されている場合）、`video` 要素に表示するコントロールを選択するのを補助します。

指定できる値は `nodownload`, `nofullscreen`, `noremoteplayback` です。

`disablepictureinpicture` 属性を使用すると、ピクチャインピクチャモード（およびコントロール）を無効にすることができます。

`crossorigin`

列挙型の属性で、関連画像を取得する際に CORS を使用するかどうかを示します。 CORS が有効なリソースは、*汚染*されることなく `<canvas>` 要素で再利用することができます。許可される値は次の通りです。

`anonymous`

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

`use-credentials`

資格情報を使用してオリジン間リクエストを実行します。すなわち、 `Origin:` HTTP ヘッダーを送信する際に Cookie や資格情報を送信したり、 HTTP ベーシック認証を行ったりします。サーバーが元のサイトに（`Access-Control-Allow-Credentials:` HTTP ヘッダーを通して）資格情報を与えない場合、リソースが*汚染*され、その使用が制限されます。

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

`disablepictureinpicture`
Experimental

ブラウザーにピクチャインピクチャのコンテキストメニューを表示させないようにしたり、場合によっては自動的にピクチャインピクチャを要求しないようにします。

`disableremoteplayback`
Experimental

論理属性で、有線（HDMI, DVI など）や無線（Miracast, Chromecast, DLNA, AirPlay など）を使用して接続された端末のリモート再生機能を無効にするために使用されます。

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

`height`

動画の表示領域の高さを、 CSS ピクセル値で指定します（絶対的な値に限ります。パーセント値は不可）。

`loop`

論理型の属性です。指定された場合、ブラウザーは動画の末尾に達すると、自動的に先頭に戻ります。

`muted`

論理型の属性で、動画に含まれる音声の既定の設定を示します。この属性を設定すると、初期状態が消音になります。既定値は `false` であり、動画再生時に音声も再生することを表します。

`playsinline`

論理属性で、動画を「インライン」で再生する、すなわち要素の再生領域内で再生するかを指定します。この属性がないことが、動画を常に全画面で再生するという意味*ではない*ことに注意してください。

`poster`

動画のダウンロード中に表示される画像の URL です。この属性が指定されない場合、最初のフレームが利用可能になるまで何も表示されず、その後、最初のフレームをポスターフレームとして表示します。

`preload`

列挙型の属性で、動画が再生される前に、どのコンテンツを読み込むとユーザーに最高の使い勝手をもたらすかについての作者の考えを、ブラウザーに対するヒントとしてを提供するためのものです。以下の値のうちひとつを持つことができます。

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

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

**メモ:**

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

`src`

埋め込む動画への URL を指定します。この属性は省略可能です。埋め込む動画の指定には、video 要素のブロック内で `<source>` を使用することもできます。

`width`

動画の表示領域の幅を、 CSS ピクセル値で指定します。 (絶対的な値に限ります。パーセント値は不可)。

イベント
----

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

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

ブラウザーは同じ動画形式にすべて対応しているとは限りません。内部の `<source>` 要素で複数のソースを提供することができ、ブラウザーは理解できる最初のものを使用します。

```html
<video controls>
  <source src="myVideo.webm" type="video/webm" />
  <source src="myVideo.mp4" type="video/mp4" />
  <p>
    このブラウザーは HTML の動画に対応していません。代わりに<a
 href="myVideo.mp4"
 >動画へのリンク</a
 >があります。
  </p>
</video>
```

メディアファイル形式や、動画で対応しているコーデックなど、実質的かつ徹底したガイドを提供しています。また、一緒に利用することができる音声コーデック (en-US)のガイドもあります。

その他の利用上の注意:

* `controls` 属性を指定しないと、 video はブラウザーの標準のコントロールを含めません。 JavaScript と `HTMLMediaElement` を使用して、独自のコントロールを作成することもできます。詳しくはクロスブラウザーの動画プレイヤーの作成 (en-US)を参照してください。
* 動画（および音声）コンテンツを詳細に制御できるよう、 `HTMLMediaElement` はたくさんの種類のイベントを発行します。これらのイベントは、制御を可能にするだけでなく、メディアのダウンロードと再生の両方の進行状況や再生状態、再生位置を監視することができます。
* `object-position` プロパティを用いて、要素の枠内での動画の位置を調整することができ、 `object-fit` プロパティを用いて動画の寸法がどのように枠内に合わせられるかを制御することができます。
* 動画と同時に字幕を表示するには、 JavaScript と共に `<track>` 要素と WebVTT を使用します。詳しくは、 HTML 動画への字幕の追加をご覧ください。
* `<video>` 要素を使って音声ファイルを再生することができます。例えば WebVTT の代替表記を伴う音声を再生したい場合などに、 `<audio>` 要素は WebVTT を使った字幕を許可していないため便利です。
* 要素に対応しているブラウザーで代替コンテンツをテストするには、 `<video>` を `<notavideo>` のような実在しないタグに置き換えてください。

HTML の `<video>` の使用について一般的な良い情報源として、動画および音声コンテンツの初心者向けチュートリアルがあります。

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

`<video>` 要素は置換要素です。 — `display` の値は既定で `inline` ですが、ビューポートの既定の幅と高さは埋め込まれる動画で定義されます。

`<video>` のスタイル付けについて、特別な考慮事項はありません。よくある戦略として、位置や寸法を設定しやすくし、必要に応じてスタイルやレイアウト情報を提供するために `display` の値を `block` に設定することです。動画プレイヤーのスタイル付けの基本 (en-US)は、便利なスタイル付けテクニックをいくつか紹介しています。

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

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

`HTMLMediaElement.audioTracks`

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

`HTMLMediaElement.videoTracks`

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

`HTMLMediaElement.textTracks`

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

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

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

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

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

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

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

### 動画へのサーバーの対応

サーバーで動画の MIME タイプが適切に設定されていないと、動画が表示されないか X 印がついた灰色のボックスが表示される（JavaScript が有効である場合）可能性があります。

Ogg Theora 形式で動画を提供する場合、 Apache Web Server では "video/ogg" MIME タイプに動画ファイルの拡張子を追加すると問題が解決します。もっとも一般的な動画ファイルの拡張子は ".ogm", ".ogv", ".ogg" です。"/etc/apache" の "mime.types" ファイルを編集するか、 `httpd.conf` で `"AddType"` の設定ディレクティブを使用してください。
```

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
```

WebM 形式で動画を提供する場合、Apache Web Server では "/etc/apache" の "mime.types" ファイルまたは `httpd.conf` の "AddType" ディレクティブで動画ファイルの拡張子（一般的には ".webm"）を MIME type "video/webm" に追加することで問題が解決します。
```

AddType video/webm .webm
```

ウェブホスティングサービスでは、全体の更新が行われるまでの間、新技術向けに MIME タイプの設定を変更するための簡単なインターフェイスを提供しているかもしれません。

例
-

### 単一のソース

この例では、アクティブ化されたときに動画を再生し、再生を制御するためにブラウザーの既定の動画コントロールをユーザーに提供します。

#### HTML

```html
<!-- Simple video example -->
<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
<!-- Poster from peach.blender.org -->
<video
 controls
 src="https://archive.org/download/BigBuckBunny\_124/Content/big\_buck\_bunny\_720p\_surround.mp4"
 poster="https://peach.blender.org/wp-content/uploads/title\_anouncement.jpg?x11217"
 width="620">
  恐れ入りますが、このブラウザーは埋め込み動画に対応していません。しかし、<a
 href="https://archive.org/details/BigBuckBunny\_124"
 >ダウンロード</a
 >してお好きな動画プレイヤーで見ることはできます。
</video>
```

#### 結果

動画の再生が始まるまで、 `poster` 属性で指定された画像がその場所に表示されます。ブラウザーが動画の再生に対応していない場合は、代替テキストが表示されます。

### 複数のソース

この例は、メディアの 3 つの異なるソースを提供する最後のものをベースにしています。これにより、ブラウザーで対応している動画コーデックに関係なく、動画を見ることができます。

#### HTML

```html
<!-- Using multiple sources as fallbacks for a video tag -->
<!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->
<!-- Poster hosted by Wikimedia -->
<video
 width="620"
 controls
 poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants\_Dream\_s5\_both.jpg">
  <source
 src="https://archive.org/download/ElephantsDream/ed\_hd.ogv"
 type="video/ogg" />
  <source
 src="https://archive.org/download/ElephantsDream/ed\_hd.avi"
 type="video/avi" />
  <source
 src="https://archive.org/download/ElephantsDream/ed\_1024\_512kb.mp4"
 type="video/mp4" />

  恐れ入りますが、このブラウザーは埋め込み動画に対応していません。しかし、<a
 href="https://archive.org/download/ElephantsDream/ed\_1024\_512kb.mp4"
 >MP4 をダウンロード</a
 >してお好きな動画プレイヤーで見ることはできます。
</video>
```

#### 結果

はじめに Ogg を試します。再生できない場合は、 MP4 を試します。video 要素に対応していない場合は代替メッセージを表示しますが、すべてのソースに失敗した場合は表示しません。

メディアファイル形式によっては、ファイル形式文字列の一部として `codecs` (en-US) 引数を使用して、より具体的な情報を提供することができます。比較的簡単な例は `video/webm; codecs="vp8, vorbis"` であり、 WebM 映像であり、動画に VP8、音声に Vorbis (en-US) を使用していることを示しています。

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

動画には、実際にコンテンツを説明する字幕と文字化情報 (transcript) を提供するべきです（実装方法について詳しくは HTML 動画への字幕の追加 を参照してください）。字幕によって、聴力を失った人が動画の再生時に音声の内容を理解する事ができるようになるのに対し、文字化情報を使用すると、音声コンテンツを理解するのに時間が掛かる人が、自分に合ったペースと書式で内容を確認できるようになります。

注目すべき点は、音声のみのメディアにキャプションを付けることはできますが、キャプションを表示するために要素の video 領域が使用されるため、 `<video>` 要素で音声を再生しないとキャプションを付けることができないということです。これは、 video 要素で音声を再生するのに便利な特別なシナリオの 1 つです。

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

字幕や文字化情報では、話されるセリフに加えて、重要な情報を伝える音楽や音響効果も識別できるようにしてください。これには感情や口調も含みます。
```

14
00:03:14 --> 00:03:18
[ドラマチックなロック音楽]

15
00:03:19 --> 00:03:21
[ささやき] 遠くにあるものは何ですか？

16
00:03:22 --> 00:03:24
それは……それは……

16 00:03:25 --> 00:03:32
[ぶつかる大きな音]
[皿の割れる音]
```

字幕は動画の主題を邪魔しないようにしてください。これは `align` VTT キュー設定を使用して位置を決めることができます。

* 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 インターフェイス | `HTMLVideoElement` |

仕様書
---

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

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

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

関連情報
----

* ウェブ上のメディア種別と形式のガイド
    + メディアコンテナー形式（ファイル形式）
    + ウェブの動画コーデックガイド
    + ウェブの音声コーデックガイド (en-US)
* フレーム内における画像の位置と寸法の設定: `object-position` および `object-fit`
* `<audio>`
* HTML での動画や音声の使用
* canvas を用いた動画の操作 (en-US)
* Ogg メディアのサーバーの構成


<area>: イメージマップ領域要素 - HTML: ハイパーテキストマークアップ言語

<area>: イメージマップ領域要素
===================

**`<area>`** は HTML の要素で、イメージマップの中でクリック可能な領域をあらかじめ定義します。*イメージマップ*では、画像上の幾何学的な領域をハイパーテキストリンクと関連付けすることができます。

この要素は `<map>` 要素内だけで使用します。

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

属性
--

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

`alt`

 画像を表示しないブラウザーが代わりに表示するテキスト文字列です。
 テキストの内容は、代替テキストを表示しない場合に画像が提供する選択肢と同じものをユーザーに与えるような表現にすべきです。
 この属性は `href` 属性が使用されている場合のみ必要です。

`coords`

`coords` 属性は、 `shape` 属性の座標を寸法、形状、`<area>` の配置について詳述します。
 この属性は `shape` が `default` に設定されていた場合は使用してはいけません。

* `rect`: 値は `x1,y1,x2,y2` です。
 値は長方形の左上と右下の座標を指定します。
 例: `<area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla">` では座標は `0,0` と `253,27` であり、それぞれ長方形の左上と右下の角を示します。
* `circle`: 値は `x,y,radius` です。値は円の中央の座標と半径を指定します。
 例: `<area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN">`
* `poly`: 値は `x1,y1,x2,y2,..,xn,yn` です。値は多角形の角の座標を指定します。
 先頭と末尾の座標が同じではない場合、ブラウザーは最後に座標を追加して多角形を閉じます。

値は CSS ピクセルの数です。

`download`

 この属性がある場合は、作者はハイパーリンクをリソースのダウンロードに使用すると考えていることを示します。
 `download` 属性の詳しい説明は `<a>` をご覧ください。

`href`

 この領域のハイパーリンクの宛先です。
 この値は有効な URL です。
 この属性は省略可能です。その場合、その `<area>` 要素はハイパーリンクを提供しません。

`hreflang`

 リンク先のリソースの言語を示します。許容される値は RFC 5646: Tags for Identifying Languages (also known as BCP 47) で定められています。
 この属性は、 `href` 属性を指定する場合にのみ使用してください。

`ping`

 ハイパーリンクに進んだとき、ブラウザーから `POST` リクエストが本文を `PING` として（バックグラウンドで）送信する URL を空白で区切ったリストで記述します。
 ふつうはトラッキング用に使用します。

`referrerpolicy`
Experimental

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

* `no-referrer`: `Referer` ヘッダーを送信しません。
* `no-referrer-when-downgrade`: `Referer` ヘッダーをオリジンに TLS (HTTPS) がない場合は送信しません。
* `origin`: 送信されるリファラーは、参照元ページのオリジンのみに限定されます。すなわちスキーム、ホスト名、ポート番号です。
* `origin-when-cross-origin`: 他のオリジンに送信されるリファラーは、スキーム、ホスト名、ポート番号に限定されます。同一オリジン内での移動の場合はパスが含まれます。
* `same-origin`: リファラーは同一オリジンには送られますが、オリジン間リクエストではリファラー情報が含まれません。
* `strict-origin`: プロトコルのセキュリティ水準が同じである場合 (HTTPS→HTTPS) は、文書のオリジンのみが送信されますが、安全性が下がる移動先 (HTTPS→HTTP) には送信しません。
* `strict-origin-when-cross-origin` (default): 同一オリジンへのリクエストを行う際には URL 全体が送信され、プロトコルのセキュリティ水準が同じである場合 (HTTPS→HTTPS) はオリジンのみが送信されますが、安全性が下がる移動先 (HTTPS→HTTP) には送信されません。
* `unsafe-url`: リファラーにはオリジン*および*パスが含まれます（ただしフラグメント、パスワード、ユーザー名は含まれません）。
 **この値は安全ではありません**。オリジンとパスを TLS で保護されたリソースから安全ではないオリジンに漏洩させるからです。

`rel`

`href` 属性を含むアンカーで、この属性は、対象オブジェクトとリンクオブジェクトの関係を指定します。
 属性値は、空白で区切られたリンク種別のリストです。
 値とその意味は、文書作成者にとって意味を持つかもしれない何らかの権威によって登録されています。
 他に何も与えられていない場合の既定の関係は void です。この属性は `href` 属性が存在する場合にのみ使用してください。

`shape`

関連づけたホットスポットの形状です。HTML の仕様書では、長方形の領域を定義する値 `rect`、円形の領域を定義する値 `circle`、多角形を定義する値 `poly`、定義済みの領域以外のすべての領域を示す値 `default` を定めています。

`target`

 キーワードまたは作成者が定義した名前で、リンクされたリソースを表示する閲覧コンテキストです。
 以下のキーワードは特別な意味を持っています。

* `_self` （既定値）: 現在の閲覧コンテキストのリソースを表します。
* `_blank`: 新しい名前の付けられていない閲覧コンテキストのリソースを表します。
* `_parent`: 現在のページがフレーム内にある場合は、現在の親の閲覧コンテキストのリソースを表します。親要素がない場合、 `_self` と同じ動作をします。
* `_top`: 最上位の閲覧コンテキストのリソースを表します (現在の閲覧コンテキストの祖先にあたり、それ以上親のない要素です)。親要素がない場合、 `_self` と同じ動作をします。

この属性は `href` 属性が存在する場合にのみ使用してください。

**メモ:** `target="_blank"` を `<area>` 要素に設定すると、暗黙に `rel` に `rel="noopener"` を設定し、`window.opener` が設定されていないのと同じように動作します。対応状況はブラウザーの互換性を参照してください。

### 非推奨の属性

`name`
非推奨

古いブラウザーでスクリプトから使用できるようにするため、クリック可能な領域に名前を定義します。

`nohref`
非推奨

関連づけた領域にハイパーリンクがないことを示します。

**メモ:** `nohref` 属性は必要ありません。`href` 属性を省略すれば十分だからです。

`type`
非推奨

参照されているリソースの種類のヒントです。ブラウザーからは無視されます。

例
-

```html
<map name="primary">
  <area
 shape="circle"
 coords="75,75,75"
 href="left.html"
 alt="Click to go Left" />
  <area
 shape="circle"
 coords="275,75,75"
 href="right.html"
 alt="Click to go Right" />
</map>
<img
 usemap="#primary"
 src="https://via.placeholder.com/350x150"
 alt="350 x 150 pic" />
```

### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、記述コンテンツ |
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 | 開始タグは必須。終了タグを記述してはなりません。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素。 `<area>` 要素は祖先が `<map>` でなければなりませんが、直接の親要素である必要はありません。 |
| 暗黙の ARIA ロール | `href` 属性がある場合は
 `link`、そうでなければ対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし。 |
| DOM インターフェイス | `HTMLAreaElement` |

仕様書
---

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

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

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


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

<frame>
=======

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

**`<frame>`** は HTML の要素で、別の HTML 文書を表示できる特定の領域を定義します。 frame 要素は `<frameset>` の内部で使用してください。

`<frame>` 要素の使用は、パフォーマンスの問題やスクリーンリーダーを使用するユーザーへのアクセシビリティの欠如といった欠点があるため推奨されません。`<frame>` 要素に代わり、 `<iframe>` を推奨します。

属性
--

他のすべての HTML 要素と同様に、この要素にはグローバル属性があります。

`src`
非推奨

この属性は、フレームに表示する文書を指定します。

`name`
非推奨

この属性は、フレームに名前をつけます。名前がなければ、すべてのリンクは自身が存在するフレーム – 直近の親フレームで開きます。詳しくは `target` 属性を参照してください。

`noresize`
非推奨

この属性は、ユーザによるフレームのリサイズを抑止します。

`scrolling`
非推奨

この属性は、スクロールバーの存在の有無を定義します。この属性を指定しない場合、ブラウザは必要なときにスクロールバーを表示します。設定できる値は 2 つです。 "yes" は不要なときでもスクロールバーを表示します。"no" は必要なとき*でも*スクロールバーを表示しません。

`marginheight`
非推奨

この属性は、フレーム間のマージンの高さを定義します。

`marginwidth`
非推奨

この属性は、フレーム間のマージンの幅を定義します。

`frameborder`
非推奨

この属性で、フレームにボーダーを設定できます。

例
-

### フレームセット文書

フレームセット文書では、`<body>` 要素の代わりに `<frameset>` 要素があります。`<frame>` 要素は `<frameset>` の中に配置されます。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <!-- Document metadata goes here -->
  </head>
  <frameset cols="400, 500">
    <frame src="https://developer.mozilla.org/en/HTML/Element/iframe" />
    <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
  </frameset>
</html>
```

文書の `<body>` 内に別の HTML ページを埋め込みたい場合は、`<iframe>` 要素を使用してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # frame |

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

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

関連情報
----

* `<frameset>`
* `<iframe>`


<article>: 記事コンテンツ要素 - HTML: ハイパーテキストマークアップ言語

<article>: 記事コンテンツ要素
====================

**`<article>`** は HTML の要素で、文書、ページ、アプリケーション、サイトなどの中で自己完結しており、（集合したものの中で）個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事、商品カード、ユーザーが投稿したコメント、対話型のウィジェットやガジェット、その他の独立したコンテンツの項目が含まれます。

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

ある文書に複数の記事を含めることができます。たとえば、読者がスクロールするたびに各記事のテキストを次々と表示するブログでは、各記事は `<article>` 要素に含まれ、おそらくその中に 1 つ以上の `<section>` があります。

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

属性
--

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

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

* それぞれの `<article>` は、子要素として見出し（`<h1>` - `<h6>` 要素）を含むなどの方法で識別できるようにするべきです。
* `<article>` 要素を入れ子にした場合、内側の要素は外側の要素に関する記事を表します。例えばブログ投稿へのコメントは、ブログ投稿を表す `<article>` 内へ入れ子にした `<article>` 要素にできます。
* `<article>` 要素の著者情報は `<address>` 要素で提供できますが、入れ子にされた `<article>` 要素には適用されません。
* `<article>` 要素の発行日時は、 `<time>` 要素の `datetime` 属性で示すことができます。
例
-

### HTML

```html
<article class="film\_review">
  <h2>Jurassic Park</h2>
  <section class="main\_review">
    <h3>Review</h3>
    <p>Dinos were great!</p>
  </section>
  <section class="user\_reviews">
    <h3>User reviews</h3>
    <article class="user\_review">
      <h4>Too scary!</h4>
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user\_review">
      <h4>Love the dinos!</h4>
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>
```

### 結果

仕様書
---

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

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

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

関連情報
----

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


<p>: 段落要素 - HTML: ハイパーテキストマークアップ言語

<p>: 段落要素
=========

**`<p>`** は HTML の要素で、テキストの段落を表します。段落は視覚メディアにおいては、ふつう隣接するブロックと上下の空白や最初の行の字下げによって隔てられたテキストのブロックとして表現されますが、HTML の段落は画像やフォーム欄などの関連するコンテンツを構造的にまとめることができます。

段落はブロックレベル要素であり、特徴的なのは `</p>` で閉じる前に他のブロックレベル要素が見つかった場合は自動的に閉じることです。下記の「タグの省略」をご覧ください。

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

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、知覚可能コンテンツ |
| 許可されている内容 | 記述コンテンツ |
| タグの省略 |
 開始タグは必須。この `<p>` 要素の直後に続く要素が `<address>`,
 `<article>`, `<aside>`,
 `<blockquote>`, `<div>`,
 `<dl>`, `<fieldset>`,
 `<footer>`, `<form>`,
 h1, h2,
 h3, h4,
 h5, h6,
 `<header>`, `<hr>`,
 `<menu>`, `<nav>`,
 `<ol>`, `<pre>`,
 `<section>`, `<table>`,
 `<ul>` または別の `<p>`
 要素のいずれかである、または親要素内で他のコンテンツがなく親要素が `<a>` 要素ではない場合は終了タグを省略することが可能。
  |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | paragraph (en-US) |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLParagraphElement` |

属性
--

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

**メモ:** `<p>` の `align` 属性は廃止済みであり、使用するべきではありません。

例
-

### HTML

```html
<p>
  これはテキストの最初の段落です。これはテキストの最初の段落です。これはテキストの最初の段落です。これはテキストの最初の段落です。
</p>
<p>
  これはテキストの二番目の段落です。これはテキストの二番目の段落です。これはテキストの二番目の段落です。これはテキストの二番目の段落です。
</p>
```

### 結果

段落のスタイル付け
---------

既定で、ブラウザーは段落を単一の空行で分割します。例えば先頭行を字下げするなど、他の分割方法は CSS で実現することができます。

### HTML

```html
<p>
  Separating paragraphs with blank lines is easiest for readers to scan, but
  they can also be separated by indenting their first lines. This is often used
  to take up less space, such as to save paper in print.
</p>

<p>
  Writing that is intended to be edited, such as school papers and rough drafts,
  uses both blank lines and indentation for separation. In finished works,
  combining both is considered redundant and amateurish.
</p>

<p>
  In very old writing, paragraphs were separated with a special character: ¶,
  the <i>pilcrow</i>. Nowadays, this is considered claustrophobic and hard to
  read.
</p>

<p>
  How hard to read? See for yourself:
  <button data-toggle-text="Oh no! Switch back!">
    Use pilcrow for paragraphs
  </button>
</p>
```

### CSS

```css
p {
  margin: 0;
  text-indent: 3ch;
}

p.pilcrow {
  text-indent: 0;
  display: inline;
}
p.pilcrow + p.pilcrow::before {
  content: " ¶ ";
}
```

### JavaScript

```js
document.querySelector("button").addEventListener("click", (event) => {
  document.querySelectorAll("p").forEach((paragraph) => {
    paragraph.classList.toggle("pilcrow");
  });

  [event.target.innerText, event.target.dataset.toggleText] = [
    event.target.dataset.toggleText,
    event.target.innerText,
  ];
});
```

### 結果

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

コンテンツを段落に分割すると、ページのアクセシビリティを向上するのに役立ちます。読み上げソフトやその他の支援技術が、このようなユーザーに前後の段落に飛ぶショートカットを提供することができ、空行によって視覚ユーザーが飛ばし見をすることができるのと同様、コンテンツをざっと見ることができるようになります。

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

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

```css
p {
  margin-bottom: 2em; // 段落の後の空白を増加させる
}
```

仕様書
---

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

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

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

関連情報
----

* `<hr>`
* `<br>`


<style>: スタイル情報要素 - HTML: ハイパーテキストマークアップ言語

<style>: スタイル情報要素
=================

**`<style>`** は HTML の要素で、文書あるいは文書の一部分のスタイル情報を含みます。 `<style>` 要素を含んでいる文書のコンテンツに適用される CSS を含みます。

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

`<style>` 要素は文書の `<head>` 要素の中に入れる必要があります。一般に、スタイルを外部スタイルシートに入れて `<link>` 要素を使用することをより推奨します。

文書に複数の `<style>` および `<link>` が含まれている場合、これらは含まれている文書の DOM 上の順序で適用されます。 — 予期しないカスケード問題を防ぐために、含まれている順序が正しいことを確認してください。

`<link>` 要素と同じ方法で、 `<style>` 要素に `media` 属性を付けてメディアクエリーを含めると、ビューポートの幅などのメディア特性に依存して内部スタイルシートを選択的に適用することができます。

属性
--

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

`media`

この属性はスタイルを適用するメディアを定義します。値はメディアクエリーであり、省略した場合の既定値は `all` です。

`nonce`

style-src コンテンツセキュリティポリシー内のインラインスクリプトをホワイトリストに入れるために使われる暗号ノンス（ワンタイム番号）です。サーバーはポリシーを送信するたびに一意のノンス値を生成する必要があります。それ以外の方法でリソースのポリシーのバイパスとして推測できないノンスを提供することが重要です。

`title`

この属性は代替スタイルシートのセットを指定します。

`blocking`
Experimental

この属性は、クリティカルなサブリソースの取得時に、特定の処理をブロックすべきであることを明示的に示します。`@import` でインポートされたスタイルシートは、ふつうクリティカルなサブリソースと見なされますが、一方で `background-image` やフォントはそうとはみなされません。

* `render`: 画面へのコンテンツの描画がブロックされます。

### 非推奨の属性

`type`
非推奨

この属性は指定すべきではありません。指定した場合、許可される値は空文字列か `text/css` と大文字と小文字を区別せずに一致するものだけです。

例
-

### 単純なスタイルシート

以下の例では、文書にとても単純なスタイルシートを適用します。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test page</title>
    <style>
 p {
 color: red;
 }
 </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
```

#### 結果

### 複数の style 要素

この例には、2 つの `<style>` 要素が含まれています。 — 競合する宣言は、詳細度が同じであれば、後の `<style>` 要素が優先されることに注意してください。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test page</title>
    <style>
 p {
 color: white;
 background-color: blue;
 padding: 5px;
 border: 1px solid black;
 }
 </style>
    <style>
 p {
 color: blue;
 background-color: yellow;
 }
 </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
```

#### 結果

### メディアクエリーが含まれるもの

この例では一つ前に作ったものに対して、2 番目の `<style>` 要素に `media` 属性を設定してあるので、ビューポートが 500px 未満の場合のみ適用されるようにします。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test page</title>
    <style>
 p {
 color: white;
 background-color: blue;
 padding: 5px;
 border: 1px solid black;
 }
 </style>
    <style media="all and (max-width: 500px)">
 p {
 color: blue;
 background-color: yellow;
 }
 </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
```

#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | メタデータコンテンツ、 `scoped` 属性が提供された場合:
 フローコンテンツ |
| 許可されている内容 | `type` 属性に合致するテキストコンテンツ、すなわち
 `text/css`。
  |
| タグの省略 | どちらのタグも省略できません。 |
| 許可されている親要素 | メタデータコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLStyleElement` |

仕様書
---

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

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

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

関連情報
----

* 文書に外部スタイルシートを適用することができる `<link>` 要素
* 代替スタイルシート


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

<noframes>: フレームフォールバック要素
=========================

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

**`<noframes>`** は HTML の要素で、 `<frame>` 要素に対応していない（または対応を無効化した）ブラウザーのためのコンテンツを提供します。よく使われるほとんどのブラウザーがフレームに対応していますが、一部のモバイルブラウザーやテキストモードブラウザーなどの例外もあります。

`<noframes>` の中では HTML 文書の body 要素内で利用できる HTML 要素が使用できますが、フレームを使用するための `<frameset>` 要素および `<frame>` 要素は意味がないので例外です。

`<noframes>` は、ユーザーのブラウザーがフレームに対応していないことを説明するメッセージを表示するために利用することができますが、できればフレームを使わなくても同じ（または同等の）機能を提供するための別なフォームを表現するために使用するべきです。

**メモ:** `<frame>` 要素および `<frameset>` 要素が廃止されたため、この要素も廃止されており使用するべきではありません。フレームがどうしても必要であれば、 `<iframe>` 要素を用いて表現するべきです。

属性
--

他のすべての HTML 要素と同様に、この要素はグローバル属性に対応しています。他の属性は利用できません。

例
-

この例には、 2 つのフレームを持つフレームセットがあります。加えて、 `<noframes>` を使用してユーザーエージェントがフレームに対応していない場合には説明メッセージを表示します。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <!-- Document metadata goes here -->
  </head>
  <frameset rows="45%, 55%">
    <frame src="https://developer.mozilla.org/en/HTML/Element/frameset" />
    <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
    <noframes>
      <p>
        It seems your browser does not support frames or is configured to not
        allow them.
      </p>
    </noframes>
  </frameset>
</html>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # noframes |

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

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

関連情報
----

* `<frameset>`
* `<frame>`


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

<dl>: 説明リスト要素
=============

**`<dl>`** は HTML の要素で、説明リストを表します。この要素は、一連の用語（`<dt>` 要素を使用して指定）と説明（`<dd>` 要素によって提供）をリスト化したものです。一般的な使用例として、用語集の作成やメタデータ（キーと値のペアのリスト）の表示が挙げられます。

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

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、`<dl>` 要素の子要素が 1 つの名前と値のグループの場合は知覚可能コンテンツ |
| 許可されている内容 | 1 個以上の `<dt>` 要素とそれに続く 1 個以上の `<dd>` 要素、任意で `<script>` 要素や `<template>` 要素が混在するもの。または (WHATWG HTML や W3C HTML 5.2 以降では) 1 個以上の `<div>` 要素、任意で `<script>` 要素や `<template>` 要素が混在するもの。 |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | `group`,
 `list`, `none` (en-US), `presentation` |
| DOM インターフェイス | `HTMLDListElement` |

属性
--

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

例
-

### 一つの定義語に対する一つの定義説明

```html
<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>
```

#### 結果

### 複数の定義語に対する一つの定義説明

```html
<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>
```

#### 結果

### 一つの定義語に対し、複数の定義内容をあてる

```html
<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>
  <dd>
    The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
    mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
  </dd>

  <!-- Other terms and descriptions -->
</dl>
```

#### 結果

### 複数の定義語に対し、複数の定義内容をあてる

これまでの例を組み合わせることで、複数の定義語に対し、複数の内容を定義することもできます。

### メタデータ

説明リストは、キーと値のペアのリストであるメタデータの表示にも役立ちます。

```html
<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>
```

#### 結果

ヒント: CSS でキーと値のセパレーターを定義すると便利でしょう。

```css
dt::after {
  content: ": ";
}
```

### 名前と値のグループを `div` 要素で包む

WHATWG HTML では、`<dl>` 要素内でそれそれの名前と値のグループを、`<div>` 要素でまとめることができます。これはマイクロデータを使用するとき、グループ全体にグローバル属性を適用するとき、あるいはスタイルを設定するために役立ちます。

```html
<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>
```

#### 結果

メモ
--

単なる字下げの目的でこの要素（あるいは `<ul>` 要素）を使用するのは誤りです。そのように機能しますが、これは悪い慣習であり説明リストの意味を不明瞭にします。

用語の説明のインデントを変更するには、CSS の `margin` プロパティを使用してください。

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

 スクリーンリーダーによって、`<dl>` コンテンツの合計数、用語/定義のコンテキスト、ナビゲーション方法の公開方法は様々です。これらの違いは、必ずしもバグではありません。
 iOS 14 では、VoiceOver は仮想カーソルで操作する際に、 `<dl>` の内容がリストであることをアナウンスします（read-all コマンドを使用しなくても）。VoiceOver は `<dl>` を使ったリストナビゲーションコマンドには対応していません。ARIA の `term` と `definition` のロールを `<dl>` 構造に適用すると、VoiceOver（macOS と iOS）がそのアナウンス方法を調整するので、注意が必要です。

* VoiceOver on iOS 14 Supports Description Lists
* Brief Note on Description List Support
仕様書
---

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

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

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

関連情報
----

* `<dt>`
* `<dd>`


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

<frameset>
==========

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

**`<frameset>`** は HTML の要素で、`<frame>` 要素を保持するために使用します。

**メモ:** `<iframe>` の使用に置き換わったためフレームの使用は推奨されなくなったので、現在のウェブサイトではこの要素はほとんど使用しません。

属性
--

他のすべての HTML 要素と同様に、この要素はグローバル属性に対応しています。

`cols`
非推奨

この属性は、フレームセット内の水平方向の領域の数と寸法を指定します。

`rows`
非推奨

この属性は、フレームセット内の垂直方向の領域の数と寸法を指定します。

例
-

### フレームセット文書

フレームセット文書では、`<body>` 要素の代わりに `<frameset>` 要素があります。`<frame>` 要素は `<frameset>` の中に配置されます。

```html
<!doctype html>
<html lang="en-US">
  <head>
    <!-- Document metadata goes here -->
  </head>
  <frameset cols="50%, 50%">
    <frame src="https://developer.mozilla.org/en/HTML/Element/iframe" />
    <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
  </frameset>
</html>
```

文書の `<body>` 内に別の HTML ページを埋め込みたい場合は、`<iframe>` 要素を使用してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # frameset |

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

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

関連情報
----

* `<frame>`
* `<iframe>`


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

<i>: 慣用テキスト要素
=============

**`<i>`** は HTML の要素で、何らかの理由で他のテキストと区別されるテキストの範囲を表します。例えば、慣用句、技術用語、分類学上の呼称、などです。英文においてはよくイタリック体で表現されてきたものであり、それがこの要素の `<i>` という名前の元になっています。

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

属性
--

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

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

* `<i>` 要素は、読みやすくする目的で、文字列を通常の文脈から区別するために使用します。これは、この範囲の文字列が周囲の文字列とは意味論的に異なるということです。`<i>` 要素の用途の中には、次のような様々な品質やモードのテキストを表す区間があります。
    + 音声または語調が変わるところ
    + 分類学上の表記（"*Homo sapiens*" のような属や種など）
    + 他言語の慣用語（"*et cetera*"など）。言語を識別するには `lang` 属性を指定する必要があります。
    + 専門用語
    + 音訳
    + 感想（「彼女は不思議に思った、*ところでこの作家は何を話しているのだろう*」など）
    + 西洋の書字体系における船名または船舶名（「彼らは配属された船である *Empress of the Galaxy* をドックで探した」など。）
* 以前のバージョンの HTML 仕様では、 `<i>` 要素は文字列をイタリック体で表示するために使用する、単なる表現用の要素でした。これは `<b>` 要素が文字列の太字表示に使用されたことと同様です。これらのタグに印字表現ではない意味が定義されたため、それは正しくなくなりました。ブラウザーは現在でも一般的に `<i>` の中身を斜体で表示するでしょうが、この要素の定義としては、そうすることは要件ではなくなりました。テキストをイタリック体で表示するには、 CSS の `font-style` プロパティを使用してください。
* この要素は、他の要素でより適切にマークアップされない場合にのみ使用してください。
    + 強調を表すには `<em>` 要素を使用してください。
    + 重要性を表すには `<strong>` 要素を使用してください。
    + 関連性を表すには `<mark>` 要素を使用してください。
    + 書籍、演劇、音楽などの作品名を表すには `<cite>` 要素を使用してください。
    + 用語の定義のインスタンスを表すには `<dfn>` 要素を使用してください。
例
-

この例では、 `<i>` 要素を他の言語の文字列を示すために使用することを示します。

```html
<p>
  The Latin phrase <i lang="la">Veni, vidi, vici</i> is often mentioned in
  music, art, and literature.
</p>
```

### 結果

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* `<em>`
* その他のイタリック体にする要素: `<var>`, `<dfn>`, `<cite>`, `<address>`


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

<header>
========

**`<header>`** は HTML の要素で、導入的なコンテンツ、ふつうは導入部やナビゲーション補助のグループを表します。見出し要素だけでなく、ロゴ、検索フォーム、著者名、その他の要素を含むこともできます。

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

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

`<header>` 要素は、区分コンテンツの中に含まれていない限り、ウェブサイト全体の `banner` ランドマークロールと同じ意味を持ちます。その場合、`<header>` 要素はランドマークではありません。

`<header>` 要素はグローバルなサイトヘッダーを定義することができ、アクセシビリティツリーでは `banner` として記述されます。通常、ロゴ、会社名、検索機能、そして場合によってはグローバルナビゲーションやスローガンを含みます。一般的にはページの上部に配置されます。

それ以外の場合は、アクセシビリティツリーの `section` となり、通常は周囲のセクションの見出し（`h1` - `h6` 要素）とオプションで小見出しを格納しますが、これは必須では**ありません**。

### 歴史的な使用法

`<header>` 要素は、もともと HTML の初期に見出しのために存在していました。これは the very first website に見られます。ある時点で見出しは `<h1>` ～ `<h6>` となり、`<header>` が自由に別なロールを担うことができるようになりました。

属性
--

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

例
-

### ページのヘッダー

```html
<header>
  <h1>Main Page Title</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>
```

#### 結果

### 記事のヘッダー

```html
<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>
```

#### 結果

アクセシビリティ
--------

`<header>` 要素が `banner` ランドマークを定義するのは、そのコンテキストが `<body>` 要素のときです。HTML の header 要素は、`<article>`、`<aside>`、`<nav>`、`<section>` 要素の子孫である場合は banner ランドマークとみなされません。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 知覚可能コンテンツ |
| 許可されている内容 | フローコンテンツ。但し、子孫に他の `<header>` や
 `<footer>` がないこと。
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素。ただし、`<address>`、`<footer>`、他の
 `<header>`
 要素の子孫になることはできません。
  |
| 暗黙の ARIA ロール | banner,
 または
 `article`, `aside`, `main`, `nav`,
 `section`
 の各要素、または
 `role=article`,
 `complementary`,
 `main`,
 `navigation`,
 `region`
 の要素の子孫である場合は対応するロールなし |
| 許可されている ARIA ロール | `group`, `presentation`,
 `none` (en-US) |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-header-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、`<footer>`、`<section>`、`<address>`


<label>: ラベル要素 - HTML: ハイパーテキストマークアップ言語

<label>: ラベル要素
==============

**`<label>`** は HTML の要素で、ユーザーインターフェイスの項目のキャプションを表します。

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

`<label>` を `<input>` や `<textarea>` などのフォーム要素と関連付けると、いくらかの利点が発生します。

* ラベルのテキストが、対応するテキスト入力欄に視覚的に関連付けられるだけではありません。プログラム的にも関連付けられます。つまり、例えばユーザーがフォーム入力欄にフォーカスを移動した時、読み上げソフトがラベルを読み上げ、支援技術のユーザーが何のデータを入力するべきか理解しやすくすることができます。
* 関連付けられたラベルをクリックして、入力欄自体をクリックした場合と同様に、入力欄にフォーカスを与えたりアクティブ化にしたりすることができます。こうしてヒット領域を拡大すると、タッチパネルの端末を使用している場合を含めて、入力欄をアクティブ化させやすくなります。

`<label>` 要素と `<input>` 要素を明示的に関連付けるには、最初に `id` 属性を `<input>` 要素に追加します。次に、`for` 属性を `<label>` 要素に追加します。`for` の値は `<input>` 要素の `id` と同じにします。

他の方法として、 `<input>` を直接 `<label>` の内側に入れることができますが、この場合は関連付けが明確なので、 `for` および `id` 属性は必要ありません。

```html
<label>
  Do you like peas?
  <input type="checkbox" name="peas" />
</label>
```

ラベルがラベル付けするフォームコントロールは、 label 要素の *ラベル対象コントロール* と呼ばれます。複数のラベルを同じフォームコントロールに関連付けることができます。

```html
<label for="username">名前を入力してください:</label>
<input id="username" name="username" type="text" />
<label for="username">名前を忘れてしまいましたか？</label>
```

`<label>` 要素に関連付けることができる要素には `<button>`, `<input>` (`type="hidden"` を除く), `<meter>`, `<output>`, `<progress>`, `<select>`, `<textarea>` があります。

属性
--

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

`for`

`for` 属性の値は単一の `id` でなければならず、これは `<label>` 要素と同一の文書内にあるラベル付け可能なフォーム関連要素のものです。従って、この `label` 要素が関連付けられるのはフォームコントロール 1 つだけです。

**メモ:** プログラムから `for` 属性を設定する場合は、 `htmlFor` を使用してください。

文書内で `for` 属性の値に一致する `id` 属性を持つ最初の要素が、この `label` 要素の *ラベル対象コントロール* になります（その `id` を持つ要素が実際に ラベル付け可能要素 である場合）。このラベル付け可能な要素でない場合は、 `for` 属性は何も効果がありません。もし、文書の後半に `id` の値に一致する他の要素があったとしても、それらは考慮されません。

複数の `label` 要素の `for` 属性に同じ値を指定することができます。そうすると、関連するフォームコントロール（`for` 値が参照するフォームコントロール）は複数のラベルを持つことになります。

**メモ:** `<label>` 要素は、包含するコントロール要素が `for` 属性が指す要素である場合、 `for` 属性を持ちつつ、中にコントロール要素を含めることができます。

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

`<label>` には特殊なスタイル上の考慮事項はありません。構造的に単純なインライン要素であり、ほとんどは `<span>` や `<a>` 要素と同じ方法でスタイルを適用します。テキストが読みにくくならない限り、あらゆる方法でスタイルを適用することができます。

例
-

### 暗黙のラベルの定義

```html
<label>Click me <input type="text" /></label>
```

### "for" 属性をつけた明示的なラベルの定義

```html
<label for="username">Click me to focus on the input field</label>
<input type="text" id="username" />
```

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

### 対話型コンテンツ

`label` の中にアンカーやボタンのような対話型要素を配置しないでください。そのようにすると、ユーザーが `label` に関連したフォーム入力欄を有効化しにくくなります。

**悪い例:**

```html
<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  <a href="terms-and-conditions.html">利用規約と利用条件</a>に同意します。
</label>
```

**良い例:**

```html
<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  利用規約と利用条件に同意します。
</label>
<p>
  <a href="terms-and-conditions.html">利用規約と利用条件を読む</a>
</p>
```

### 見出し

`<label>` の中に見出し要素を配置すると、数多くの種類の支援技術を妨げることになります。見出しは一般的にナビゲーションエイドとして使用されるためです。ラベルの文字列を視覚的に調整する必要がある場合は、代わりに `<label>` 要素に CSS クラスを適用してください。

フォーム、またはフォームのセクションにタイトルが必要な場合は、 `<legend>` を `<fieldset>` の中に配置して使用してください。

**悪い例:**

```html
<label for="your-name">
  <h3>Your name</h3>
  <input id="your-name" name="your-name" type="text" />
</label>
```

**良い例:**

```html
<label class="large-label" for="your-name">
  Your name
  <input id="your-name" name="your-name" type="text" />
</label>
```

### ボタン

`<input>` 要素に `type="button"` がついた宣言に妥当な `value` 属性があれば、関連付けるラベルは必要ありません。ラベルを付けると、支援技術がボタン入力をどう解釈するかをじゃまする可能性があります。 `<button>` 要素でも同じことが言えます。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 記述コンテンツ,
 対話型コンテンツ,
 フォーム関連要素, 知覚可能コンテンツ
  |
| 許可されている内容 | 記述コンテンツ、ただし、子孫に
 `label`
 要素を持つことはできない。ラベル付けの対象となるコントロール以外のラベル付け可能要素を入れてはならない。
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLLabelElement` |

仕様書
---

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

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

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


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

<nobr>: 無改行テキスト要素
=================

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

**`<nobr>`** は HTML の要素で、その内包する文字列の自動改行を無効化します。行内に収まらない文字列は、領域からはみ出てレンダリングされるか、スクロールバーを伴って表示されます。

**警告:** この要素は広く対応されていますが、この要素は標準の要素であったことは**ない**ため、使用するべきではありません。代わりに、 CSS プロパティの `white-space` を次のように使用してください。

```html
<span style="white-space: nowrap;">Long line with no breaks</span>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # nobr |

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

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

関連情報
----

* `white-space`
* `overflow`


<small>: 附随コメント要素 - HTML: ハイパーテキストマークアップ言語

<small>: 附随コメント要素
=================

**`<small>`** は HTML の要素で、スタイルの表現とは独立して、著作権表示や法的表記のような、注釈や小さく表示される文を表します。既定では、 `small` から `x-small` のように、一段階小さいフォントでテキストが表示されます。

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

属性
--

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

例
-

### 基本的な使用

```html
<p>
  これは最初の文です。
  <small>この文は小さい文字で表記されています。</small>
</p>
```

#### 結果

### CSS による代替

```html
<p>
  これは最初の文です。
  <span style="font-size:0.8em">この文は小さい文字で表記されています。</span>
</p>
```

#### 結果

注
-

`<small>` 要素は `<b>` 要素や `<i>` 要素と同様に、構造と表現の分離の原則に反しますが、これら 3 つの要素は HTML で有効です。作者は `<small>` を使用するか CSS を使用するかを決める際に最良の判断を行うよう求められます。

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* `<b>`
* `<sub>` と `<sup>`
* `<font>`
* `<style>`
* HTML 4.01 仕様書: Font Styles


<datalist>: HTML データリスト要素 - HTML: ハイパーテキストマークアップ言語

<datalist>: HTML データリスト要素
=========================

**`<datalist>`** は HTML の要素で、この要素には `<option>` 要素の集合が含まれ、他のコントロール内で選択できる許容または推奨オプションを表します。

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

`<datalist>` 要素をコントロールに結びつけるには、`id` 属性で固有の識別子を与え、同じ識別子を値とした `list` 属性を `<input>` 要素に追加します。
 この動作は、特定の種類の `<input>` だけが対応しており、また、ブラウザーの種類によっても異なる場合があります。

**メモ:** `<option>` 要素は内部コンテンツとして、また `value` 属性と `label` 属性に値を格納することができます。ドロップダウンメニューでどちらが表示されるかはブラウザーに依存しますが、クリックされたときに制御フィールドに入力されるコンテンツは常に `value` 属性に由来します。

属性
--

この要素には、すべての要素が持つグローバル属性以外の属性はありません。

例
-

### テキスト型

text、search、url、tel、email、number の各型は、ユーザーがコントロールをクリックまたはダブルクリックすると、ドロップダウンメニューで表示されます。
 通常、コントロールの右側には、定義済みの値があることを示す矢印もあります。

```html
<label for="myBrowser">一覧からブラウザーを選択して下さい:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>
```

### 日付と時刻型

month、week、date、time、datetime-local の各型は、日付や時刻を便利に選択できるようなインターフェイスを表示することができます。
 あらかじめ定義された値をそこに示すことで、ユーザーはすばやく制御値を満たすことができます。

**メモ:** type に対応していない場合、単純なテキストフィールドを作成する `text` 型が代わりに使用されます。このフィールドは推奨値を正しく認識し、ドロップダウンメニューでユーザーに表示します。

```html
<input type="time" list="popularHours" />
<datalist id="popularHours">
  <option value="12:00"></option>
  <option value="13:00"></option>
  <option value="14:00"></option>
</datalist>
```

### 範囲型

range 型の推奨値は、ユーザーが簡単に選択できるように目盛りの羅列で示されます。

```html
<label for="tick">Tip amount:</label>
<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />
<datalist id="tickmarks">
  <option value="0"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
</datalist>
```

### 色型

color の種類は、あらかじめ定義された色をブラウザーが提供するインターフェイスで示すことができます。

```html
<label for="colors">色を選択して下さい（できれば赤系）:</label>
<input type="color" list="redColors" id="colors" />
<datalist id="redColors">
  <option value="#800000"></option>
  <option value="#8B0000"></option>
  <option value="#A52A2A"></option>
  <option value="#DC143C"></option>
</datalist>
```

### パスワード型

仕様書では `<datalist>` を password 型にリンクすることができることになっていますが、セキュリティ上の理由から、対応しているブラウザーはありません。

```html
<label for="pwd">パスワードを入力:</label>
<input type="password" list="randomPassword" id="pwd" />
<datalist id="randomPassword">
  <option value="5Mg[\_3DnkgSu@!q#"></option>
</datalist>
```

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、記述コンテンツ |
| 許可されている内容 | 記述コンテンツ、または 0 個以上の `<option>` 要素のどちらか |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | listbox |
| 許可されている ARIA ロール | なし |
| DOM インターフェイス | `HTMLDataListElement` |

仕様書
---

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

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

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

関連情報
----

* `<input>` 要素、特に `list` 属性
* `<option>` 要素


<thead>: 表ヘッダー要素 - HTML: ハイパーテキストマークアップ言語

<thead>: 表ヘッダー要素
================

**`<thead>`** は HTML の要素で、表の列の見出しを定義する行のセットを定義します。

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

属性
--

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

### 非推奨の属性

`align`
非推奨

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

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

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

**警告:** この属性は最新の標準仕様で廃止された（対応していない）ため、使用しないでください。

* 値の配置を指定するには、CSS の `text-align` プロパティを使用してください。

`bgcolor`
非推奨

この属性は、列の各セルの背景色を定義します。6 桁の 16 進による色または名前付きの色を受け付けます。アルファ透過には対応していません。

**メモ:** この属性は標準外であるため、使用しないでください。`thead` 要素はCSS の `background-color` プロパティを、適用可能な要素、たとえば `thead`, `<tr>`, `<td>`, `<th>` のいずれかの要素で使用してください。

`char`
非推奨

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

**メモ:** この属性は最新の標準仕様で廃止された（そして対応していない）ため、使用しないでください。

`charoff`
非推奨

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

**メモ:** この属性は最新の標準仕様で廃止された（対応していない）ため、使用しないでください。

`valign`
非推奨

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

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

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

例
-

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

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | 0 個以上の `<tr>` 要素 |
| タグの省略 | 開始タグは必須。 `<thead>` 要素の直後に `<tbody>` 要素または `<tfoot>` 要素がある場合は終了タグを省略可能。 |
| 許可されている親要素 | `<table>` 要素。 `<thead>` は（暗黙的に定義されるものであっても） `<caption>` 要素や `<colgroup>` 要素の後方かつ `<tbody>`, `<tfoot>`, `<tr>` の各要素の前方に配置しなければなりません。 |
| 暗黙の ARIA ロール | `rowgroup` |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLTableSectionElement` |

仕様書
---

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

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

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

関連情報
----

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


<li>: リスト項目要素 - HTML: ハイパーテキストマークアップ言語

<li>: リスト項目要素
=============

**`<li>`** は HTML の要素で、リストの項目を表すために用いられます。この要素は、その項目が属する順序付きリスト (`<ol>`)、順序なしリスト (`<ul>`)、メニュー (`<menu>`) のいずれかの子要素として配置する必要があります。メニュー要素および順序なしリスト内においては、リストの項目は通常、行頭文字を伴って表示されます。順序付きリスト内では、数字や文字による連番のリストマーカーを伴って表示されます。

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

属性
--

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

`value`

これは整数値の属性で、`<ol>` 要素で定義されたリスト項目の序数値を示します。リストがローマ数字や文字で表示される場合であっても、この属性は数値のみが指定できます。続くリスト項目は、その番号から続いて採番されます。順序なしリスト (`<ul>`) やメニュー (`<menu>`) では **value** 属性は意味がありません。

`type`
非推奨

Non-standard

文字の属性で、表示するリストマーカーの種類を指定します。

* `a`: 小文字
* `A`: 大文字
* `i`: 小文字のローマ数字
* `I`: 大文字のローマ数字
* `1`: 数字

もし親の `<ol>` 要素で使用されていた場合は、それよりも優先されます。

**メモ:** この属性は非推奨になっています。代わりに CSS の `list-style-type` プロパティを使用してください。

例
-

もっと詳細な例は、 `<ol>` と `<ul>` のページを参照してください。

### 番号付きリスト

```html
<ol>
  <li>最初のリスト項目</li>
  <li>二番目のリスト項目</li>
  <li>三番目のリスト項目</li>
</ol>
```

#### 結果

### カスタム値の付いた番号付きリスト

```html
<ol type="I">
  <li value="3">third item</li>
  <li>fourth item</li>
  <li>fifth item</li>
</ol>
```

#### 結果

### 順序なしリスト

```html
<ul>
  <li>最初のリスト項目</li>
  <li>二番目のリスト項目</li>
  <li>三番目のリスト項目</li>
</ul>
```

#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | フローコンテンツ |
| タグの省略 |
 直後に別の `<li>`
 要素が続く場合、または他のリスト項目が続くことなく親要素が閉じられた場合は、終了タグが省略可能。
  |
| 許可されている親要素 | `<ul>`、`<ol>`、`<menu>`。すでに廃止されているが、`<dir>`
 の子要素としても配置可能であった。
  |
| 暗黙の ARIA ロール | `listitem`
 when child of an
 `ol`, `ul` or
 `menu` |
| 許可されている ARIA ロール | `menuitem` (en-US),
 `menuitemcheckbox` (en-US),
 `menuitemradio` (en-US), `option`,
 `none` (en-US), `presentation`,
 `radio`, `separator` (en-US),
 `tab`, `treeitem` (en-US) |
| DOM インターフェイス | `HTMLLIElement` |

仕様書
---

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

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

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

関連情報
----

* 他のリスト関連 HTML 要素: `<ul>`, `<ol>`, `<menu>` および廃止された `<dir>`
* `<li>` の整形に便利な CSS プロパティ:
    + 箇条書き記号の表示を選択するための `list-style`
    + 複雑な入れ子状リストを処理するのに使用できる CSS counters
    + リスト項目のインデントの調整に用いることができる `margin`


<div>: コンテンツ区分要素 - HTML: ハイパーテキストマークアップ言語

<div>: コンテンツ区分要素
================

**`<div>`** は HTML の要素で、フローコンテンツの汎用コンテナーです。 CSS を用いて何らかのスタイル付けがされる（例えば、スタイルが直接適用されたり、親要素にフレックスボックスなどの何らかのレイアウトモデルが適用されるなど）までは、コンテンツやレイアウトには影響を与えません。

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

「純粋」なコンテナーとして、`<div>` 要素は本質的には何も表しません。その代わり、 `class` や `id` を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を（`lang` 属性を使用して）示したりするために使用します。

属性
--

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

**メモ:** `align` 属性は廃止されたので、使用しないでください。代わりに、 CSS のプロパティを使用したり、 CSS グリッドや CSS フレックスボックスを使用して `<div>` 要素をページの中央に配置したりしてください。

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

* `<div>` 要素は、他に適切な意味的要素（`<article>` や `<nav>` など）がない場合に限り使用してください。
アクセシビリティの考慮
-----------

`<div>` 要素は `generic` の暗黙のロールを持っており、まったくない訳ではありません。これは、特定の役割を持つ直接の子孫要素が適切に機能することを期待する、特定の ARIA の組み合わせ宣言に影響を与える可能性があります。

例
-

### 単純な例

```html
<div>
  <p>
    Any kind of content here. Such as <p>, <table>. You name it!
  </p>
</div>
```

結果はこのようになります。

### スタイル付けを行う例

この例では CSS を用いて `<div>` にスタイルを適用することで、影付きのボックスを作成します。なお、 `<div>` 要素に `class` 属性を使用して、 `"shadowbox"` という名前のスタイルを要素に適用します。

#### HTML

```html
<div class="shadowbox">
  <p>Here's a very interesting note displayed in a lovely shadowed box.</p>
</div>
```

#### CSS

```css
.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
```

#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ, 知覚可能コンテンツ |
| 許可されている内容 | フローコンテンツ。または (WHATWG HTML において) 親要素が
 `<dl>` である場合: 1つ以上の
 `<dt>` 要素と、それに続く1つ以上の
 `<dd>` 要素、さらに任意で
 `<script>` 要素や
 `<template>` 要素が混在。
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツ
 を受け入れるすべての要素。または (WHATWG
 HTML において) `<dl>` 要素。
  |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLDivElement` |

仕様書
---

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

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

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

関連情報
----

* 意味論的な区分要素: `<section>`, `<article>`, `<nav>`, `<header>`, `<footer>`
* 記述コンテンツのスタイル付け用の `<span>` 要素


<details>: 詳細折りたたみ要素 - HTML: ハイパーテキストマークアップ言語

<details>: 詳細折りたたみ要素
====================

**`<details>`** は HTML の要素で、ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは `<summary>` 要素を使用して提供する必要があります。

折りたたみウィジェットはふつう、回転して開閉状態を示す小さな三角形を使用し、その隣のラベルと共に画面上に表現されます。 `<summary>` 要素の内容が折りたたみウィジェットのラベルとして使用されます。

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

`<details>` ウィジェットは 2 つの状態のうち 1 つを取ります。既定の*閉じた*状態は `<summary>` を使用して指定されたラベル文字列（または `<summary>` がない場合はユーザーエージェントが定義した既定の文字列）とウィジェット自身による三角形だけを表示します。

ユーザーがウィジェットをクリックするか、フォーカスしてスペースバーを押すと、ウィジェットは「ツイスト」して開き、中身が見えるようになります。ウィジェットの開閉を表すために、回転したりねじれたりする三角形を使用することが多いため、「ツイスティ」 (twisty) と呼ばれることもあります。

CSS を使用して折り畳みウィジェットのスタイルを設定することができます。また、 `open` 属性を設定したり削除したりすることによって、プログラムによってウィジェットを開いたり閉じたりすることも可能です。残念ながら、現時点では、開閉の遷移をアニメーションで表現する方法は組み込まれていません。

既定では、ウィジェットが閉じている時、折りたたみの三角形と概要が表示できるだけの高さしかありません。ウィジェットが開くと、要素は中に含まれた詳細が表示できるだけの大きさに拡大されます。

完全な標準互換の実装では、 CSS の ``display`: list-item` が自動的に `<summary>` に適用されます。この表示方法はカスタマイズすることができます。詳しくは折りたたみウィジェットのカスタマイズを参照してください。

属性
--

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

`open`

この論理属性は、現在詳細（つまり `<details>` 要素の内容）が現在表示されていることを示します。この属性がある場合は詳細が表示され、この属性がない場合は非表示になります。既定では、この属性は存在しないため、詳細は表示されません。

**メモ:** 詳細を非表示にするには、この属性を完全に削除する必要があります。この属性は論理属性なので、 `open="false"` では詳細が表示状態になります。

イベント
----

HTML で対応している通常のイベントに加えて、 `<details>` 要素は `toggle` イベントに対応しており、開閉状態が変化するたびに `<details>` 要素が呼び出されます。イベントは状態が変化した**後**に送信され、もしブラウザーがイベントを送信する前に状態が 2 回以上変化しても、イベントは合体して 1 回しか送信されません。

ウィジェットの状態が変化したことを検出するために、 `toggle` イベントを待ち受けすることができます。

```js
details.addEventListener("toggle", (event) => {
  if (details.open) {
    /\* 要素が開いた方に切り替わった \*/
  } else {
    /\* 要素が閉じた方に切り替わった \*/
  }
});
```

例
-

### 単純な折りたたみの例

この例では `<details>` 要素を `<summary>` 付きで表示します。

```html
<details>
  <summary>システム要件</summary>
  <p>
    オペレーティングシステムを実行するコンピューターが必要です。コンピューターにはメモリーがあり、できれば何らかの長期保存用の記憶装置があること。入力機器と何らかの出力機器を推奨。
  </p>
</details>
```

#### 結果

### 折りたたみボックスの作成

`<details>` ボックスを開いた状態にするために、論理値の `open` 属性を追加しましょう。

```html
<details open>
  <summary>システム要件</summary>
  <p>
    オペレーティングシステムを実行するコンピューターが必要です。コンピューターにはメモリーがあり、できれば何らかの長期保存用の記憶装置があること。入力機器と何らかの出力機器を推奨。
  </p>
</details>
```

#### 結果

### 表示方法のカスタマイズ

では、いくらか CSS を適用して折りたたみボックスの外見をカスタマイズしましょう。

#### CSS

```css
details {
  font:
    16px "Open Sans",
    Calibri,
    sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details[open] > summary {
  background-color: #ccf;
}
```

この CSS はタブ風のインターフェイスに似た外見を作り出し、クリックするとタブが開いてコンテンツを表示します。

`details[open]` セレクターを、開いている要素のスタイル付けに使用することができます。

#### HTML

```html
<details>
  <summary>システム要件</summary>
  <p>
    オペレーティングシステムを実行するコンピューターが必要です。コンピューターにはメモリーがあり、できれば何らかの長期保存用の記憶装置があること。入力機器と何らかの出力機器を推奨。
  </p>
</details>
```

#### 結果

### 折りたたみウィジェットのカスタマイズ

折りたたみの三角形ウィジェット自身はカスタマイズできますが、これは最近標準化され、広くは対応されていません。さらに、この対応方法については複数の種類があり、標準はそれに基づいて決定されましたので、しばらくの間はカスタマイズのために複数の方法を使用する必要があります。

`<summary>` 要素は `list-style` 一括指定プロパティや、 `list-style-type` などの個別指定プロパティに対応しており、折りたたみウィジェットを三角形から選択したものに変更することができます (ふつうは `list-style-image`) を使用します。例えば、折りたたみウィジェットのアイコンは `list-style: none` と設定することで削除することができます。

#### CSS

```css
details {
  font:
    16px "Open Sans",
    Calibri,
    sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
  list-style: none;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}
```

この CSS はタブ風のインターフェイスに似た外見を作り出し、クリックするとタブが開いてコンテンツを表示します。

#### HTML

```html
<details>
  <summary>システム要件</summary>
  <p>
    オペレーティングシステムを実行するコンピューターが必要です。コンピューターにはメモリーがあり、できれば何らかの長期保存用の記憶装置があること。入力機器と何らかの出力機器を推奨。
  </p>
</details>
```

#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、区分化ルート、対話型コンテンツ、知覚可能コンテンツ |
| 許可されている内容 | 1 つの `<summary>` 要素と、それに続く フローコンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙的な ARIA ロール | `group` |
| 許可されている ARIA ロール | なし |
| DOM インターフェイス | `HTMLDetailsElement` |

仕様書
---

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

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

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

関連情報
----

* `<summary>`


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

<script>: スクリプト要素
=================

**`<script>`** は HTML の要素で、実行できるコードやデータを埋め込むために使用します。ふつうは JavaScript のコードの埋め込みや参照に使用されます。 `<script>` 要素は WebGL の GLSL shader プログラミング言語、 JSON 等の他の言語にも使用することができます。

|  |  |
| --- | --- |
| コンテンツカテゴリー | メタデータコンテンツ, フローコンテンツ, 記述コンテンツ |
| 許可されている内容 | `text/javascript` などの動的スクリプト |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | メタデータコンテンツを受け入れるすべての要素、または記述コンテンツを受け入れるすべての要素。 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLScriptElement` |

属性
--

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

`async`

クラシックスクリプトでは、 `async` 属性があった場合、クラシックスクリプトが利用可能になるとすぐに並行して読み込み、解析と評価を行います。

モジュールスクリプトでは、 `async` 属性があった場合、そのスクリプトとその依存関係はすべて遅延キューで実行されるので、解析と並行して読み込まれ、利用可能になるとすぐに評価されます。

この属性により、ブラウザーが解析を一時停止してスクリプトを読み込んで評価しなければならないような**パーサーブロック JavaScript** を排除することができます `defer` はこの場合に同様の効果があります。

これは論理属性です。論理属性が要素にあれば真の値を表し、属性がなければ偽の値を表します。

ブラウザーの対応状況についてはブラウザーの互換性をご覧ください。 asm.js 向け非同期スクリプトもご覧ください。

`crossorigin`

通常の `script` 要素は標準の CORS チェックに通らないスクリプトに対して、 `window.onerror` に最小限の情報しか渡しません。別のドメインを使用するサイトに静的メディアへのエラーログ出力ができるようにするためには、この属性を使用してください。有効な値について、詳しくは CORS 設定属性をご覧ください。

`defer`

この論理属性は、スクリプトを文書の解析完了後かつ `DOMContentLoaded` が発生する前に実行することをブラウザーに示します。

`defer` 属性の付いたスクリプトは、スクリプトが読み込まれて評価が完了するまで、 `DOMContentLoaded` イベントの発生が抑制されます。

**警告:** この属性は、 `src` 属性がない場合 (すなわちインラインスクリプト) に使用してはいけません。そのような場合は効果がありません。

`defer` 属性はモジュールスクリプトには効果がありません。既定で延期が行われます。

`defer` 属性のあるスクリプトは、文書に現れた順に実行されます。

この属性により、ブラウザーが解析を一時停止してスクリプトを読み込んで評価しなければならないような、**パーサーブロッキング JavaScript** を排除することができるようになります。 `async` はこの場合と似た効果があります。

`fetchpriority`
Experimental

外部スクリプトをフェッチするときに使用する相対的な優先度のヒントを提供されます。取りうる値は次の通りです。

`high`

他の外部スクリプトと比較して、高い優先度でフェッチすることを指示します。

`low`

他の外部スクリプトと比較して、低い優先度でフェッチすることを指示します。

`auto`

既定値です。他の外部スクリプトとの相対的なフェッチ優先順位を自動的に決定することを指示します。

`integrity`

この属性は、取得したリソースが予期せぬ改ざんを受けずに提供されたかを、ユーザーエージェントが検証するために使用できるメタデータを含みます。サブリソース完全性を参照してください。

`nomodule`

この論理属性は、 ES モジュールに対応しているブラウザーでは、スクリプトを実行するべきではないことを示します。要するに、モジュール式の JavaScript コードに対応していない古いブラウザー向けの代替スクリプトを提供するために使用できます。

`nonce`

script-src コンテンツセキュリティポリシー内のスクリプトをホワイトリストに入れるための暗号ノンス (ワンタイム番号) です。サーバーはポリシーを送信するたびに一意のノンス値を生成する必要があります。それ以外の方法でリソースのポリシーのバイパスを推測できないノンスを提供することが重要です。

`referrerpolicy`

スクリプトを読み込んだり、スクリプトがリソースを読み込んだりする際に、どのリファラーを送信するかを示します。

* `no-referrer`: `Referer` ヘッダーは送信しません。
* `no-referrer-when-downgrade` (既定値): `Referer` ヘッダーは、オリジンに TLS (HTTPS) がない場合には送信しません。
* `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 で保護されたリソースからセキュアでない生成元へ漏えいしますので、**安全ではありません**。

**メモ:** 既定値および `referrerpolicy` に対応していない場合の代替値は空文字列 (`""`) です。 `referrerpolicy` が `<script>` 要素で明示的に指定されていない場合はより高次元、つまり文書全体やドメイン全体のリファラーポリシーに合わせられます。より高次元のポリシーが利用できない場合は、空文字列は `strict-origin-when-cross-origin` と同等のものとして扱われます。

`src`

この属性は外部スクリプトの URI を指定します。文書に直接スクリプトを埋め込む代わりに使用することができます。

**`type`**

 この属性は、表現されるスクリプトの種類を示します。
 この属性の値は、以下のいずれかになります。

**属性が未設定（既定値）、空文字列、JavaScript の MIME タイプ**

 スクリプトが「クラシックスクリプト」であること、JavaScript コードを保持していることを示します。
 このスクリプトが JavaScript コードを参照している場合、MIME タイプを指定するのではなく、この属性を省略することを推奨します。
 JavaScript の MIME タイプは IANA media types specification に掲載されています。

`module`

 コードを JavaScript モジュールとして扱います。
 スクリプトコンテンツの処理は延期されます。
 `charset` および `defer` 属性の影響を受けません。
 `module` の利用についての情報は、 JavaScript モジュールをご覧ください。クラシックスクリプトとは異なり、モジュールスクリプトはオリジンをまたいで読み取る場合、CORS プロトコルを使用する必要があります。

`importmap`

 この値は、要素の本体にインポートマップが格納されていることを示します。
 インポートマップ JSON オブジェクトで、開発者が JavaScript モジュールをインポートする際に、ブラウザーがモジュール指定子を解決する方法を制御するために使用できます。

**その他の値**

 このタグで埋め込んだコンテンツを、ブラウザーによって処理されないデータブロックとして扱います。
 開発者はデータブロックを記述するために、 JavaScript の MIME タイプではない有効な MIME タイプを使用しなければなりません。
 他の属性は、`src` 属性も含めてすべて無視されます。

`blocking`
Experimental

この属性は、スクリプトのフェッチ時に特定の処理をブロックすることを明示的に示します。ブロックされる操作は、下記のブロッキング属性をスペースで区切って列挙したものでなければなりません。

* `render`: 画面へのコンテンツの描画がブロックされます。

### 非推奨の属性

`charset`
非推奨

存在する場合、値は ASCII で大文字小文字を区別せずに "`utf-8`" と一致する文字列でなければなりません。 `charset` 属性は、文書が UTF-8 でなければならないこと、および `script` 要素が文書から文字エンコーディングを継承することから、指定する必要はありません。

`language`
非推奨

Non-standard

`type` 属性と同じように、この属性は使われているスクリプト言語を指定する際に用いられます。しかし、 `type` 属性とは異なり、この属性に指定可能な値が標準化されませんでした。代わりに `type` 属性を使用してください。

メモ
--

`async`, `defer`, `type="module"` のいずれの属性もないスクリプトは、 `type="module"` のないインラインスクリプト同様に、ブラウザーがページの解析を続けるより先に、ただちに読み込みおよび実行されます。

スクリプトは `text/javascript` の MIME タイプで提供するべきですが、ブラウザーは寛大であり、画像型 (`image/*`)、動画型 (`video/*`)、音声型 (`audio/*`)、`text/csv` のタイプで提供されたスクリプトに限りブロックします。スクリプトがブロックされると、 `error` イベントがその要素に送られ、そうではない場合は `load` イベントが送られます。

例
-

### 基本的な使い方

これらの例は `<script>` 要素を使用して (外部の) スクリプトをインポートする方法を紹介します。

```html
<script src="javascript.js"></script>
```

また、以下の例は `<script>` 要素内に (インライン) スクリプトを置く方法を示します。

```html
<script>
 alert("Hello World!");
</script>
```

### モジュールの代替

`module` の値を持つ `type` 属性に対応しているブラウザーは、 `nomodule` 属性の付いたスクリプトを無視します。これによって、モジュールスクリプトを提供しつつ、非対応のブラウザーの場合は `nomodule` でマークされた代替スクリプトを提供することもできます。

```html
<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>
```

### importmap によるモジュールのインポート

 スクリプトでモジュールをインポートするとき、`type=importmap` 機能を使用しない場合、各モジュールは絶対 URL または相対 URL のどちらかのモジュール指定子を使用してインポートする必要があります。
 下記の例では、1 つ目のモジュール指定子 ("./shapes/square.js") は文書のベース URL に対して相対的に解決され、2 つ目は絶対 URL となります。

```js
import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";
```

 インポートマップを使用すると、一致した場合にモジュール指定子のテキストを置き換えることができる対応表を提供することができます。
 下記のインポートマップでは、上に示したモジュール指定子のエイリアスとして使用できるキー `square` と `circle` を定義しています。

```html
<script type="importmap">
 {
 "imports": {
 "square": "./shapes/square.js",
 "circle": "https://example.com/shapes/circle.js"
 }
 }
</script>
```

これにより、（絶対 URL や相対 URL ではなく）モジュール指定子の名前を使用してモジュールをインポートすることができます。

```js
import { name as squareName, draw } from "square";
import { name as circleName } from "circle";
```

インポートマップでできることの例については、JavaScript モジュールガイドのインポートマップを使用したモジュールのインポートの項を参照してください。

### HTML へのデータの埋め込み

また、 `<script>` 要素を使用して、 JavaScript 以外の有効な MIME タイプを `type` 属性に指定することで、サーバー側で出力したデータを HTML に埋め込むこともできます。

```html
<!-- サーバーによる生成 -->
<script id="data" type="application/json">
 {
 "userId": 1234,
 "userName": "Maria Cruz",
 "memberSince": "2000-01-01T00:00:00.000Z"
 }
</script>

<!-- 固定 -->
<script>
 const userInfo = JSON.parse(document.getElementById("data").text);
 console.log("User information: %o", userInfo);
</script>
```

### スクリプトがフェッチされ、実行されるまでレンダリングをブロック

`blocking` 属性の中に `render` トークンを含めることができます。スクリプトがフェッチされ実行されるまで、ページのレンダリングはブロックされます。下記の例では、非同期スクリプトでレンダリングをブロックしています。スクリプトが解釈をブロックすることなく、レンダリングが始まる前に評価されることが保証されます。

```html
<script blocking="render" async src="async-script.js"></script>
```

仕様書
---

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

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

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

関連情報
----

* `document.currentScript`
* Flavio Copes' article on loading JavaScript efficiently and explaining the differences between `async` and `defer`
* JavaScript モジュールガイド


<dialog>: ダイアログ要素 - HTML: ハイパーテキストマークアップ言語

<dialog>: ダイアログ要素
=================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`<dialog>`** は HTML の要素で、ダイアログボックスや、消すことができるアラート、インスペクター、サブウィンドウ等のような対話的コンポーネントを表します。

属性
--

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

**警告:** `tabindex` 属性を `<dialog>` 要素で使用してはいけません。

`open`

 ダイアログがアクティブで操作で使用できることを示します。 `open` 属性が設定されていないときは、ダイアログはユーザーに表示する*べきではありません*。
 ダイアログを表示するには、`open` 属性ではなく `.show()` または `.showModal()` メソッドを使用することが推奨されます。もし `<dialog>` が `open` 属性を使用して開かれた場合、そのダイアログはモーダルになりません。

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

モーダルダイアログの作成には、HTMLネイティブの `<dialog>` 要素を使用しましょう。これは、ユーザビリティとアクセシビリティの機能を提供するためで、他の要素を同様の目的で使用する場合は、それを再現しなければなりません。ダイアログを表示するには、`.showModal()` または `.show()` メソッドのうち適切な方を使用してください。独自のダイアログの実装を作成する場合は、期待される既定の動作にすべて対応していること、適切なラベル付けが行われていることを確認してください。

ダイアログを実装する際には、ユーザーのフォーカスを設定する場所として最も適切な場所を検討することが重要です。autofocus 属性を使用して初期フォーカスの配置を明確に示すと、特定のダイアログに対して最適な初期フォーカスの配置とみなされる要素に初期フォーカスが設定するのに役立ちます。ダイアログの初期フォーカスがどこに設定されるか常にわからない場合、特にダイアログのコンテンツが呼び出されたときに動的に描画される場合、必要であれば `<dialog>` 要素そのものにフォーカスを当てることが、初期フォーカスの配置として最適と判断されるかもしれません。`<dialog>` を開くための`HTMLDialogElement.showModal()`を使用すると、最初にネストしたフォーカス可能な要素にフォーカスが設定されます。

ユーザーがダイアログを閉じることができる機構を確実に用意してください。すべてのユーザーが確実にダイアログを閉じることができるようにする最も確実な方法は、閉じるための明確なボタンを記載することです。例えば、確認、キャンセル、閉じるなどのボタンが適切です。また、キーボードを使用する端末では、`Esc` キーでモーダルダイアログも閉じられると考えるのが一般的です。既定では、`showModal()` メソッドによって呼び出された `<dialog>` は、`Esc` によって閉じることができます。非モーダルダイアログでは、既定では `Esc` キーで閉じませんし、非モーダルダイアログが表すものによっては、この動作が望ましくない場合があります。複数のモーダルダイアログが開いている場合、`Esc` は最後に示されたダイアログのみを閉じるようにします。`<dialog>` を使用した場合、この動作はブラウザーによって提供されます。

`<dialog>` 要素は、ARIA の role="dialog" 属性を使用したカスタムダイアログと同じような形で、ブラウザーが提供します。`<dialog>` 要素が `showModal()` メソッドで呼び出された場合、暗黙のうちに aria-modal="true" (en-US) となり、一方 `<dialog>` が `show()` メソッド、または `open` 属性を使用して表示されたり `<dialog>` の既定の `display` を変更した場合は `[aria-modal="false"]` として表示されます。モーダルダイアログを実装する際には、`<dialog>` とそのコンテンツ以外は `inert` 属性を使って不活性化する必要があります。`<dialog>` を `HTMLDialogElement.showModal()` メソッドで使用した場合、この動作はブラウザーが提供します。

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

* `<form>` 要素は `method="dialog"` 属性が指定されていれば、ダイアログを閉じることができます。そのようなフォームが送信されると、 `returnValue` プロパティにフォーム送信するために使用されたボタンの `value` が設定されて、ダイアログが閉じられます。
* CSS の `::backdrop` 擬似要素を使用して、 `<dialog>` 要素が `HTMLDialogElement.showModal()` で表示されたときの背後のスタイルを設定することができます。例えば、モーダルダイアログの背後にある操作できないコンテンツを暗くするなどです。
例
-

### シンプルな例

以下は、非モーダル、つまりモーダルレスなダイアログを表示します。"OK" ボタンは、起動時にダイアログを閉じられるようになっています。

```html
<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>
```

#### 結果

このダイアログは `open` 属性によって開かれたので、モーダルではありません。この例では、ダイアログが閉じられたとき、それを再び開くためのメソッドは提供されていません。`HTMLDialogElement.show()` でダイアログを開く方が、論理属性の `open` 属性を切り替えるより望ましいです。

### 高度な例

この例では、"Show the dialog" ボタンをクリックすると、モーダルダイアログを開きます。ダイアログには `<select>` と 2 つの `<button>` 要素があり、これらは `type="submit"` に既定値として設定されています。`<select>` の値を更新すると、「確認」ボタンの値も更新されます。この値は `returnValue` です。`Esc`キーでダイアログが閉じられた場合、返値はありません。ダイアログが閉じられた場合、返値は「ダイアログを表示」ボタンの下に表示されます。

#### HTML

```html
<!-- フォームを含むモーダルダイアログ -->
<dialog id="favDialog">
  <form>
    <p>
      <label>
        Favorite animal:
        <select>
          <option value="default">Choose…</option>
          <option>Brine shrimp</option>
          <option>Red panda</option>
          <option>Spider monkey</option>
        </select>
      </label>
    </p>
    <div>
      <button value="cancel" formmethod="dialog">Cancel</button>
      <button id="confirmBtn" value="default">Confirm</button>
    </div>
  </form>
</dialog>
<p>
  <button id="showDialog">Show the dialog</button>
</p>
<output></output>
```

#### JavaScript

```js
const showButton = document.getElementById("showDialog");
const favDialog = document.getElementById("favDialog");
const outputBox = document.querySelector("output");
const selectEl = favDialog.querySelector("select");
const confirmBtn = favDialog.querySelector("#confirmBtn");

// "Show the dialog" ボタンで <dialog> をモーダルに開く
showButton.addEventListener("click", () => {
  favDialog.showModal();
});

// "Favorite animal" 入力で、送信ボタンの値を設定する
selectEl.addEventListener("change", (e) => {
  confirmBtn.value = selectEl.value;
});

// "Cancel" ボタンで [formmethod="dialog"] による送信を行わずにダイアログを閉じ、close イベントを発行する
favDialog.addEventListener("close", (e) => {
  outputBox.value =
    favDialog.returnValue === "default"
      ? "No return value."
      : `ReturnValue: ${favDialog.returnValue}.`; // 空文字列ではなく、既定値かどうかを調べる必要がある
});

// ［確認］ボタンが既定でフォームを送信しないようにし、`close()` メソッドでダイアログを閉じ、"close" イベントを発生させる
confirmBtn.addEventListener("click", (event) => {
  event.preventDefault(); // この偽フォームを送信しない
  favDialog.close(selectEl.value); // ここで選択ボックスの値を送る必要がある
});
```

### 結果

 このモーダルダイアログは、3 つの方法で閉じることができます。キーボードユーザーの場合、モーダルダイアログは `Esc` キーで閉じることができます。この例では、［キャンセル］ボタンは `dialog` フォームメソッドで、［確認］ボタンは `HTMLDialogElement.close()` メソッドでダイアログを閉じます。
 ［キャンセル］ボタンには `formmethod="dialog"` が含まれており、 `<form>` の既定の `GET` メソッド (`method`) を上書きします。フォームのメソッドが `dialog` の場合、フォームの状態は送信されずに保存され、ダイアログは閉じられます。
 `action` がない場合、既定の `GET` メソッドでフォームを送信すると、ページの再読み込みが発生します。JavaScript を使用して、送信を阻止し、ダイアログを閉じるために、それぞれ `event.preventDefault()` と `HTMLDialogElement.close()` メソッドを使用しています。

すべての `dialog` 要素に閉じるための仕組みを提供することが重要です。既定では、非モーダルのダイアログは `Esc` キーでは閉じませんし、ユーザーが物理キーボードにアクセスすることも想定してはいけません（たとえば、キーボードにアクセスできないタッチスクリーン端末を使用している人もいます）。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 区分化ルート |
| 許可された内容 | フローコンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親要素 | フローコンテンツを受け入れるあらゆる要素 |
| 暗黙の ARIA ロール | dialog |
| 許可された ARIA ロール | `alertdialog` |
| DOM インターフェイス | `HTMLDialogElement` |

仕様書
---

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

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

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

関連情報
----

* `close` イベント
* `cancel` イベント
* HTML フォームガイド
* `::backdrop` 擬似要素
* dialog-polyfill


<var>: 変数要素 - HTML: ハイパーテキストマークアップ言語

<var>: 変数要素
===========

**`<var>`** は HTML の要素で、数式やプログラムコード内の変数の名前を表します。挙動はブラウザーに依存しますが、通常は現在のフォントのイタリック体を使って表示されます。

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

属性
--

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

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

### 関連する要素

`<var>` がよく使われる文脈でよく使われる他の要素には、次のようなものがあります。

* `<code>`: HTML コード要素
* `<kbd>`: HTML キーボード入力要素
* `<samp>`: HTML サンプル出力要素

もし、意味的な目的ではなく装飾目的で `<var>` が誤って使用されているのを見かけた場合は、`<span>` と適切な CSS を使用するか、次のような適切な意味の要素を使用するかしてください。

* `<em>`
* `<i>`
* `<q>`
### 既定のスタイル

多くのブラウザーは `<var>` の表示時に `font-style` に `"italic"` を適用します。これは次のように CSS で上書きできます。

```css
var {
  font-style: normal;
}
```

例
-

### 基本的な例

これは、 `<var>` を使用して数式の変数名を記述した単純な例です。

```html
<p>単純な数式: <var>x</var> = <var>y</var> + 2</p>
```

#### 結果

### 既定のスタイルの上書き

CSS を使用して、 `<var>` 要素の既定のスタイルを上書きすることができます。この例では、変数名は太字の Courier フォントがあれば、それを使って表示し、なければ既定の等幅フォントにフォールバックされます。

#### CSS

```css
var {
  font:
    bold 15px "Courier",
    "Courier New",
    monospace;
}
```

#### HTML

```html
<p>
  <var>minSpeed</var> と <var>maxSpeed</var> 変数は、端末の最低速度と最高速度を分当たりの回転数 (RPM) で制御します。
</p>
```

この HTML では、2 つの変数名を `<var>` を使用して囲んでいます。

#### 結果

技術的概要
-----

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

仕様書
---

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

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

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


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

<tt>: テレタイプテキスト要素
=================

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

**`<tt>`** は HTML の要素で、ユーザーエージェントの既定の等幅フォントで表示される行内文字列を生成します。この要素は、テレタイプ、テキスト専用画面、ラインプリンターのような等幅の表示装置で表示されるテキストとしてスタイルを設定しようとするものです。

**等幅フォント** や **モノスペースフォント** は交換可能で同じ意味を持っています。これらは文字の幅がすべて同じピクセル数のフォントを説明する言葉です。

しかし、この要素は廃止されました。等幅フォントで表現する必要がある行内テキストには、より意味的に役立つ `<code>`, `<kbd>`, `<samp>`, `<var>` 要素を使用するか、中身を独自のブロックとして表現する場合は `<pre>` タグを使用してください。

**メモ:** 使用する場面に適切な意味的要素がない場合（例えば、一部のコンテンツを等幅フォントで表示する必要がある場合）は、 `<span>` 要素を使用し、 CSS を使用して好きに整形することを検討してください。 `font-family` プロパティは始めるのにいいところです。

属性
--

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

例
-

### 基本的な例

この例では、 `<tt>` を使って、ターミナルアプリケーションに入力したり出力したりしたテキストを表示します。

```html
<p>
  Enter the following at the telnet command prompt:
  <code>set localecho</code><br />

  The telnet client should display: <tt>Local Echo is on</tt>
</p>
```

#### 結果

### 既定のフォントの上書き

行う必要はありませんが、ブラウザーが許可していれば、ブラウザーの既定のフォントを上書きすることができます。 CSS を使用します。

#### CSS

```css
tt {
  font-family: "Lucida Console", "Menlo", "Monaco", "Courier", monospace;
}
```

#### HTML

```html
<p>
  Enter the following at the telnet command prompt:
  <code>set localecho</code><br />

  The telnet client should display: <tt>Local Echo is on</tt>
</p>
```

#### 結果

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

既定では `<tt>` 要素はブラウザーの既定の等幅フォントを使って表示されます。前述の既定のフォントの上書きにある通り、 CSS で `tt セレクターを使用した規則を作成することで、これを上書きすることができます。

**メモ:** 既定の等幅フォントの設定を変更するユーザー設定が CSS よりも優先することがあります。

この要素は HTML 4.01 では公式には非推奨にされませんでしたが、使用は避けて意味的要素や CSS を使用するとされていました。 `<tt>` 要素は HTML 5 で廃止されました。

技術的概要
-----

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

仕様書
---

| Specification |
| --- |
| HTML Standard # tt |

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

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

関連情報
----

* 意味的な `<code>`, `<var>`, `<kbd>`, `<samp>` 要素
* `<pre>` 要素: 整形済みテキストブロックを表示する要素


<param>: オブジェクト引数要素 - HTML: ハイパーテキストマークアップ言語

<param>: オブジェクト引数要素
===================

**`<param>`** は HTML の要素で、`<object>` 要素の引数を定義します。

属性
--

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

`name`
非推奨

引数の名称。

`value`
非推奨

引数の値を指定します。

`type`
非推奨

`valuetype` が `ref` に設定されている場合にのみ指定可能。`value` の値で指定された URI に存在するオブジェクトの MIME タイプを指定します。

`valuetype`
非推奨

`value` 属性の型を指定します。指定可能な値は以下の通りです。

* `data`: 既定値。値は文字列としてオブジェクトの実装に渡されます。
* `ref`: 値は、実行時の値が格納されているリソースへの URI です。
* `object`: 同一文書内の他の `<object>` 要素の ID です。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 | 空要素であるため開始タグは必須、また終了タグを置いてはなりません。 |
| 許可されている親要素 | `<object>` の子として、他のフローコンテンツより前に配置可能。 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLParamElement` |

仕様書
---

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

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

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

関連情報
----

* `<object>`


<ol>: 順序付きリスト要素 - HTML: ハイパーテキストマークアップ言語

<ol>: 順序付きリスト要素
===============

**`<ol>`** は HTML の要素で、項目の順序付きリストを表します。ふつうは番号付きのリストとして表示されます。

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

属性
--

この要素はグローバル属性も受け付けます。

`reversed`

論理属性で、リストの項目が逆順で指定されていることを指定します。項目は大きい方から小さい方へ番号付けされます。

`start`

整数値を持つ属性で、リスト項目の序数の開始値を指定します。この値は、番号付けの種類が文字やローマ数字であっても、常にアラビア数字 (1, 2, 3, など) で指定します。例えば、 "d" の文字や "iv" のローマ数字から始める場合は、 `start="4"` を使用してください。

`type`

番号付けの種類を設定します。

* `a` は、英小文字を示します
* `A` は、英大文字を示します
* `i` は、小文字のローマ数字を示します
* `I` は、大文字のローマ数字を示します
* `1` は、数字を示します (既定値)

指定された種類は、異なる `type` 属性が内部の `<li>` 要素で使用されない限り、リスト全体に使用されます。

**メモ:** （項目が番号や文字で参照される法律文書や技術文書のように）リスト番号の種類に重要性がない限り、代わりに CSS の `list-style-type` プロパティを使用してください。

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

ふつう、順序付きリストの項目は、先頭に数字や文字などのマーカーが表示されます。

`<ol>` 要素と `<ul>` 要素は、必要なだけ深く入れ子にすることができ、 `<ol>` と `<ul>` を好きなだけ変更することもできます。

`<ol>` と `<ul>` は、どちらも項目のリストを表します。両者の違いは、 `<ol>` 要素では順序に意味があることです。例えば次のようなものです。

* レシピの手順
* 道順
* 栄養成分表示ラベルにおける成分の降順の一覧

どちらのリストを使用するか判断するには、リスト項目の順序を変更してみてください。意味が変わるようであれば `<ol>` 要素を使用してください。そうでない場合は、 `<ul>` 要素を使用することができます。

例
-

### 単純な例

```html
<ol>
  <li>Fee</li>
  <li>Fi</li>
  <li>Fo</li>
  <li>Fum</li>
</ol>
```

#### 結果

### ローマ数字の使用

```html
<ol type="i">
  <li>Introduction</li>
  <li>List of Grievances</li>
  <li>Conclusion</li>
</ol>
```

#### 結果

### start 属性の使用

```html
<p>Finishing places of contestants not in the winners' circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin' Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>
```

#### 結果

### 入れ子のリスト

```html
<ol>
  <li>first item</li>
  <li>
    second item
    <!-- ここには終了タグ </li> はありません -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>
  <!-- 終了タグ </li> はここにあります -->
  <li>third item</li>
</ol>
```

#### 結果

### 順序付きリストの中の順序なしリスト

```html
<ol>
  <li>first item</li>
  <li>
    second item
    <!-- ここには終了タグ </li> はありません -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>
  <!-- 終了タグ </li> はここにあります -->
  <li>third item</li>
</ol>
```

#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ。また、`<ol>` 要素の子が少なくとも 1 個の `<li>` 要素を包含する場合は、知覚可能コンテンツ。 |
| 許可されている内容 | 0 個以上の `<li>`, `<script>`, `<template>` の各要素。 |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | `list` |
| 許可されている ARIA ロール | `directory (en-US)`, `group`,
 `listbox`, `menu (en-US)`,
 `menubar (en-US)`, `none (en-US)`,
 `presentation`,
 `radiogroup (en-US)`, `tablist (en-US)`,
 `toolbar`, `tree (en-US)` |
| DOM インターフェイス | `HTMLOListElement` |

仕様書
---

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

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

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

関連情報
----

* 他のリスト関連の HTML 要素: `<ul>`、 `<li>`、 `<menu>`
* `<ol>` 要素のスタイル付けに役立つ CSS プロパティ:
    + `list-style` プロパティは、序数の表示方法を選ぶのに便利です。
    + CSS カウンターは、複雑な入れ子のリストを扱うのに便利です。
    + `line-height` プロパティは、非推奨の `compact` 属性をシミュレートするのに役立ちます。
    + `margin` プロパティは、リストの字下げを制御するのに役立ちます。


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

<fieldset>: フィールドセット要素
======================

**`<fieldset>`** は HTML の要素で、ウェブフォーム内のラベル (`<label>`) などのようにいくつかのコントロールをグループ化するために使用します。

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

上記の例にあるように、`<fieldset>` 要素は HTML フォームの一部をグループ化し、内側の `<legend>` 要素で `<fieldset>` のキャプションを提供します。いくつかの属性を取りますが、特に重要なものとして `form` は、同じページの `<form>` の `id` を含むことができ、`<fieldset>` が `<form>` の中になくてもその一部として扱うことができたり、`disabled` は、`<fieldset>` およびその中身を一度に無効にすることができたりします。

属性
--

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

`disabled`

この論理属性が設定されている場合、`<fieldset>` の子孫要素として配置したフォームコントロールはすべて無効になり、つまり編集したり `<form>` と一緒に送信したりすることができなくなります。マウスクリックやフォーカス関連のイベントのような閲覧イベントを受け取らなくなります。既定では、ブラウザーはそのようなコントロールを灰色で表示します。なお、子孫の `<legend>` 要素内のフォーム要素は無効になりません。

`form`

`<form>` 要素の `id` 属性を指定し、たとえ `<fieldset>` 要素がその中になくても、その一部とすることができます。なお、 `<fieldset>` 内の `<input>` 要素をフォームに関連付けたい場合は、それらの要素に直接 `form` 属性を使用する必要があります。どの要素がフォームに関連付けられているかは、 JavaScript で `HTMLFormElement.elements` を使用して確認することができます。

`name`

グループに関連付けられた名前です。

**メモ:** fieldset 要素自身のラベルの役割は、その最初の子要素として配置した `<legend>` 要素が担います。

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

`<fieldset>` には、スタイル付けの特殊な考慮事項がいくつかあります。

`display` の値は既定で `block` であり、ブロック整形コンテキストを確立します。 `<fieldset>` がインラインレベルの `display` の値でスタイル付けされた場合は `inline-block` として動作し、そうでなければ `block` として動作します。既定では、コンテンツを囲む `2px` `groove` の境界線があり、少量の既定のパディングがあります。要素は既定で `min-inline-size: min-content` を持ちます。

`<legend>` が存在する場合は、`block-start` 境界線の上に配置されます。 `<legend>` は縮小折り返しであり、整形コンテキストを確立します。`display` の値はブロック的です。（例えば、`display: inline` は `block` として動作します。）

`<fieldset>` の内容を保持する無名のボックスが生成され、`<fieldset>` から特定のプロパティを継承します。`<fieldset>` が `display: grid` または `display: inline-grid` でスタイル付けされていた場合、無名ボックスはグリッド整形コンテキストになり、`<fieldset>` が `display: flex` または `display: inline-flex` でスタイル付けされていた場合、無名ボックスはフレックス整形コンテキストになります。それ以外の場合はブロック整形コンテキストになります。

`<fieldset>` および `<legend>` に対しては、ページデザインに合うあらゆる方法で気軽にスタイル付けしてください。

例
-

### 単純なフィールドセット

この例は、本当に単純な `<fieldset>` の例で、 `<legend>` および 1 つのコントールが中にあります。

```html
<form action="#">
  <fieldset>
    <legend>Do you agree?</legend>
    <input type="checkbox" id="chbx" name="agree" value="Yes!" />
    <label for="chbx">I agree</label>
  </fieldset>
</form>
```

#### 結果

### 無効化されたフィールドセット

この例は無効化した `<fieldset>` で、二つのコントロールが中にあります。なお、両方のコントロールは無効化した `<fieldset>` の中にあるので、無効になります。

```html
<form action="#">
  <fieldset disabled>
    <legend>Disabled login fieldset</legend>
    <div>
      <label for="name">Name: </label>
      <input type="text" id="name" value="Chris" />
    </div>
    <div>
      <label for="pwd">Archetype: </label>
      <input type="password" id="pwd" value="Wookie" />
    </div>
  </fieldset>
</form>
```

#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 区分化ルート,
 リスト化,
 フォーム関連要素, 知覚可能コンテンツ
  |
| 許可されている内容 |
 任意の `<legend>`
 要素と、それに続くフローコンテンツ
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | `group` |
| 許可されている ARIA ロール | `radiogroup` (en-US),
 `presentation`, `none` (en-US) |
| DOM インターフェイス | `HTMLFieldSetElement` |

仕様書
---

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

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

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

関連情報
----

* `<legend>` 要素
* `<input>` 要素
* `<label>` 要素
* `<form>` 要素


<dfn>: 定義要素 - HTML: ハイパーテキストマークアップ言語

<dfn>: 定義要素
===========

**`<dfn>`** は HTML の要素で、定義句や文の文脈の中で定義している用語を示すために用いられます。祖先である `<p>` 要素、`<dt>`/`<dd>` の組み合わせ、または直近の `<section>` 要素が用語の定義とみなされます。

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

属性
--

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

`title` 属性は後述のとおり、通常と異なる特別な意味合いを持ちます。

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

`<dfn>` 要素の使用については、完全に明らかになっていない側面がいくつかあります。ここでそれらを説明します。

### 定義される用語の指定

定義される用語は、以下の規則に従います。

1. `<dfn>` 要素に `title` 属性がある場合、 `title` 属性の値が定義される用語とみなされます。その要素の中の文字列もその用語でなければなりませんが、略語（おそらく `<abbr>` を使用）や、用語のその他の形でも構いません。
2. `<dfn>` が単一の子要素を持ち、自分自身には何も文字列がなく、かつその子要素が `title` 属性を持つ `<abbr>` 要素である場合は、 `<abbr>` 要素の `title` の値が定義する用語です。
3. それ以外では、 `<dfn>` 要素の文字列コンテンツが定義される用語です。これは以下の最初の例で示します。

**メモ:** もし `<dfn>` 要素に `title` 属性があれば、それが定義する用語であり、それ以外の文字列ではありません。

### `<dfn>` 要素へのリンク

`<dfn>` 要素に `id` 属性をつけた場合は、 `<a>` 要素を使用してそこにリンクすることができます。用語の使用時にはそのようなリンクを使用して、用語のリンクをクリックすることで読者が用語の定義にすばやく移動できるようにしてください。

これは以下の定義へのリンクの例で示します。

例
-

様々な利用シナリオの例をいくつか見てみましょう。

### 基本的な用語の識別

この例は、定義の中の用語の位置を識別するために素の `<dfn>` 要素を使用しています。

#### HTML

```html
<p>
  The <strong>HTML Definition element (<dfn><dfn></dfn>)</strong> is used
  to indicate the term being defined within the context of a definition phrase
  or sentence.
</p>
```

`<dfn>` 要素に `title` がないので、 `<dfn>` 要素自身の文字列コンテンツが定義される用語として使用されます。

#### 結果

### 定義へのリンク

定義へのリンクを追加するには、いつも通りの方法で `<a>` 要素を使ってリンクを作成します。

#### HTML

```html
<p>
  The
  <strong>HTML Definition element (<dfn id="definition-dfn"><dfn></dfn>)</strong>
  is used to indicate the term being defined within the context of a definition
  phrase or sentence.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine
  voluptatem vocant. Confecta res esset. Duo Reges: constructio interrete.
  Scrupulum, inquam, abeunti;
</p>

<p>
  Because of all of that, we decided to use the
  <code><a href="#definition-dfn"><dfn></a></code> element for this
  project.
</p>
```

ここで `id` 属性の `"definition-dfn"` の値をリンク先として使用して、定義を見ることができます。その後で、 `<a>` の `href` 属性を `"#definition-dfn"` に設定して、定義に戻るリンクを設定します。

#### 結果

### 略語と定義の両方の使用

場合によっては、用語を定義する際に略語を使用したくなる場合もあるでしょう。これは `<dfn>` と `<abbr>` 要素を組み合わせて、このように実現できます。

#### HTML

```html
<p>
  The <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn> is among the
  most productive scientific instruments ever constructed. It has been in orbit
  for over 20 years, scanning the sky and returning data and photographs of
  unprecedented quality and detail.
</p>

<p>
  Indeed, the <abbr title="Hubble Space Telescope">HST</abbr> has arguably done
  more to advance science than any device ever built.
</p>
```

`<abbr>` 要素が `<dfn>` の中で入れ子になっています。前者は用語が略語 ("HST") であることを示し、完全な用語 ("Hubble Space Telescope") を `title` 属性で定義します。後者は略語が定義される用語であることを表します。

#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 記述コンテンツ, 知覚可能コンテンツ
  |
| 許可されている内容 | 記述コンテンツ、ただし `<dfn>` 要素を子孫にしてはいけません。 |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | `term` |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

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

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

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

関連情報
----

* 定義リスト関連要素: `<dl>`, `<dt>`, `<dd>`
* `<abbr>`


<map>: イメージマップ要素 - HTML: ハイパーテキストマークアップ言語

<map>: イメージマップ要素
================

**`<map>`** は HTML の要素で、`<area>` 要素とともにイメージマップ（クリック可能なリンク領域）を定義するために使用します。

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

属性
--

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

`name`

`name` 属性は、マップを参照できるようにするための名前を指定します。この属性は必ず存在する必要があり、空白文字を含まない空でない値を持たなければなりません。 `name` 属性の値は、同じ文書内の他の `<map>` 要素の `name` 属性の値と同じであってはいけません。もし `id` 属性も指定されている場合は、両方の属性が同じ値でなければなりません。

例
-

### 2 つの領域があるイメージマップ

左側のオウムをクリックすると JavaScript に、右のオウムをクリックすると CSS に飛びます。

#### HTML

```html
<!-- Photo by Juliana e Mariana Amorim on Unsplash -->
<map name="primary">
  <area
 shape="circle"
 coords="75,75,75"
 href="https://developer.mozilla.org/docs/Web/JavaScript"
 target="\_blank"
 alt="JavaScript" />
  <area
 shape="circle"
 coords="275,75,75"
 href="https://developer.mozilla.org/docs/Web/CSS"
 target="\_blank"
 alt="CSS" />
</map>
<img
 usemap="#primary"
 src="parrots.jpg"
 alt="350 x 150 picture of two parrots" />
```

#### 結果

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* `<a>`
* `<area>`


<span>: コンテンツ区間要素 - HTML: ハイパーテキストマークアップ言語

<span>: コンテンツ区間要素
=================

**`<span>`** は HTML の要素で、記述コンテンツの汎用的なインラインコンテナーであり、何かを表すものではありません。スタイル付けのため（`class` または `id` 属性を使用して）、または `lang` のような属性値を共有したりするために要素をグループ化する用途で使用することができます。他に適切な意味的要素がない時にのみ使用してください。 `<span>` は `<div>` 要素ととても似ていますが、 `<div>` がブロックレベルの要素であるのに対し、 `<span>` はインラインレベルの要素です。

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

属性
--

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

例
-

### 例 1

#### HTML

```html
<p><span>Some text</span></p>
```

#### 結果

### 例 2

#### HTML

```html
<li>
  <span>
    <a href="portfolio.html" target="\_blank">See my portfolio</a>
  </span>
</li>
```

#### CSS

```css
li span {
  background: gold;
}
```

#### 結果

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* HTML の `<div>` 要素


<dir>: ディレクトリー要素 - HTML: ハイパーテキストマークアップ言語

<dir>: ディレクトリー要素
================

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

**`<dir>`** は HTML の要素で、ユーザーエージェントが適用するスタイルやアイコンを用いて表示する、ファイルやフォルダーのディレクトリーのコンテナとして使われます。この要素は廃止されたので使わないで下さい。代わりに、ファイル一覧を含め、一覧には `<ul>` 要素を使用してください。

**警告:** この要素は使用しないでください。この要素は HTML の初期の仕様で定義されていましたが、 HTML 4 で非推奨要素に指定され、完全に廃止されました。**この要素に対応している主要なブラウザーはありません。**

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

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

属性
--

他のすべての HTML 要素と同様、この要素はグローバル属性に対応しています。

`compact`
非推奨

これは論理属性で、コンパクトなスタイルでディレクトリー一覧をレンダリングするようヒントを与えるものです。この属性の解釈はユーザーエージェントに委ねられ、また全てのブラウザーで動作するものでもありません。

仕様書
---

現在の仕様書には含まれていません。

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

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

関連情報
----

* その他のリストに関する HTML 要素: `<ol>`, `<ul>`, `<li>`, `<menu>`
* `<dir>` 要素を整形するのに特に有用な CSS プロパティ:
    + `list-style` は行頭記号の表示方法を選択するのに便利です。
    + CSS カウンターは、複雑な入れ子リストの扱いに便利です。
    + `line-height` プロパティは、非推奨の `compact` 属性の代替になります。
    + `margin` プロパティは、リストのインデントを制御するのに便利です。


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

<mark>: テキストマーク要素
=================

**`<mark>`** は HTML の要素で、周囲の文脈での関連性によって参照したり表記したりする目的でマーク付けされたり強調表示されたりするテキストを表します。

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

属性
--

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

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

`<mark>` のよくある利用方法は以下のようなものです。

* 引用 (`<q>`) またはブロック引用 (`<blockquote>`) の中で使用される場合は、ふつう原文で特にマークされていなくても特別な関心事となる文字列、または原文の筆者が特に重要だと考えていなかったことでも、特別に精査が必要な部分を示します。本の中で興味のある部分が見つかったときに、蛍光ペンを使ってマークするようなものだと考えてください。
* それ以外に、 `<mark>` はユーザーの現在の行動に関する文書中の部分を示します。これは例えば、検索操作で検索された語を示す場合などに使用されます。
* `<mark>` を（ソースコードなどの）構文の強調には使用しないで下さい。`<span>` 要素とそれに適用する適切な CSS を使用してください。

**メモ:** `<mark>` 要素と `<strong>` 要素を混同しないよう注意してください。 `<mark>` は*関連性*のあるコンテンツを表すために使用されますが、 `<strong>` は*重要性*のある文字列の区間を表します。

例
-

### 関心のある文字列のマーク

最初の例では `<mark>` 要素を使用して、引用の中でユーザーに特定の関心を引く部分の文字列をマークしています。

```html
<blockquote>
  It is a period of civil war. Rebel spaceships, striking from a hidden base,
  have won their first victory against the evil Galactic Empire. During the
  battle, <mark>Rebel spies managed to steal secret plans</mark> to the Empire's
  ultimate weapon, the DEATH STAR, an armored space station with enough power to
  destroy an entire planet.
</blockquote>
```

出力結果は以下のようになります。

### 文脈に依存する部分の識別

この例では `<mark>` を使用して一節の中の検索結果をマークしています。

```html
<p>
  It is a dark time for the Rebellion. Although the Death Star has been
  destroyed, <mark class="match">Imperial</mark> troops have driven the Rebel
  forces from their hidden base and pursued them across the galaxy.
</p>

<p>
  Evading the dreaded <mark class="match">Imperial</mark> Starfleet, a group of
  freedom fighters led by Luke Skywalker has established a new secret base on
  the remote ice world of Hoth.
</p>
```

検索結果に対する `<mark>` の使用を他の使い方と区別しやすくするように、この例ではそれぞれの一致部分に `"match"` カスタムクラスを適用しています。

結果は以下のようになります。

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

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

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

mark::before {
  content: " [強調開始] ";
}

mark::after {
  content: " [強調終了] ";
}
```

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

* Short note on making your mark (more accessible) | The Paciello Group
* Tweaking Text Level Styles | Adrian Roselli
技術的概要
-----

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

仕様書
---

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

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

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


<progress>: 進捗インジケーター要素 - HTML: ハイパーテキストマークアップ言語

<progress>: 進捗インジケーター要素
=======================

**`<progress>`** は HTML の要素で、タスクの進捗状況を表示します。ふつうはプログレスバーとして表示されます。

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

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、
 記述コンテンツ、ラベル付け可能コンテンツ、
 知覚可能コンテンツ |
| 許可されている内容 | 記述コンテンツ。ただし、子要素に `<progress>` 要素を含めてはならない。 |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツ
 を受け入れるすべての要素
  |
| 暗黙の ARIA ロール | `progressbar` |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLProgressElement` |

属性
--

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

`max`

この属性は、`progress` 要素で示すタスクで必要とする総作業量を設定します。`max` 属性を指定する場合は、値を `0` より大きい有効な浮動小数点数値にしなければなりません。既定値は `1` です。

`value`

この属性は、タスクの進捗状況を設定します。値は `0` から `max` までの間、または `max` を省略する場合は `0` から `1` までの間の、有効な浮動小数点数値であることが必要です。`value` 属性がない場合は、プログレスバーは不定、タスクは処理中であるものの完了までが予想できない状態になります。

**メモ:** `<meter>` 要素とは異なり、最小値は常に 0 で、`min` 属性は `<progress>` 要素では許可されていません。

**メモ:** `:indeterminate` 擬似クラスは、不定状態のプログレスバーに一致します。プログレスバーを値がある状態から不定の状態に変更するには、 `element.removeAttribute('value')` で value 属性を削除しなければなりません。

例
-

```html
<progress value="70" max="100">70 %</progress>
```

### 結果

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

### ラベル付け

`<progress>` を使用する場合、ふつうはアクセシビリティのあるラベルを提供しましょう。ARIA 標準のラベル付け属性 `aria-labelledby` や `aria-label` (en-US) を `role="progressbar"` の要素と同様に使用できますが、`<progress>` を用いる場合、代わりに `<label>` 要素を使用することができます。

**メモ:** 要素のタグの間に配置されたテキストはアクセシビリティラベルではありません。この要素に対応していない古いブラウザー用の代替用としてのみ推奨されます。

#### 例

```html
<label>
  文書をアップロード中: <progress value="70" max="100">70 %</progress>
</label>

<!-- OR -->
<br />

<label for="progress-bar">文書をアップロード中</label>
<progress id="progress-bar" value="70" max="100">70 %</progress>
```

#### 結果

### 特定の領域を記述

`<progress>` 要素がページのある節の読み込みの進捗を表している場合、`aria-describedby` を使用して状況を指し、更新中の節に `aria-busy="true"` (en-US) を設定し、読み込みが完了したら `aria-busy` 属性を解除してください。

#### 例

```html
<div aria-busy="true" aria-describedby="progress-bar">
  <!-- content is for this region is loading -->
</div>

<!-- ... -->

<progress id="progress-bar" aria-label="Content loading…"></progress>
```

##### 結果

仕様書
---

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

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

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

関連情報
----

* `<meter>`
* `:indeterminate`
* `-moz-orient`
* `::-moz-progress-bar`
* `::-webkit-progress-bar` (en-US)
* `::-webkit-progress-value`
* `::-webkit-progress-inner-element` (en-US)


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

<font>
======

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

**`<font>`** は HTML の要素で、その内容のフォントサイズ、文字色、使用フォントを定義します。

**警告:** この要素を使用しないでください。 CSS のフォントのプロパティを使用してテキストにスタイル付けしてください。

属性
--

他のすべての HTML 要素と同様に、この要素は グローバル属性に対応しています。

`color`
非推奨

色名または #RRGGBB 形式のカラーコードでテキストの色を指定します。

`face`
非推奨

フォント名を 1 つ、またはカンマで区切って複数指定します。複数記述した場合は、表示可能なフォントの内で最初のものが優先されます。指定したフォントが全てローカルのシステム内にインストールされていない場合は、システムで設定されている等幅フォントかプロポーショナルフォントが適用されます。

`size`
非推奨

フォントサイズとして、数値または相対値キーワードを指定します。数値の場合の範囲は `1` から `7` で、`1` が最小、`3` が初期値となります。 `+2`、`-3` の様に、初期値である `3` を基準とする相対値で記述することも可能です。

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

この要素は `HTMLFontElement` (en-US) インターフェイスを実装しています。

仕様書
---

| Specification |
| --- |
| HTML Standard # font |

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

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


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

<xmp>
=====

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

概要
--

**`<xmp>`** は HTML の要素で、その開始タグから終了タグまでの間のタグを HTML として解釈せず、等幅フォントでレンダリングします。 HTML2 仕様書では、これを 1 行当たり 80 文字を表示するのに充分な幅でレンダリングするよう推奨しています。

**メモ:** この要素は使用しないでください。

* HTML3.2 から非推奨要素となっており、また一貫した実装も存在しません。そして HTML5 の言語からは完全に削除されています。
* 代わりに `<pre>` 要素か、意味的に適切であれば `<code>` 要素を使用してください。なお、マークアップとして解釈されないようにするには、 '`<`' の文字を '`<`' としてエスケープする必要があります。
* あらゆる要素で等幅フォントを使用することができます。 CSS のスタイルで `monospace` を `font-family` プロパティの一般的なフォントの値として使用してください。

属性
--

この要素は、すべての要素が持つグローバル属性以外の属性を持ちません。

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # xmp |

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

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

関連情報
----

* 代替となり得る要素: `<pre>` 要素、 `<code>` 要素
* `<plaintext>` 要素も `<xmp>` と似ていますが、同様に廃止されています。


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

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

**`<picture>`** は HTML の要素で、0 個以上の `<source>` 要素と 1 つの `<img>` 要素を含み、様々な画面や端末の条件に応じた画像を提供します。

ブラウザーは複数の `<source>` 子要素を検討し、その中から最も適切なものを選択します。適切なものがない場合や、ブラウザーが `<picture>` 要素に対応してない場合、 `<img>` 要素の `src` 属性で指定された URL が選択されます。選択された画像は `<img>` 要素が占有する領域に表示されます。

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

どの URL を読み込むかを選択するには、ユーザーエージェントはそれぞれの `<source>` 要素の `srcset`, `media`, `type` 属性を調べて、現在のページのレイアウトや表示装置の能力に最も合う画像を検討します。

`<img>` 要素は 2 つの役割を担います。

1. 画像の寸法やその他の属性と、表示方法を記述します。
2. `<source>` 要素で利用可能な画像を提供できなかった場合の代替策を提供します。

`<picture>` をよく使う場面は以下の通りです。

* **アートディレクション**。様々な `media` の条件に合わせて画像を切り抜いたり変更したりする (例えば、小さな画面では、詳細すぎない、より簡単な版の画像を読み込むなど)。
* 特定の形式に対応していないブラウザーに対して、**代替画像形式を提供する**。

**メモ:** 例えば、AVIF や WEBP と言った新しい形式には多くの利点がありますが、ブラウザーが対応していない可能性があります。対応している画像形式のリストは、画像ファイルの種類と形式ガイドにあります。
* 見る人の画面に最も適合する画像を読み込むことで、**通信帯域を節約しページの読み込みをより速くする**。

DPI の高い（高解像度の）ディスプレイのために高解像度版の画像を提供する場合は、代わりに `srcset` 属性を `<img>` に使用してください。これによってブラウザーはデータ節約モードでは低解像度版を選択することができ、 `media` 条件を明示的に書かなくてもよくなります。

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ, 記述コンテンツ, 埋め込みコンテンツ |
| 許可されている内容 |
 0 個以上の `<source>` 要素、その後に 1 個の
 `<img>` 要素、任意でスクリプト対応要素と混在。
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 埋め込みコンテンツを含むことができるすべての要素。 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLPictureElement` |

属性
--

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

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

`object-position` プロパティを使用して、要素の枠内で画像の位置を調整したり、 `object-fit` プロパティを使用して、枠内に合わせるための画像の寸法を変更する方法を制御したりすることができます。

**メモ:** これらのプロパティは `<picture>` 要素**ではなく**、子の `<img>` 要素に用いてください。

例
-

これらの例は、 `<source>` 要素の様々な属性がどのように `<picture>` 内の画像の選択を変更するかを示しています。

### media 属性

`media` 属性はユーザーエージェントがそれぞれの `<source>` 要素を評価するメディア条件を（メディアクエリーと同様に）指定します。

`<source>` のメディア条件が `false` と評価された場合、その要素はスキップされ、`<picture>` 内の次の要素が評価されます。

```html
<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>
```

### srcset 属性

`srcset` 属性は、*寸法に基づいた*利用可能な画像のリストを提供するために使用します。

これは画像記述子のカンマ区切りのリストで構成されます。それぞれの画像記述子は画像の URL と、次の*いずれか*で構成されます。

* *幅記述子* に続いて `w` を書きます（`300w` など）
 *または*
* *ピクセル密度記述子* に続いて `x` を書き (`2x` など)、高 DPI 画面の高解像度画像を提供します。

```html
<picture>
  <source srcset="logo-768.png, logo-768-1.5x.png 1.5x" />
  <img src="logo-320.png" alt="logo" />
</picture>
```

### type 属性

`type` 属性は、 `<source>` 要素の `srcset` 属性で与えられるリソース URL の MIME タイプを指定します。ユーザーエージェントが指定されたタイプに対応していない場合、その `<source>` 要素はスキップされます。

```html
<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="photo" />
</picture>
```

仕様書
---

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

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

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

関連情報
----

* `<img>` 要素
* `<source>` 要素
* フレーム内の画像の位置や寸法の設定: `object-position` および `object-fit`
* 画像ファイルの種類と形式ガイド