recursal/MDN huggingface dataset:
<meter>: HTML メーター要素
====================

**`<meter>`** は HTML の要素で、既知の範囲内のスカラー値、または小数値を表します。

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

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 記述コンテンツ, ラベル付け可能コンテンツ, 知覚可能コンテンツ
  |
| 許可されている内容 | 記述コンテンツ。ただし他の
 `<meter>` 要素の子孫要素として配置してはならない。
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLMeterElement` |

属性
--

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

`value`

現在の数値。これは指定されている場合、最小値と最大値（`min` 属性と `max` 属性）の間でなければなりません。この `value` 属性が未定義、あるいは不正な値であった場合は、その値は `0` となります。指定されている値が `min` 属性と `max` 属性が示す範囲の範囲外の値である場合、その範囲の内のもっとも近い値が適用されます。

**メモ:** `value` 属性の値が `0` を下限、`1` を上限とするものでない限り、`min` 属性および `max` 属性で `value` 属性の下限および上限を定義しなくてはなりません。

`min`

範囲全体の下限。 `max` 属性により上限が設定されている場合は、それより小さい値でなくてはなりません。未設定の場合、下限値は `0` となります。

`max`

範囲全体の上限。 `min` 属性により下限が設定されている場合は、それより大きい値でなくてはなりません。未設定の場合、上限値は `1` となります。

`low`

「低」とされる範囲全体の上限値。属性値は、`min` 属性の値より大きく、かつ `high` 属性および `max` 属性の値より小さいものでなくてはなりません (※これらが定義されている場合)。`low` が未定義、もしくはその値が `min` 属性の値より小さい場合、`low` の値は最小値と同じです。

`high`

「高」とされる範囲全体の下限値。属性値は、`max` 属性の値より小さく、かつ `low` 属性や `min` 属性の値より大きいものでなくてはなりません (※これらが定義されている場合)。`high` 属性が未定義、もしくはその値が `max` 属性の値より大きい場合、`high` の値は最大値と同じです。

`optimum`

最適な数値の範囲を表します。`min` 属性と `max` 属性によって定義される範囲内の値でなくてはなりません。 `low` 属性と `high` 属性が指定されている場合、この属性の値を含む範囲が最適な数値の範囲とみなされます。例えば、値が `min` 属性と `low` 属性の間のいずれかであった場合、「低」の範囲が最適な数値となります。ブラウザーは optimum の値以下であるかどうかでメーターのバーの色を変更することがあります。

例
-

### シンプルな例

#### HTML


```html
<p>オーブンの温度: <meter min="200" max="500" value="350">350 度</meter></p>
```


#### 結果

Google Chrome での表示結果は以下のようになります。

![Google Chrome における meter 要素のスクリーンショット](/ja/docs/Web/HTML/Element/meter/screen_shot_2020-10-12_at_10.10.53_pm.png)

### 「高」の範囲と「低」の範囲の使用例

この例では `min` 属性が省略されています。よって、下限値は `0` となっています。

#### HTML


```html
<p>
  彼は試験で
  <meter low="69" high="80" max="100" value="84">B</meter> を取りました。
</p>
```


#### 結果

Google Chrome では、 meter の結果は次のように見えます。

![Google Chrome における赤いメーター](/ja/docs/Web/HTML/Element/meter/screen_shot_2020-10-12_at_10.11.52_pm.png)

仕様書
---

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

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

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

関連情報
----

* `<progress>`
<rp>: ルビの代替表示用括弧要素
==================

**`<rp>`** は HTML の要素で、`<ruby>` 要素によるルビの表示に対応していないブラウザー向けの代替表示用の括弧を提供するために使用します。それぞれ 1 つの `<rp>` 要素で、注釈の文字列を含む `<rt>` 要素を囲む開き括弧と閉じ括弧をそれぞれ囲む必要があります。

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

属性
--

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

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

* ルビは日本語のふりがなや台湾語の注音符号など、東アジア言語で発音を示すものです。`<rp>` 要素は `<ruby>` 要素に対応していない場合に使用されます。`<rp>` 要素の内容は、ルビの存在を示すために何を表示すべきか（通常は括弧）を示します。
例
-

### ルビの使用

この例はそれぞれの文字に等価なローマ字を表示するためのにルビを使用しています。


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


```
body {
  font-size: 22px;
}
```


このブラウザーでは次のように見えます。

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

### ルビ対応なし

上記の HTML は、ルビの対応が*ない*ブラウザーで表示すると、このように見えるかもしれません。
```

