recursal/MDN huggingface dataset:
<wbr>: 改行可能要素
=============

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

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

属性
--

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

メモ
--

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

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

例
-

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


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

### 結果

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* `overflow-wrap`
* `word-break`
* `hyphens`
* `<br>` 要素
<optgroup>: 選択肢グループ要素
=====================

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

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

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

属性
--

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

`disabled`

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

`label`

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

例
-


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

### 結果

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* 他のフォーム関連要素: `<form>`, `<legend>`, `<label>`, `<button>`, `<select>`, `<datalist>`, `<option>`, `<fieldset>`, `<textarea>`, `<input>`, `<output>`, `<progress>`, `<meter>`
<blockquote>: ブロック引用要素
======================

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

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

属性
--

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

`cite`

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

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

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

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

例
-

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


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


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

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

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

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

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

属性
--

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

例
-

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


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

### 結果

補足
--

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

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

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* `<samp>`
* `<kbd>`
* `<var>`
* `<pre>`
<em>: 強調要素
==========

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

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

属性
--

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

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

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

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

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

### <i> と <em>

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

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

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

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

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

例
-

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


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

### 結果

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

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

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

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

属性
--

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

`height`

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

`moz-opaque` 
Non-standard

非推奨

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

`width`

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

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

### 代替コンテンツ

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

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

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

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

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

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

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

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

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

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

例
-

### HTML

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


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

### JavaScript

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


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

### 結果

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

### 代替コンテンツ

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

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

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

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

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

関連情報
----

* MDN のキャンバスポータル
* キャンバスチュートリアル
* キャンバス関連のデモ
* キャンバス早見表 (2009)
* キャンバス早見表 (pdf) (2015)
* キャンバス早見表 (pdf)
* Apple によるキャンバスの紹介 (2013)
<body>: 文書本体要素
==============

**`<body>`** は HTML の要素で、 HTML 文書のコンテンツを示す要素です。 `<body>` 要素は文書中に一つだけ配置できます。

|  |  |
| --- | --- |
| コンテンツカテゴリー | 区分化ルート |
| 許可されている内容 | フローコンテンツ |
| タグの省略 | 開始タグは、内容の先頭が空白文字、コメント、 `<script>` 要素、 `<style>` 要素でない場合は省略可能です。終了タグは、 `<body>` 要素に内容または開始タグがあり、かつ、直後のノードがコメントでない場合は省略可能です。 |
| 許可されている親要素 | `<html>` 要素の子要素でなければなりません。 |
| 暗黙の ARIA ロール | `generic (en-US)` |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLBodyElement`* `<body>` 要素は `HTMLBodyElement` インターフェイスを提供します。
* `<body>` 要素は `document.body` プロパティからアクセス可能です。
 |

属性
--

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

`alink` 
非推奨

ハイパーリンクの選択時の文字色です。**この属性を使用しないでください。代わりに CSS の `color` プロパティを `:active` 擬似クラスで使用してください。**

`background` 
非推奨

背景画像の URI です。**この属性を使用しないでください。代わりに CSS の `background` プロパティを使用してください。**

`bgcolor` 
非推奨

文書の背景色です。**この属性を使用しないでください。代わりに CSS の `background-color` プロパティを使用してください。**

`bottommargin` 
非推奨

body の下マージンです。**この属性を使用しないでください。代わりに CSS の `margin-bottom` プロパティを使用してください。**

`leftmargin` 
非推奨

body の左マージンです。**この属性を使用しないでください。代わりに CSS の `margin-left` プロパティを使用してください。**

`link` 
非推奨

未訪問のハイパーリンクの文字色です。**この属性を使用しないでください。代わりに CSS の `color` プロパティを `:link` 擬似クラスで使用してください。**

`onafterprint`

ユーザーによる印刷データ作成直後に呼び出す関数

`onbeforeprint`

ユーザーによるブラウザーへの印刷指示直後に呼び出す関数

`onbeforeunload`

文書のアンロードの直前に呼び出す関数

`onblur`

文書からフォーカスが外されたときに呼び出す関数

`onerror`

文書を正常にロードできなかった際に呼び出す関数

`onfocus`

文書にフォーカスが当たった際に呼び出す関数

`onhashchange`

文書の現在のアドレスのフラグメント識別子 (ハッシュ文字 `'#'` から始まる部分) が変更された際に呼び出す関数

`onlanguagechange`

言語が変更された際に呼び出す関数

`onload`

文書の読み込み完了時に呼び出す関数

`onmessage`

文書が API からメッセージを受信した際に呼び出す関数

`onoffline`

ネットワークとの交信が不能になった際に呼び出す関数

`ononline`

ネットワークとの交信が発生あるいは回復した際に呼び出す関数

`onpopstate`

ユーザーによるセッション履歴のナビゲート時に呼び出す関数

`onredo`

ユーザーがトランザクション履歴を元に戻した際に呼び出す関数

`onresize`

文書を表示するウィンドウがリサイズされた際に呼び出す関数

`onstorage`

ストレージ領域が変化した際に呼び出す関数

`onundo`

ユーザーがトランザクション履歴をさかのぼることによって後方へ移動した際に呼び出す関数

`onunload`

文書からの離脱時に呼び出す関数

`rightmargin` 
非推奨

body の右マージンです。**この属性を使用しないでください。代わりに CSS の `margin-right` プロパティを使用してください。**

`text` 
非推奨

基本文字色です。**この属性を使用しないでください。代わりに CSS の `color` プロパティを使用してください。**

`topmargin` 
非推奨

body の上マージンです。**この属性を使用しないでください。代わりに CSS の `margin-top` プロパティを使用してください。**

`vlink` 
非推奨

訪問済みのハイパーリンクの文字色です。**この属性を使用しないでください。代わりに CSS の `:visited` 擬似クラスで `color` プロパティを使用してください。**

例
-


```html
<html lang="en">
  <head>
    <title>Document title</title>
  </head>
  <body>
    <p>
      The <code>&lt;body&gt;</code> HTML element represents the content of an
      HTML document. There can be only one <code>&lt;body&gt;</code> element in
      a document.
    </p>
  </body>
