recursal/MDN huggingface dataset:
<figure>: キャプションが付けられる図要素
=========================

**`<figure>`** は HTML の要素で、図表などの自己完結型のコンテンツを表し、任意で `<figcaption>` 要素を使用して表されるキャプションを付けることができます。図、すなわちキャプションとその中身は一単位として参照されます。

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

属性
--

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

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

* ふつう `<figure>` は画像、イラスト、グラフ、コードの断片など、文書の本文の流れから参照されるものの、本文の流れに影響を与えることなく、文書のほかの部分や付録に移動することが可能なものに用います。
* キャプションは `<figure>` 要素の中に（最初または最後の子要素として）`<figcaption>` 要素を挿入することで表すことができます。図の中で最初に見つかった最初の `<figcaption>` 要素が図のキャプションとして表示されます。
例
-

### 画像


```html
<!-- 単なる画像 -->
<figure>
  <img src="favicon-192x192.png" alt="美しい MDN のロゴ" />
</figure>

<!-- キャプションが付いた画像 -->
<figure>
  <img src="favicon-192x192.png" alt="美しい MDN のロゴ" />
  <figcaption>MDN ロゴ</figcaption>
</figure>
```


#### 結果

### コードスニペット


```html
<figure>
  <figcaption><code>navigator</code> を用いてブラウザーの詳細を取得</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName + "; ";
  txt+= "Browser Name: " + navigator.appName + "; ";
  txt+= "Browser Version: " + navigator.appVersion  + "; ";
  txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
  txt+= "Platform: " + navigator.platform  + "; ";
  txt+= "User-agent header: " + navigator.userAgent  + "; ";
  console.log("NavigatorExample", txt);
}
  </pre>
</figure>
```


#### 結果

### 引用


```html
<figure>
  <figcaption><b>Edsger Dijkstra:</b></figcaption>
  <blockquote>
    デバッグがソフトウェアのバグを取るプロセスであるならば、プログラミングはそれを入れるプロセスだ。
  </blockquote>
</figure>
```


#### 結果

### 詩


```html
<figure>
  <p style="white-space:pre">
    Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the
    green, Or, like a nymph, with long dishevelled hair, Dance on the sands, and
    yet no footing seen: Love is a spirit all compact of fire, Not gross to
    sink, but light, and will aspire.
  </p>
  <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption>
</figure>
```


#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 知覚可能コンテンツ.
  |
| 許可されている内容 | `<figcaption>` 要素とそれに続くフローコンテンツ、またはフローコンテンツとそれに続く
 `<figcaption>` 要素、またはフローコンテンツ
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | figure |
| 許可されている ARIA ロール | 
 子孫に
 figcaption
 がない場合:
 any、それ以外の場合は許可されているロールなし
  |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

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

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

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

関連情報
----

* `<figcaption>` 要素
<base>: 文書の基底 URL 要素
====================

**`<base>`** は HTML の要素で、文書内におけるすべての*相対* URL の基点となる URL を指定します。 `<base>` 要素は、文書内に 1 つだけ置くことができます。

文書に使われている基底 URL は、スクリプトから `Node.baseURI` を使用して問い合わせることができます。文書に `<base>` 要素がなかった場合、 `baseURI` は既定で `location.href` になります。

