recursal/MDN huggingface dataset:
<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>: テレタイプテキスト要素
=================

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

**`<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>: オブジェクト引数要素
===================

**`<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>: 順序付きリスト要素
===============

**`<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` プロパティは、リストの字下げを制御するのに役立ちます。
<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>: コンテンツ区間要素
=================

**`<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>: ディレクトリー要素
================

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

**`<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>: テキストマーク要素
=================

**`<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>: 進捗インジケーター要素
=======================

**`<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>
======

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

**`<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>
=====

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

概要
--

**`<xmp>`** は HTML の要素で、その開始タグから終了タグまでの間のタグを HTML として解釈せず、等幅フォントでレンダリングします。 HTML2 仕様書では、これを 1 行当たり 80 文字を表示するのに充分な幅でレンダリングするよう推奨しています。

**メモ:** この要素は使用しないでください。

* HTML3.2 から非推奨要素となっており、また一貫した実装も存在しません。そして HTML5 の言語からは完全に削除されています。
* 代わりに `<pre>` 要素か、意味的に適切であれば `<code>` 要素を使用してください。なお、マークアップとして解釈されないようにするには、 '`<`' の文字を '`&lt;`' としてエスケープする必要があります。
* あらゆる要素で等幅フォントを使用することができます。 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>: 画像要素
===============

**`<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`
* 画像ファイルの種類と形式ガイド
<main>
======

**`<main>`** は HTML の要素で、文書の `<body>` の主要なコンテンツを表します。メインコンテンツ領域は、文書の中心的なトピック、またはアプリケーションの中心的な機能に直接関連する、または展開されたコンテンツで構成されます。

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

文書には `hidden` 属性が指定されていない `<main>` 要素を 2 つ以上置くことはできません。

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ, 知覚可能コンテンツ |
| 許可されている内容 | フローコンテンツ |
| タグの省略 | 不可。開始タグと終了タグの両方が必須。 |
| 許可されている親要素 | フローコンテンツを受け入れる場所、但し階層的に正しい `main` 要素であること。 |
| 暗黙の ARIA ロール | `main` |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLElement` |

属性
--

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

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

`<main>` 要素の内容は、文書で固有のものにしてください。この内容はサイドバー、ナビゲーションリンク、著作権表示、サイトロゴ、検索フォームのような、文書のセットや文書のセクションにまたがって繰り返されるものを除くべきです。(もちろん、主な内容が検索フォームでない限り)

`<main>` は文書のアウトラインに寄与しません。すなわち `<body>` や h2 などの見出しとは異なり、`<main>` はページの構造の DOM の概念に影響を与えません。これは情報を与えるだけです。

例
-


```html
<!-- 他のコンテンツ -->

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>
      These bright red apples are the most common found in many supermarkets.
    </p>
    <p>…</p>
    <p>…</p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for apple pies.</p>
    <p>…</p>
    <p>…</p>
  </article>
</main>

<!-- 他のコンテンツ -->
```

### 結果

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

### ランドマーク

`<main>` 要素は `main` ランドマークロールのように動作します。ランドマークは、文書の長いセクションをすばやく識別して移動するための支援技術として使用することができます。 古いブラウザーの互換性の確認ができない限り、 `<main>` を `role="main"` の宣言付きで使用するべきです。

### スキップナビゲーション

スキップナビゲーションは、"skipnav" とも呼ばれますが、支援技術のユーザーが繰り返されるコンテンツ (メインナビゲーション、情報バナー、等) の大きなセクションをすばやく飛ばすことができる技法です。これによって、ユーザーがページのメインコンテンツをより早くアクセスすることができます。

`id` 属性を追加することで、 `<main>` 要素がスキップナビゲーションリンクのターゲットになることができます。


```html
<body>
  <a href="#main-content">Skip to main content</a>

  <!-- navigation and header content -->

  <main id="main-content">
    <!-- main page content -->
  </main>
</body>
```


* WebAIM: "Skip Navigation" Links
### リーダーモード

ブラウザーのリーダーモードでは、コンテンツをリーダーに特化したビューに変換するときに、見出しやコンテンツ区分要素と同様に `<main>` 要素の存在を探します。

* Building websites for Safari Reader Mode and other reading apps.
仕様書
---

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

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

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

関連情報
----

* 基本構造の要素: `<html>`, `<head>`, `<body>`
* セクション関連の要素: `<article>`, `<aside>`, `<footer>`, `<header>`, `<nav>`
* ARIA: Main ロール