</html>
```

### 結果

仕様書
---

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

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

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

関連情報
----

* `<html>`
* `<head>`
<del>: 削除済みテキスト要素
=================

**`<del>`** は HTML の要素で、文書から削除された文字列の範囲を表します。これは例えば、「変更の追跡」や、ソースコードの差分情報を描画するときに使用することができます。`<ins>` 要素は逆の目的に、文書に追加された文字列を示すために用いることができます。

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

一般的にこの要素は（必ずではありませんが）打ち消し線のスタイルを伴って描画されます。

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

属性
--

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

`cite`

変更についての説明を記したリソース（例えば、議事録など）への URI を示す。

`datetime`

この属性は変更日時を示し、有効な日付文字列と任意の時刻文字列でなくてはなりません。値を時刻および日付の文字列として解釈できない場合は、要素に関連付けられたタイムスタンプはないものと解釈されます。日付のない文字列の書式については、日付の文字列を参照してください。日付と時刻の両方を含んだ文字列の書式は、地方時の日付と時刻の文字列にあります。

例
-


```html
<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<del><p>This paragraph has been deleted.</p></del>
```

### 結果

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

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


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

del::before {
  content: " [削除開始] ";
}

del::after {
  content: " [削除終了] ";
}
```


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

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

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

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

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

関連情報
----

* テキストへの挿入を示す `<ins>` 要素
* テキストの削除とは異なる抹消を表すための `
` 要素
<caption>: 表キャプション要素
====================

**`<caption>`** は HTML の要素で、表のキャプション（またはタイトル）を指定します。

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

属性
--

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

### 非推奨の属性

以下の属性は非推奨であり、使用するべきではありません。以下に記述しているのは、既存コードを更新する際の参考や、歴史的な関心としてのためのみです。

`align` 
非推奨

この列挙型属性は caption 要素の、自身の指し示す table 要素を基準とした相対的な位置を指定します。以下の値が指定できます。

`left`

キャプションを表の左側に表示します。

`top`

キャプションを表の上側に表示します。

`right`