|  |  |
| --- | --- |
| コンテンツカテゴリー | メタデータコンテンツ |
| 許可されている内容 | なし。この要素は空要素です。 |
| タグの省略 | 終了タグを用いてはならない。 |
| 許可されている親要素 | `<head>` 要素で、他に `<base>` 要素を含んでいないもの。 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLBaseElement` |

属性
--

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

**警告:** 以下の属性のいずれかが指定されている場合、この要素は URL の属性値を持つ他の要素、例えば `<link>` の `href` 属性などの前に置く**必要があります**。

`href`

文書全体を通して相対 URL に使用される基底 URL です。絶対 URL と相対 URL が使用できます。

`target`

**キーワード**または**作者が定義した名前**で、既定の閲覧コンテキストを表し、 `<a>` または `<form>` 要素が明示的に `target` 属性を持たない場合に、移動の結果を表示する先として使用されます。以下のキーワードは特別な意味を持ちます。

* `_self` （既定値）: 現在の閲覧コンテキストに結果を表示します。
* `_blank`: 新しい無名の閲覧コンテキストに結果を表示します。
* `_parent`: 現在のコンテキストの親の閲覧コンテキストに結果を表示します。親がない場合、このオプションは `_self` と同じ振る舞いをします。
* `_top`: 最上位の閲覧コンテキスト (現在のコンテキストの祖先で、それ以上の親をもたない閲覧コンテキスト）に結果を表示します。親がない場合、このオプションは `_self` と同じ振る舞いをします。

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

### 複数の <base> 要素

複数の `<base>` 要素が使用された場合、最初の `href` と最初の `target` の値が使用され、他はすべて無視されます。

### ページ内アンカー

文書内のフラグメントを指すリンク — 例えば `<a href="#some-id">` — は `<base>` を使用して解決され、基底 URL にフラグメントを付けて HTTP リクエストを発行します。

例えば、 `<base href="https://example.com/">` が指定され、`<a href="#anchor">To anchor</a>` というリンクがあったとします。リンク先は `https://example.com/#anchor` となります。

### Open Graph

Open Graph のメタタグは `<base>` を認識しないので、次のように常に完全 URL を使用してください。


```html
<meta property="og:image" content="https://example.com/thumbnail.jpg" />
```

例
-


```html
<base href="https://www.example.com/" />
<base target="\_blank" />
<base target="\_top" href="https://example.com/" />
```

仕様書
---

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<menu>: メニュー要素
==============

**`<menu>`** は HTML の要素で、HTML 仕様書では `<ul>` とは異なる意味づけとして記述されていますが、ブラウザーでは `<ul>` と違いのないものとして扱われます（そしてアクセシビリティツリーで公開されます）。これは（`<li>` 要素で表現される）項目の順序のないリストを表します。

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

属性
--

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

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

`<menu>` 要素と `<ul>` 要素はともに順序なしリストの項目を表すものです。主な違いは、`<ul>` は主に項目の表示を目的とするのに対し、 `<menu>` 要素は操作を行うための対話型の項目のためのものです。関連する `<menuitem>` 要素は非推奨になりました。

**メモ:** HTML 仕様書の初期の版では、`<menu>` 要素にはコンテキストメニューとしての追加の用途がありました。この機能は廃止されたと考えており、仕様書にはありません。

例
-

### ツールバー

この例では、`<menu>` を編集アプリケーションのためのツールバーを生成するために使用しています。

#### HTML


```html
<menu>
  <li><button onclick="copy()">コピー</button></li>
  <li><button onclick="cut()">切り取り</button></li>
  <li><button onclick="paste()">貼り付け</button></li>
</menu>
```


なお、機能的には次のものと違いはありません。


```html
<ul>
  <li><button onclick="copy()">コピー</button></li>
  <li><button onclick="cut()">切り取り</button></li>
  <li><button onclick="paste()">貼り付け</button></li>
</ul>
```


#### CSS


```css
menu,
ul {
  display: flex;
  list-style: none;
  padding: 0;
  width: 400px;
}

li {
  flex-grow: 1;
}

button {
  width: 100%;
}
```