漢 (Kan) 字 (ji)
```


```
body {
  font-size: 22px;
}
```

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | テキスト |
| タグの省略 | 
 要素の直後に `<rt>` または他の
 `<rp>`
 要素が続くとき、または親要素内にそれ以上のコンテンツがない場合は、終了タグを省略可。
  |
| 許可されている親要素 | `<ruby>` 要素。 `<rp>` 要素は
 `<rt>`
 要素の直前または直後に配置しなければなりません。
  |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

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

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

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

関連情報
----

* `<ruby>`
* `<rt>`
* `<rb>`
* `<rtc>`
<summary>: 概要明示要素
=================

**`<summary>`** は HTML の要素で、 `<details>` 要素の折り畳みボックスの要約、キャプション、説明、凡例を表します。 `<summary>` 要素をクリックすると、親の `<details>` 要素の開閉状態を切り替えることができます。

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

属性
--

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

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

`<summary>` 要素の中身には、見出しコンテンツ、プレーンテキスト、段落内で使用できる HTML が入れられます。

`<summary>` 要素は、 `<details>` 要素の最初の子として*のみ*使用できます。ユーザーが概要をクリックすると、親の `<details>` 要素が開閉し、 `toggle` イベントが `<details>` 要素に送信され、状態が変化したことを知るために使用することができます。

既定のラベルテキスト
----------

`<details>` 要素の最初の子が `<summary>` 要素でない場合、ユーザーエージェントは既定の文字列（ふつうは「詳細」）を折りたたみボックスのラベルとして使用します。

既定のスタイル
-------

HTML 仕様書では、`<summary>` の既定のスタイルに `display: list-item` が含まれています。これで、ラベルの隣に既定で（多くは三角形で）表示される折りたたみウィジェットとして表示されるアイコンを変更したり削除したりすることができます。

スタイルを `display: block` に変更すると、展開用の三角印を削除することができます。

詳しくはブラウザーの互換性の節をご覧ください。すべてのブラウザーがこの要素の機能すべてに対応しているわけではありません。

Safari などの Webkit ベースのブラウザーでは、標準外の CSS 擬似要素 `::-webkit-details-marker` によって、アイコンの表示を制御することが可能です。三角形の表示を消すには、 `summary::-webkit-details-marker { display: none }` を使用してください。

例
-

以下に `<summary>` を使用している例をいくつか示します。 `<details>` 要素のドキュメントにもいくつか例があります。

基本的な例
-----

`<details>` 要素の中で `<summary>` の使用を示す簡単な例です。


```html
<details open>
  <summary>Overview</summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>
```


#### 結果

見出しとしての概要
---------

次のように、 `<summary>` の中で見出し要素を使用することができます。


```html
<details open>
  <summary><h4>Overview</h4></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>
```


#### 結果

これは現在のところ、間隔の問題をいくつか抱えており、 CSS を使用して修正することができます。

**警告:** `<summary>` 要素の既定のロールは button（子要素からはすべてのロールを外す）ですので、この例はスクリーンリーダーのような支援技術のユーザーには動作しません。 `<h4>` のロールが削除されますので、これらのユーザーからは見出しとして扱われなくなります。

概要の中の HTML
----------

この例は、 `<summary>` 要素にいくらか意味を追加して、ラベルを重要であると示します。


```html
<details open>
  <summary><strong>Overview</strong></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>