キャプションを表の右側に表示します。

`bottom`

キャプションを表の下側に表示します。


**警告:** この属性は非推奨ですので使用しないでください。`<caption>` 要素にスタイルを適用するには、CSS プロパティの `caption-side` および `text-align` を使用してください。

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

`<caption>` 要素は親である `<table>` 要素の最初の子とする必要があります。

`<caption>` を持つ `<table>` 要素が `<figure>` 要素の唯一の子孫である場合は、 `<figcaption>` 要素を `<caption>` の代わりに使用してください。

表の `background-color` はキャプションを含みません。両方の背景を同じ色にしたい場合は、`background-color` を `<caption>` 要素にも追加してください。

例
-

このシンプルな例は、キャプションを含む票を表します。


```html
<table>
  <caption>
    Example Caption
  </caption>
  <tr>
    <th>Login</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>user1</td>
    <td>user1@sample.com</td>
  </tr>
  <tr>
    <td>user2</td>
    <td>user2@sample.com</td>
  </tr>
</table>
```


```
caption {
  caption-side: top;
}
table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table,
th,
td {
  border: 1px solid black;
}
```

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | フローコンテンツ |
| タグの省略 | 
 要素の直後に ASCII
 空白文字やコメントが続かない場合、終了タグは省略可能です。
  |
| 許可されている親要素 | `<table>` 要素で、その最初の子要素としてのみ配置可能。 |
| 暗黙の ARIA ロール | caption (en-US) |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLTableCaptionElement` |

仕様書
---

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

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

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

関連情報
----

* `<caption>` 要素の align 属性 の代替となる CSS プロパティ:
    + `text-align`, `caption-side`
<sub>: 下付き文字要素
==============

**`<sub>`** は HTML の要素で、表記上の理由で下付き文字として表示するべきインラインテキストを示します。下付き文字は普通、小さめのテキストを使用してベースラインよりも低く表示されます。

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

属性
--

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

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

`<sub>` 要素は、単純に表現や表示の結果を得るためではなく、表記規則上の理由、つまり、表記上の習慣や規則でテキストの位置を変更する必要がある場合にのみ使用してください。

例えば、変更したベースラインをワードマークの中で使用している企業名にスタイル付けするために `<sub>` を使用することは適切ではありません。このような場合には CSS を使用してください（例えば `vertical-align` プロパティを、 `vertical-align: sub` または、もっと詳細にベースラインの位置を制御するために、 `vertical-align: -25%` など）。

`<sub>` の適切な利用場面には次のようなものがあります（これに限定されるものでありません）。

* 脚注番号のマークアップ。例については脚注番号を参照してください。
* 数学における下付き文字の変数値のマークアップ（ただし、 MathML の数式を使うことも検討してください）。変数の下付き文字を参照してください。
* 化学式における原子数の記述（例えば、すべての開発者のお友達、C8H10N4O2 別名「カフェイン」）。化学式を参照してください。
例
-

### 脚注番号

伝統的な脚注は下付き文字で表示される番号を使って記述されます。これは `<sub>` のよくある使い方です。


```html
<p>
  中村、ジョンソン、メイソン<sub>1</sub>の計算によると、この場合、どちらの粒子も完全に消滅することになります。
</p>
```


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

### 変数の下付き文字

数学では、同じ概念に関連する一連の変数（例えば同じ軸の距離）を、同じ変数名と下付き文字を使用して表現します。例えば以下のようになります。


```html
<p>
  X軸に沿った水平座標の位置は <var>x<sub>1</sub></var> … <var>x<sub>n</sub></var> と表します。