#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | 
フローコンテンツ。この要素の子に 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` or `tree` (en-US) |
| DOM インターフェイス | `HTMLMenuElement` |

仕様書
---

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

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

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

関連情報
----

* 他のリスト関連 HTML 要素: `<ol>`, `<ul>`, `<li>`
<hr>: 主題区切り（水平線）要素
==================

**`<hr>`** は HTML の要素で、段落レベルの要素間において、テーマの意味的な区切りを表します。例えば、話の場面の切り替えや、節内での話題の転換などです。

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

以前はこれは水平の区切り線として定義されていました。現在でもブラウザーでは水平線として表示されますが、この要素は表示論的な用語ではなく意味論的な用語で定義されましたので、水平線を引きたいのであれば、適切な CSS を使用して行うようにしてください。

属性
--

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

`align` 
非推奨

Non-standard

区切り線の配置を指定します。初期値は `left` です。

`color` 
非推奨

Non-standard

区切り線の色を色名、または 16 進数で指定します。

`noshade` 
非推奨

Non-standard

網掛けをしないように指定します。

`size` 
非推奨

Non-standard

区切り線の高さをピクセル数で指定します。

`width` 
非推奨

Non-standard

区切り線の幅をピクセル数、あるいはパーセント値で指定します。

例
-

### HTML


```html
<p>
  これは第一段落のテキストです。これは第一段落のテキストです。
  これは第一段落のテキストです。これは第一段落のテキストです。
</p>

<hr />

<p>
  これは第二段落のテキストです。これは第二段落のテキストです。
  これは第二段落のテキストです。これは第二段落のテキストです。
</p>
```

### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ |
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 | 開始タグは必須。終了タグを記述してはならない。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | `separator` (en-US) |
| 許可されている ARIA ロール | `presentation` または `none` (en-US) |
| DOM インターフェイス | `HTMLHRElement` |

仕様書
---

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

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

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

関連情報
----

* `<p>`
<sup>: 上付き文字要素
==============

**`<sup>`** は HTML の要素で、表記上の理由で上付き文字として表示するべきインラインテキストを指定します。上付き文字は普通、小さめのテキストを使用して高いベースラインで表示されます。

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

属性
--

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

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

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

例えば、高いベースラインを使用しているビジネスや製品のワードマークをスタイル付けするには、`<sup>` ではなく CSS を使用してください（例えば `vertical-align`）。例えば、 `vertical-align: super` とするか、ベースラインを 50% 上げるのであれば、`vertical-align: 50%` とするかしてください。

`<sup>` の適切な使用例には次のようなものがあります (但し、制約するものではありません)。

* べき乗の表示、例えば "x3"。これには、特に複雑な場合には、 MathML の使用を検討する価値があるかもしれません。以下の例のべき乗を参照してください
* 一部の言語で特定の略語を表示する際の Superior letter。例えば、フランス語では、 "mademoiselle" は "Mlle" のように略すことができます。例は Superior lettering を参照してください。
* 序数の表現、たとえば "fourth." を "4th" と表現すること。例は序数を参照してください。
例
-

### べき乗

以下のようにべき乗は、上付き文字のもっとも一般的な使い方です。


```html
<p>
  物理学の中でもっとも有名な等式の一つが、 <var>E</var>=<var>m</var><var>c</var
 ><sup>2</sup> です。
</p>
```


#### 結果

### Superior lettering

Superior lettering は、厳密には上付き文字と同じではありません。しかし、 HTML で superior lettering を表現することは `<sup>` の一般的な利用方法です。最も多い superior lettering の使用例はフランス語の略語の表現です。


```html
<p>Robert a présenté son rapport à M<sup>lle</sup> Bernard.</p>
```


#### 結果

### 序数

英語の "fourth" やスペイン語の "quinto" などの序数は、数字と上付き文字で表示される言語に依存したテキストを使用して略されることがあります。


```html
<p>
  The ordinal number "fifth" can be abbreviated in various languages as follows:
</p>
<ul>
  <li>English: 5<sup>th</sup></li>
  <li>French: 5<sup>ème</sup></li>