```


#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| 許可されている内容 | 記述コンテンツ。または 見出しコンテンツ のうちひとつの要素 |
| タグの省略 | 不可。開始タグと終了タグの両方が必要。 |
| 許可されている親要素 | `<details>` 要素 |
| 暗黙の ARIA ロール | `button` |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

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

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

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

関連情報
----

* `<details>`
<col>: 表の列要素
============

**`<col>`** は HTML の要素で、表内の列を定義して、すべての一般セルに共通の意味を定義するために使用します。この要素は通常、`<colgroup>` 要素内にみられます。

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

`<col>` では CSS を使用して列にスタイルを設定できますが、列に対して効果があるプロパティは限定されています（CSS 2.1 仕様書をご覧ください）。

属性
--

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

`span`

この属性は正の整数で、 `<col>` 要素がまたがる列の数を示します。存在しない場合、既定値は `1` です。

### 非推奨の属性

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

`align` 
非推奨

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

* `left` : 内容物をセルの左側に揃えます。
* `center` : 内容物をセル内で中央揃えにします。
* `right` : 内容物をセルの右側に揃えます。
* `justify`: 内容物がセル内で両端揃えになるように、テキストコンテンツに空白を挿入します。

この属性が設定されていない場合、その値は `<col>` 要素が属する `<colgroup>` 要素の `align` 属性から継承します。それも存在しない場合は、`left` 値であるものとします。

**メモ:** `left`、`center`、`right`、`justify` の値と同じ効果を実現するために、`text-align` プロパティを `<col>` 要素を与えたセレクターに設定しようとしないでください。`<td>` 要素は `<col>` 要素の子孫ではないため、プロパティを継承しません。

表で `colspan` 属性を使用していない場合は、CSS の `td:nth-child(an+b)` セレクターを使用してください。`a` を 0 に、`b` を表内の列の位置を示す序数にします。例えば `td:nth-child(2) { text-align: right; }` は、2 列目を右揃えにします。

表で `colspan` 属性を使用している場合は、`[colspan=n]` のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。

`bgcolor` 
非推奨

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

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

`char` 
非推奨

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

`charoff` 
非推奨

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

`valign` 
非推奨

この属性は、その列のそれぞれのセルの中にある内容物の垂直方向の配置方法を指定します。以下の値が指定可能です。

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

**メモ:** `vertical-align` プロパティを `<col>` 要素を指定したセレクターに設定しようとしないでください。`<td>` 要素は `<col>` 要素の子孫ではないため、プロパティを継承しません。

表で `colspan` 属性を使用していない場合は、 CSS の `td:nth-child(an+b)` セレクターを使用してください。a は表内の列数、b は表内の列の位置を示す序数です。このセレクターの後でのみ `vertical-align` プロパティを使用することができます。

表で `colspan` 属性を使用している場合は `[colspan=n]` のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。

`width` 
非推奨

この属性は、現在の列グループ内の各列に既定の幅を指定します。標準的なピクセル値やパーセント値に加えて、この属性は特別な書式である `0*` も使用できます。これはグループ内の各列の幅を、列の内容物を保持するのに必要最小限の幅にします。`5*` のような幅の相対値も使用できます。

例
-

`<table>` ページに `<col>` 要素の使用例があります。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 | 開始タグは必須ですが、終了タグを置いてはいけません。 |
| 許可されている親要素 | `<colgroup>` のみ。ただし開始タグが必須ではないため暗黙的に定義されることがあります。
 `<colgroup>` 要素は `span` 属性を持っていてはいけません。
  |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLTableColElement` |

仕様書
---

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

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

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

関連情報
----

* `<col>` 要素のスタイル設定に特に役立つであろう CSS プロパティと擬似クラス:
    + 列の幅を制御するための `width` プロパティ
    + 列内のセルの配置を設定するための `:nth-child` 擬似クラス
    + すべてのセル内コンテンツを '.' などの同一文字で揃えるための `text-align` プロパティ
<menuitem>
==========

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

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

**`<menuitem>`** は HTML の要素で、ユーザーがポップアップメニューから呼び出すことができるコマンドを表します。メニューボタンに割り当てるメニューはもちろん、コンテキストメニューも含みます。

コマンドはテキストのラベルと任意で外観を表すアイコン、あるいは代わりに別の要素で動作を定義する*インダイレクトコマンド*で明示的に定義できます。また、任意でコマンドにチェックボックスを含めたり、ラジオボタンを共有するグループにすることができます (インダイレクトコマンドのメニュー項目を `<input type="checkbox">` および `<input type="radio">` 要素に対して定義するとき、チェックボックスまたはラジオボタンを持ちます)。

属性
--

この要素にはグローバル属性があります。特に `title` 属性はコマンドの説明やヒントを出すのに使われます。

`checked` 
非推奨

Non-standard

コマンドが選択されているか否かを示す論理属性。`type` 属性が `checkbox` または `radio` のときのみ使われます。

`command` 
非推奨

Non-standard

別の要素の ID を指定して、間接的に実行するコマンドを示します。 `checked`, `disabled`, `icon`, `label`, `radiogroup`, `type` 属性も含むメニューアイテムで使用してはいけません。

`default` 
非推奨

Non-standard

この論理属性は、メニューのサブジェクト要素 (`button` や `input` など) と同じコマンドを使用することを示します。

`disabled` 
非推奨

Non-standard

現在の状態ではコマンドを使用できないことを示す論理属性です。`disabled` は `hidden` とは異なりますので注意してください。`disabled` 属性は、状態の変化によってコマンドが妥当になる状況で適切です。

`icon` 
非推奨

Non-standard