</p>
```


出力は次の通りです。

### 化学式

化学式を書くときは、 H2O のように、分子の記述の中で原子の数を下付き数字で記述します。水の場合、下付きの "2" は、水分子の中に 2 つの水素原子があることを表します。

他の例です。


```html
<p>
  ほぼすべての開発者が大好きな分子は
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>、「カフェイン」としてよく知られています。
</p>
```


#### 結果

技術的概要
-----

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

仕様書
---

| Specification |
| --- |
| HTML Standard # the-sub-and-sup-elements |

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

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

関連情報
----

* 上付き文字を表現する HTML の `<sup>` 要素。sub 要素と同時に使用することはできません。化学式で上付き文字と下付き文字の両方が必要な場合には、MathML を用いる必要があります。
* MathML 要素: `<msub>`, `<msup>`, `<msubsup>`
* CSS の `vertical-align` プロパティ
<samp>: サンプル出力要素
================

**`<samp>`** は HTML の要素で、コンピュータープログラムからのサンプル出力を表すインラインのテキストを収めるために使用されます。内容は普通、ブラウザーの既定の等幅フォント（Courier や Lucida Console など）を使用して表示されます。

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

属性
--

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

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

CSS ルールを定義することで、`<samp>` 要素におけるブラウザーの既定フォントを上書きすることができますが、ブラウザーの設定が指定した CSS よりも優先されることもあります。

CSS で既定のフォントを上書きするには、次のようにします。


```css
samp {
  font-family: "Courier";
}
```


**メモ:** ウェブサイトや JavaScript コードによって生成された出力を含めるコンテナーとして提供する要素が必要な場合は、代わりに `<output>` 要素を使用してください。

例
-

### 基本的な例

この単純な例では、段落にプログラムの出力の例を含めます。


```html
<p>
  When the process is complete, the utility will output the text
  <samp>Scan complete. Found <em>N</em> results.</samp> You can then proceed to
  the next step.
</p>
```


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

### ユーザー入力を含むサンプル出力

`<kbd>` 要素を `<samp>` ブロックの中で使用することで、ユーザーが入力した文字列を含んだ例を表現することができます。例えば、Linux （または macOS）のコンソールセッションを表現したこのテキストを考えてみてください。

#### HTML


```html
<pre>
<samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd>
MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62

<span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre>
```


なお、`<span>` を使用して、シェルのプロンプトやカーソルのような、サンプル文字列の中にある特定の部分の表示ができるようにしています。また、`<kbd>` を使用して、サンプル文字列の中のプロンプトでユーザーが入力したコマンドを表現しています。

#### CSS

実現したい表示を達成するための CSS は次の通りです。


```css
.prompt {
  color: #b00;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #00b;
}
```


これはプロンプトとカーソルにわずかに着色し、サンプル文字列の中のキー入力を太字にしています。

#### 結果

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

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* 関連要素: `<kbd>`, `<code>`, `<pre>`
* `<output>` 要素: スクリプトが生成した出力のためのコンテナー
<hgroup>
========

**`<hgroup>`** は HTML の要素で、見出しとそれに関連する内容を表します。これは 1 つの `<h1>–<h6>` 要素と、1 つ以上の `<p>` 要素をグループ化します。

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

属性
--

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

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

`<hgroup>` 要素は、見出しと副次的な内容（副題や代替タイトル、キャッチフレーズなど）をグループ化することが可能です。これらのコンテンツは、 `<hgroup>` 要素内の `<p>` 要素として表現されます。

`<hgroup>` 要素自体は、ウェブページの文書のアウトラインに影響を与えません。むしろ、 `<hgroup>` 内で許可されている単一の見出しが文書のアウトラインに寄与します。

例
-


```html
<!doctype html>
<title>HTML Standard</title>
<body>
  <hgroup id="document-title">
    <h1>HTML: Living Standard</h1>
    <p>Last Updated 12 July 2022</p>
  </hgroup>
  <p>Some intro to the document.</p>
  <h2>Table of contents</h2>
  <ol id="toc">
    …
  </ol>
  <h2>First section</h2>
  <p>Some intro to the first section.</p>
</body>
```

### 結果

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

現在のところ、 `<hgroup>` 要素に強いアクセシビリティの意味はありません。要素内のコンテンツ（見出しと、任意の段落）は、ブラウザーのアクセシビリティ API によって公開されます。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ, 見出しコンテンツ, 知覚可能コンテンツ |
| 許可されている内容 | 
 0 個以上の `<p>` と、それに続く 1 個の h1, h2,
 h3, h4,
 h5, h6 と、それに続く 0 個以上の `<p>` |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

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

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

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

関連情報
----

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