</ul>
```


#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 記述コンテンツ, 知覚可能コンテンツ
  |
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の 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 の `<sub>` 要素。なお、`sub` と `sup` を同時に使用することはできません。化学式で上付き文字と下付き文字の両方が必要な場合には、MathML を用いる必要があります。
* MathML 要素: `<msub>`, `<msup>`, `<msubsup>`
* CSS の `vertical-align` プロパティ
<rb>: ルビベース要素
=============

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

**`<rb>`** は HTML の要素で、`<ruby>` 表記のベースとなるテキストの部分、すなわち修飾される文字列を区切るために使用されます。一つの `<rb>` 要素がベーステキストの不可分な区間を区切るように囲みます。

属性
--

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

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

* ルビ表記は、日本語の振り仮名や台湾語の注音符号のように、東アジアの文字の発音を示すためのものです。 `<rb>` 要素はルビベース文字の区間を区切るために使用されます。
* `<rb>` 要素は空要素ではありませんが、ソースコード上ではそれぞれの要素の開始タグだけを含めるのが一般的で、その方がマークアップが複雑でなくなり読みやすくなります。ブラウザーは表示する際に完全な要素に補完します。
* 修飾をしたいそれぞれのベース区間/`<rb>` 要素ごとに 1 つずつ `<rt>` 要素を置く必要があります。
例
-

### rb の使用

この例では、元の文字に対して "Kanji" が等価であるという注釈を提供します。


```html
<ruby>
  <rb>漢</rb><rb>字 </rb><rp>(</rp><rt>kan</rt><rt>ji</rt><rp>)</rp>
</ruby>
```


ルビのベーステキストを 2 つの部分に区切るために 2 つの `<rb>` 要素を含めています。一方で、注釈も 2 つの `<rt>` 要素で区切っています。

#### 結果

### 注釈の分割

なお、この例を完全に分割して注釈された 2 つのベーステキストの部分で書くこともできます。この場合は `<rb>` 要素を含める必要はありません。


```html
<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
```


#### 結果

それ以外の例は、 `<ruby>` 要素についての記事を参照してください。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | `<ruby>` 要素の子と同様。 |
| タグの省略 | 
 終了タグを省略できるのは、要素に `<rt>`,
 `<rtc>`, `<rp>`
 要素、または他の
 `<rb>`
 要素が続く場合、または親要素に残りのコンテンツがない場合です。
  |
| 許可されている親要素 | `<ruby>` 要素。 |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # rb |

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

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

関連情報
----

* `<ruby>`
* `<rt>`
* `<rp>`
* `<rtc>`
<output>: 出力要素
==============

**`<output>`** は HTML の要素で、サイトやアプリが計算結果やユーザー操作の結果を挿入することができるコンテナー要素です。

属性
--

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

`for`

他の要素の `id` の空白区切りのリストで、入力値が計算に使用される（または何らかの影響を与える）要素を示します。

`form`

この要素に関連付けられた (*フォームオーナー*である) `<form>` 要素を指定します。この値は、同じ文書内の `<form>` 要素の `id` である必要があります。 (この属性が設定されていない場合、 `<output>` 要素は祖先の `<form>` があれば、その要素に関連づけられます。

この属性は `<output>` 要素を、包含する `<form>` に限らず文書中のどこにある `<form>` にも結び付けることができます。これは祖先の `<form>` 要素を上書きもします。

`name`

要素の名前です。 `form.elements` API で使用されます。

`<output>` の値、名前、内容はフォーム送信の過程で送信されません。

例
-

以下の例では、フォームに `0` から `100` までの範囲の値を取るスライダーと、第 2 の値を入力できる `<input>` 要素があります。どちらかのコントロールの値が変更されるたびに、2 つの値が合計された結果が `<output>` 要素の中に表示されます。


```html
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>
```

### 結果

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

多くのブラウザーでは、この要素を `aria-live` 領域として実装しています。これにより、支援技術は、その中に出力された UI 操作の結果を読み上げますが、その結果を生成するコントロールからフォーカスを外す必要はありません。

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、
 記述コンテンツ、
 リスト化、
 ラベル付け可能、
 リセット可能
フォーム関連要素、知覚可能コンテンツ
  |
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可された親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | `status` |
| 許可された ARIA ロール | すべて |
| DOM インターフェイス | `HTMLOutputElement` |

仕様書
---

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<rtc>: ルビテキストコンテナー要素
====================

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

**`<rtc>`** は HTML の要素で、`<ruby>` 要素内で使用する `<rb>` 要素にルビで与える文字列の、意味を表す注釈を包含します。`<rb>` 要素は発音の注釈 (`<rt>`) と意味の注釈 (`<rtc>`) の両方を持つことができます。

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

属性
--

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

例
-


```html
<div class="info">
  <ruby>
    <rtc>
      <rb>旧</rb><rt>jiù</rt>
      <rb>金</rb><rt>jīn</rt>
      <rb>山</rb><rt>shān</rt>
    </rtc>
    <rtc>San Francisco</rtc>
  </ruby>