コマンドを表す画像を提供するために、画像の URL を指定します。

`label`

ユーザーに表示する、コマンドの名前です。`command` 属性を提供しない場合は必須です。

`radiogroup` 
非推奨

Non-standard

この属性は、選択されたときにラジオボタンを切り替えるコマンドのグループの名前を指定します。`type` 属性が `radio` である場合に限り使用できます。

`type` 
非推奨

Non-standard

この属性は、コマンドの種類を以下の 3 つの値のいずれかで示すことができます。

* `command`: 関連付けられたアクションを持つ、通常のコマンド。値がない場合の既定値です。
* `checkbox`: 2 つの異なる状態を切り替えできるコマンドを表します。
* `radio`: ラジオボタンで切り替え可能なコマンドのグループから 1 つを選択します。

例
-

### HTML


```html
<!-- A <div> element with a context menu -->
<div contextmenu="popup-menu">Right-click to see the adjusted context menu</div>

<menu type="context" id="popup-menu">
  <menuitem type="checkbox" checked>Checkbox</menuitem>
  <hr />
  <menuitem
 type="command"
 label="This command does nothing"
 icon="favicon-192x192.png">
    Commands don't render their contents.
  </menuitem>
  <menuitem
 type="command"
 label="This command has javascript"
 onclick="alert('command clicked')">
    Commands don't render their contents.
  </menuitem>
  <hr />
  <menuitem type="radio" radiogroup="group1">Radio Button 1</menuitem>
  <menuitem type="radio" radiogroup="group1">Radio Button 2</menuitem>
</menu>
```

### CSS


```css
div {
  width: 300px;
  height: 80px;
  background-color: lightgreen;
}
```

### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし。 |
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 | 開始タグが必須で、終了タグはあってはいけません。 |
| 許可されている親要素 | *ポップアップメニュー*状態である `<menu>`
 要素。（`<menu>` 要素の
 `type` 属性を指定する場合は
 `popup` にしなければなりません。属性がない場合は
 `<menu>`
 の親要素自体が*ポップアップメニュー*状態の
 `<menu>` であることが必要です。）
  |
| 許可されている ARIA ロール | なし |
| DOM インターフェイス | `HTMLMenuItemElement` (en-US) |

仕様書
---

現行のどの仕様書にも含まれていません。

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

どのブラウザーでも対応していません。この要素を唯一対応していたブラウザー Firefox は、85 で対応を削除しました。

関連情報
----

* HTML context menus in Firefox (Screencast and Code)
<rt>: ルビテキスト要素
==============

**`<rt>`** は HTML の要素で、ルビによる注釈（振り仮名）のルビテキストの部分を指定します。東アジアの組版において発音、翻訳、音写などの情報を提供するために使用します。 `<rt>` 要素は常に `<ruby>` 要素の中で使用されます。

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

より多くの例については `<ruby>` 要素についての記事を参照してください。

属性
--

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

例
-

### ルビ注釈の使用

この例では、 `<ruby>` 要素内の漢字にローマ字表記を提供します。


```html
<ruby> 漢 <rt>Kan</rt> 字 <rt>ji</rt> </ruby>
```


```
body {
  font-size: 22px;
}
```


#### 結果

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* `<ruby>`
* `<rp>`
* `<rb>`
* `<rtc>`
* `text-transform: full-size-kana`
<acronym>
=========

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

概要
--

**`<acronym>`** は HTML の要素で、頭字語または略語の単語を構成する文字の並びを明示することができます。

**警告:** この要素は使用しないでください。代わりに `<abbr>` 要素を使用してください。

属性
--

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

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

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

例
-


```html
<p>
  The <acronym title="World Wide Web">WWW</acronym> is only a component of the
  Internet.
</p>
```

### 結果

既定のスタイル
-------

このタグの目的は単に作者の利便性のためのものであるため、ブラウザーによって既定のスタイルは様々です。

* Opera、Firefox、Chrome などでは、この要素の内容に点線の下線が付きます。
* ブラウザーによっては点線の下線を引くだけでなく、スモールキャップスにします。このスタイルを抑制するには、CSS で `font-variant``: none` などをつけてください。

従って、この要素に明確にスタイルを与えるか、ブラウザー間の違いを気にしないようにするかする必要があります。

仕様書
---

| Specification |
| --- |
| HTML Standard # acronym |

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

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

関連情報
----

* HTML の `<abbr>` 要素
<option>: HTML 選択肢要素
====================