</div>
```


```
.info {
  padding-top: 10px;
  font-size: 36px;
}
```

### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | 記述コンテンツまたは `<rt>` 要素 |
| タグの省略 | 
 直後に `<rb>`, `<rtc>`,
 `<rt>`
 要素の開始タグがある、または親要素の終了タグがある場合は、この要素の終了タグを省略可能。
  |
| 許可されている親要素 | `<ruby>` 要素 |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # rtc |

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

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

関連情報
----

* `<ruby>`
* `<rp>`
* `<rb>`
* `<rt>`
<pre>: 整形済みテキスト要素
=================

**`<pre>`** は HTML の要素で、整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して等幅フォントで表示されます。この要素内のホワイトスペース文字はそのまま表示します。

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

`<pre>` タグ内で `<`、`>`、`&`、`"` などの予約文字を表示する必要がある場合は、それぞれの HTML エンティティを用いてエスケープする必要があります。

属性
--

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

`cols` 
Non-standard

非推奨

1 行あたりの*望ましい*文字数を示します。これは `width` の標準外の別名です。同様の効果を得るには、CSS の `width` を使用してください。

`width` 
非推奨

Non-standard

1 行あたりの*望ましい*文字数を示します。この属性は技術的には実装されていますが、視覚上の効果はありません。同様の効果を得るには、CSS の `width` を使用してください。

`wrap` 
Non-standard

非推奨

テキストがはみ出た場合の処理に関する*ヒント*を示します。現行のブラウザーはこのヒントを無視して、視覚上の効果をもたらしません。同様の効果を得るには、CSS の `white-space` を使用してください。

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

整形済みテキストを使用して作成した画像や図には、代替説明を提供することが重要です。代替説明は、画像や図のコンテンツを明確かつ簡潔に記述する必要があります。

弱視の人やスクリーンリーダーなどの支援技術を使って閲覧している人は、整形済みテキスト文字が順番に読み上げられたときに何を表しているのか理解できないかもしれません。

`<figure>` 要素と `<figcaption>` 要素の組み合わせや、`pre` 要素の ARIA の `role` と `aria-label` (en-US) 属性によって補われます。整形済み ASCII アートは代替テキストを持つ画像としてアナウンスされ、`figcaption` は画像のキャプションとして機能します。

### 例


```html
<figure>
  <pre role="img" aria-label="ASCII COW">
      __________________
  &lt; 私は牧場の達人です。&gt;
      ------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
  <figcaption id="cow-caption">
    「私は牧場の達人です。」と言っている牛。牛は整形済みテキストで表現されている。
  </figcaption>
</figure>
```


* MDN「WCAG を理解する」ガイドライン 1.1 の説明
* H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0
例
-

### 基本的な例

#### HTML


```html
<p>CSS を使用してフォントの色を変更するのは簡単です。</p>
<pre>
body {
  color: red;
}
</pre>
```


#### 結果

### 予約文字のエスケープ

#### HTML


```html
<pre>
let i = 5;

if (i &lt; 10 &amp;&amp; i &gt; 0)
  return &quot;1 桁の数値&quot;
</pre>
```


#### 結果

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* CSS: `white-space`, `word-break`
* HTML エンティティ
* 関連する要素: `<code>`
<footer>
========