**`<option>`** は HTML の要素で、`<select>`、`<optgroup>`、`<datalist>` の各要素内で項目を定義するために使われます。したがって、`<option>` は HTML 文書でポップアップメニューのメニュー項目や、その他の項目の一覧を表すことができます。

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

属性
--

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

`disabled`

この論理属性を設定すると、選択肢が選択不能になります。多くのブラウザーはそのようなコントロールをグレーアウトで表示し、マウスクリックやフォーカスなど、いかなるイベントも受け付けなくなります。この属性を設定していなくても、祖先に無効状態の `<optgroup>` 要素がある場合は無効化されます。

`label`

この属性は、選択肢の意味を示すラベル文字列です。`label` 属性を定義していない場合は、要素の文字列コンテンツが要素の値になります。

`selected`

この論理属性を設定すると、その選択肢が初期状態で選択されます。この `<option>` 要素の祖先の `<select>` 要素に `multiple` が設定されていない場合、`<select>` 要素内で `selected` 属性が設定できる `<option>` 要素は 1 つだけです。

`value`

この属性の内容は、フォームで送信する値を表します。値を送信するには、選択肢を選択しなければなりません。この属性を省略すると、option 要素の中の文字列が値となります。

CSS でのスタイル設定
------------

**`<option>`** 要素のスタイル設定は非常に制限されています。選択肢は親要素で設定したフォントを継承しません。Firefox では `color` と `background-color` のみが設定可能ですが、Safari では何もプロパティを設定することはできません。スタイル設定についての詳細は、フォームへの高度なスタイル設定のガイドをご覧ください。

例
-

`<select>` 要素の例をご覧ください。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | エスケープされた文字（例えば `&eacute;`）を含むテキスト |
| タグの省略 | 
 開始タグは必須。直後に他の `<option>` 要素または
 `<optgroup>`
 要素がある場合、または親要素が他に内容を持たない場合は終了タグを省略可能。
  |
| 許可されている親要素 | `<select>`
 要素、`<optgroup>`
 要素、`<datalist>` 要素
  |
| 暗黙の ARIA ロール | `option` |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLOptionElement` |

仕様書
---

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

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

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

関連情報
----

* 他のフォーム関連要素: `<form>`, `<legend>`, `<label>`, `<button>`, `<select>`, `<datalist>`, `<optgroup>`, `<fieldset>`, `<textarea>`, `<input>`, `<output>`, `<progress>`, `<meter>`
<dd>: 詳細説明要素
============

**`<dd>`** は HTML の要素で、説明リスト要素 (`<dl>`) 内で、その前の用語 (`<dt>`) の説明、定義、値などを示します。

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

属性
--

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

`nowrap` 
Non-standard

この属性の値が `yes` とされた場合、定義部分のテキストは改行されません。既定値は `no` です。

例
-

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

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | フローコンテンツ |
| タグの省略 | 開始タグは必須。この要素の直後に他の `<dd>` 要素または `<dt>` 要素がある場合、もしくは親要素内で後続する内容物がない場合は、終了タグが省略可能となる。 |
| 許可されている親要素 | `<dl>` 要素または `<dl>` 要素内にある `<div>` 要素。この要素は `<dt>` または他の `<dd>` の後に使うことができます。 |
| 暗黙の ARIA ロール | `definition` (en-US) |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

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

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

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

関連情報
----

* `<dl>`
* `<dt>`
<time>: （日付）時刻要素
================

**`<time>`** は HTML の要素で、特定の時の区間を表します。`datetime` 属性を使用して、機械可読な形式の日付を記述することができ、検索エンジンの結果を改善したりリマインダーなどの独自機能に使用したりすることができます。

次のうちの一つを表します。

* 24 時間制の時刻
* グレゴリオ暦の正確な日付 (時刻やタイムゾーンを伴うことも可能)
* 有効な期間
試してみましょう
--------

属性
--

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

`datetime`

この属性は要素の日付や時刻を表し、下記に示す書式のうちの一つでなければなりません。

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

この要素は、機械可読な形式で日付や時刻を表現するためのものです。例えばユーザーエージェントが、ユーザーのカレンダーにイベントの予定情報を提供することに役立てることができます。

この要素はグレゴリオ暦導入前の日付に対して使用するべきではありません（日付の計算で混乱するため）。

*datetime 値*（機械可読な日時の値）は要素の `datetime` 属性の値であり、正しい書式（下記参照）でなければなりません。要素に `datetime` 属性がない場合、**子孫要素を持ってはならず**、 *datetime 値* は要素のテキストの内容になります。

### 有効な datetime 値

有効な年の文字列

`2011`

有効な月の文字列

`2011-11`

有効な日付の文字列

`2011-11-18`

年のない有効な日付の文字列

`11-18`

有効な週の文字列

`2011-W47`

有効な時刻の文字列

`14:54`

`14:54:39`

`14:54:39.929`

有効なローカル日時の文字列

`2011-11-18T14:54:39.929`

`2011-11-18 14:54:39.929`

有効なグローバル日時の文字列

`2011-11-18T14:54:39.929Z`

`2011-11-18T14:54:39.929-0400`

`2011-11-18T14:54:39.929-04:00`

`2011-11-18 14:54:39.929Z`

`2011-11-18 14:54:39.929-0400`

`2011-11-18 14:54:39.929-04:00`

有効な期間の文字列

`PT4H18M3S`

例
-

### 単純な例

#### HTML


```html
<p>
  コンサートは <time datetime="2018-07-07T20:00:00">20:00</time> に始まります。
</p>
```


#### 結果

### `datetime` の例

#### HTML


```html
<p>
  コンサートは
  <time datetime="2001-05-15T19:00">5 月 15 日</time>に開催されます。
</p>
```


#### 結果

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* `<data>` 要素では、他の種類の値を示すことが可能です。
<colgroup>: 表の列グループ要素
=====================

**`<colgroup>`** は HTML の要素で、表内の列のグループを定義します。

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

属性
--

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

`span`

この属性は正の整数で、`<colgroup>` 要素がまたがる列の数を示します。存在しない場合の既定値は `1` です。

`span` 属性は、1 つ以上の `<col>` 要素が `<colgroup>` の中にある場合は許可されません。

### 非推奨の属性

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

`align` 
非推奨

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

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

この属性が設定されていない場合は、`left` 値であるものとします。子孫の `<col>` 要素は自身の `align` 属性を使用して、この値を上書きできます。

**メモ:** `text-align` プロパティを、 `<colgroup>` 要素を与えたセレクターに設定しようとしてはいけません。 `<td>` 要素は `<colgroup>` 要素の子孫ではないため、プロパティを継承しません。

表で `colspan` 属性を使用していない場合は、列ごとに 1 つずつ `td:nth-child(an+b)` CSS セレクターを使用してください。a は表内の列数、b は表内の列の位置を示す序数です。このセレクターの後でのみ `text-align` プロパティが使用できます。

表で `colspan` 属性を使用している場合は `[colspan=n]` のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。

`bgcolor` 
非推奨

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

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

`char` 
非推奨

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

`charoff` 
非推奨

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

`valign` 
非推奨

この属性は、各列の内容物の垂直方向の配置方法を制御します。以下の値が指定可能です。

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

**メモ:** `vertical-align` プロパティを、 `<colgroup>` 要素を与えたセレクターに設定しようとしてはいけません。`<td>` 要素は `<colgroup>` 要素の子孫ではないため、プロパティを継承しません。

表で `colspan` 属性を使用していない場合は、`td:nth-child(an+b)` CSS セレクターを使用してください。 a は表の列数、 b は表内の列の位置を示す序数です。このセレクターの後でのみ `vertical-align` プロパティを使用できます。

表で `colspan` 属性を使用している場合は `[colspan=n]` のような、十分な CSS 属性セレクターの組み合わせで実現できますが、容易ではありません。

例
-

`<colgroup>` 要素の使用例については、`<table>` 要素のページを参照してください。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | `span` 属性が存在する場合:
 なし。この属性がない場合: 0 個以上の `<col>` 要素。
  |
| タグの省略 | 
 最初の子要素が `<col>`
 要素であり、かつ終了タグを省略した `<colgroup>`
 要素が前にない場合は、開始タグを省略できます。空白またはコメントが後にない場合は、終了タグを省略できます。
  |
| 許可されている親要素 | `<table>`
 要素。`<colgroup>` は省略可能な
 `<caption>` 要素より後、かつ
 `<thead>`, `<th>`,
 `<tbody>`, `<tfoot>`,
 `<tr>` の各要素より前に置かなければなりません。
  |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLTableColElement` |

仕様書
---

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

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

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

関連情報
----

* `<col>` 要素のスタイル付けに特に便利な CSS プロパティおよび擬似クラス:
    + 列の幅を制御するための `width` プロパティ
    + 列内のセルの配置を設定するための `:nth-child` 擬似クラス
    + すべてのセル内コンテンツを '.' などの同一文字で揃えるための `text-align` プロパティ
<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>`