**`<footer>`** は HTML の要素で、直近の区分コンテンツまたは区分化ルート要素のフッターを表します。フッターには通常、そのセクションの著者に関する情報、関連文書へのリンク、著作権情報等を含めます。

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

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

属性
--

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

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

* セクションの著者や編集者の連絡先情報は、多くの場合 `<footer>` 要素内に `<address>` 要素として配置します。
* 区分コンテンツや区分化ルート要素の最も近い祖先が本体要素の場合、フッターはページ全体に適用されます。
* `<footer>` 要素は区分コンテンツではありません。つまり、この要素が新たなアウトラインを生成することはありません。
例
-


```html
<body>
  <h3>FIFA World Cup top goalscorers</h3>
  <ol>
    <li>Miroslav Klose, 16</li>
    <li>Ronaldo Nazário, 15</li>
    <li>Gerd Müller, 14</li>
  </ol>

  <footer>
    <small>
      Copyright © 2023 Football History Archives. All Rights Reserved.
    </small>
  </footer>
</body>
```



```css
footer {
  text-align: center;
  padding: 5px;
  background-color: #abbaba;
  color: #000;
}
```

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

Safari 13 のリリース以前は、 `contentinfo` のランドマークロールが VoiceOver によって適切に公開されていませんでした。古い Safari ブラウザーに対応する必要がある場合は、 `role="contentinfo"` を `footer` 要素に追加して、ランドマークが適切に表示されるようにしてください。

* 関連記事: WebKit Bugzilla: 146930 – AX: HTML native elements (header, footer, main, aside, nav) should work the same as ARIA landmarks, sometimes they don't
仕様書
---

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

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

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

関連情報
----

* 他のセクション関連要素: `<body>`, `<nav>`, `<article>`, `<aside>`, h1, h2, h3, h4, h5, h6, `<hgroup>`, `<header>`, `<section>`, `<address>`
* HTML のセクションとアウトラインの使用
* ARIA: Contentinfo ロール
<data>: データ要素
=============

**`<data>`** は HTML の要素で、与えられたコンテンツの断片を機械可読な翻訳にリンクします。コンテンツが時刻または日付に関連するものであれば、`<time>` 要素を使用する必要があります。

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

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

属性
--

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

`value`

この属性は要素の内容を機械可読な形式で指定します。

例
-

以下の例は商品名を表示しますが、それぞれの商品名に商品番号も結びつけます。


```html
<p>新製品</p>
<ul>
  <li><data value="398">ミニケチャップ</data></li>
  <li><data value="399">ジャンボケチャップ</data></li>
  <li><data value="400">メガジャンボケチャップ</data></li>
</ul>
```

### 結果

仕様書
---

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

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

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

関連情報
----

* HTML の `<time>` 要素
<head>: 文書メタデータ（ヘッダー）要素
=======================

**`<head>`** は HTML の要素で、文書に関する機械可読な情報（メタデータ）、たとえば題名、スクリプト、スタイルシートなどを含みます。

**メモ:** `<head>` は主に人間が読むためのものではなく、機械処理のための情報を保持するためのものです。人間が読むための情報、例えば最上位の見出しや著者の掲載のためのものは、 `<header>` 要素を参照してください。

属性
--

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

`profile` 
非推奨

Non-standard

1 つ以上のメタデータプロファイルの URI で、ホワイトスペース区切りです。

例
-


```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Document title</title>
  </head>
</html>
```

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | 
 文書が `<iframe>` の
 `srcdoc`
 文書である場合、または題名情報がより上位のプロトコル（HTML メールの件名の行など）で使用される場合は、0 個以上のメタデータコンテンツ。

他の場合は正確に 1 つの `<title>` 要素を含む、1 つ以上のメタデータコンテンツ。 |
| タグの省略 | この `<head>` 要素内で最初に存在するものが要素である場合、開始タグを省略可能。`<head>` 要素に続く最初のものが空白文字やコメントでない場合、終了タグが省略可能。 |
| 許可されている親要素 | `<html>` 要素の最初の子要素として配置可能。 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | なし |
| DOM インターフェイス | `HTMLHeadElement` |

仕様書
---

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

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

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

関連情報
----

* `<head>` の中で使用することができる要素:
    + `<title>`
    + `<base>`
    + `<link>`
    + `<style>`
    + `<meta>`
    + `<script>`
    + `<noscript>`
    + `<template>`
<ruby>: ルビ注釈要素
==============

**`<ruby>`** は HTML の要素で、ベーステキストの上、下、隣に描画される小さな注釈であり、よく東アジアの文字の発音を表すのに使われます。他の種類の注釈にも使われることがありますが、この使い方はあまり一般的ではありません。

*ルビ*という言葉は写植者が使用した長さの単位に由来しており、読みやすさ保ったままテキストを新聞用紙に印刷できる最小のサイズを表します。

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

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

属性
--

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

例
-

### 例 1: 文字ごと


```html
<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
```


#### 結果

### 例 2: 熟語


```html
<ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* `<rt>`
* `<rp>`
* `<rb>`
* `<rtc>`
* `text-transform`: full-size-kana
<b>: 注目付け要素
===========

**`<b>`** は HTML の要素で、要素の内容に読み手の注意を惹きたい場合で、他の特別な重要性が与えられないものに使用します。これは以前は太字要素と呼ばれており、ほとんどのブラウザーでは文字列を太字で描画していました。しかし、 `<b>` を文字列の装飾に使うべきではありません。太字の文字列を作成するには、 CSS の `font-weight` プロパティを使用し、特別な重要性を持つテキストを示すには `<strong>` 要素を使用してください。

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

属性
--

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

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

* `<b>` は要約に現れるキーワード、レビュー文内での製品名、または、その他の表記上太字で記述される通例のある箇所（但し、特別な重要性を持たない部分）に使用してください。
* `<b>` 要素を `<strong>`, `<em>`, `<mark>` 要素と混同しないでください。 `<strong>` は特定の*重要性*を持った文字列を表し、 `<em>` はテキストを軽く強調し、 `<mark>` は特定の*関連性*を持った文字列を表します。`<b>` はそのような特別な意味を持ちません。他の要素が持つ意味合いに合わないときのみ使用してください。
* 同様に、`<b>` 要素でタイトルや見出しをマークしないでください。この用途では h1 から h6 タグを使用てください。さらに、スタイルシートでこれらの要素の既定のスタイルを変更できるので、これらの要素は太字で表示される*とは限りません*。
* 必要に応じて追加的な意味情報を伝える目的で `<b>` 要素に `class` 属性を使用することはよい使用法です（例えば、段落の最初の文に `<b class="lead">` を設定するなど）。これによって、 `<b>` の様々な使用法が管理しやすくなり、スタイル上の変更が必要になった時、 HTML における使用方法を変更する必要がなくなります。
* 歴史的に `<b>` 要素は太字の文字列を作るためのものでしたが、 HTML4 でスタイル情報が非推奨になったので `<b>` 要素の意味が変更されました。
* `<b>` 要素の使用に意味上の目的がない場合は、文字列を太字にするために代わりに CSS の `font-weight` プロパティの値を `"bold"` に設定してください。
例
-


```html
<p>
  This article describes several <b class="keywords">text-level</b> elements. It
  explains their usage in an <b class="keywords">HTML</b> document.
</p>
Keywords are displayed with the default style of the
<b>element, likely in bold.</b>
```

### 結果

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* その他のテキストレベル意味付け要素: `<a>`, `<em>`, `<strong>`, `<small>`, `<cite>`, `<q>`, `<dfn>`, `<abbr>`, `<time>`, `<code>`, `<var>`, `<samp>`, `<kbd>`, `<sub>`, `<sup>`, `<i>`, `<mark>`, `<ruby>`, `<rp>`, `<rt>`, `<bdo>`, `<span>`, `<br>`, `<wbr>`
* Using <b> and <i> elements (W3C)