recursal/MDN huggingface dataset:
HTML 属性: for
============

**`for`** 属性は `<label>` と `<output>` で利用できる属性です。 `<label>` 要素上で使用された場合、このラベルが説明するフォーム要素を示します。 `<output>` 要素上で使用された場合、その出力欄で使用される値を表す要素間の関係を明示的に示すことができます。

使用方法
----

`<label>` の属性として使用された場合、 `for` 属性はそのラベルが関連するフォーム要素の `id` 値を保持します。


```html
<label for="username">Your name</label> <input type="text" id="username" />
```


`<output>` の属性として使用された場合、 `for` 属性はその出力を作成するために使用される要素の `id` 値を、空白で区切ったリストである値を保持します。


```html
<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>
```

例
-

`<label>` および `<output>` の要素ページの使用例を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-label-for |
| HTML Standard # attr-output-for |

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

### html.elements.label.for

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

### html.elements.output.for

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTML 属性: dirname
================

**`dirname`** 属性は `<textarea>` および `<input>` 要素で用いることができ、フォームの送信時に要素のテキストの内容の向きを表します。
 ブラウザーは、この属性の値をユーザーが入力したテキストが左から右に読むのか、右から左に読むのかを識別するのに用います。
 使用された場合、要素のテキストの方向の値がフォームの送信データに含まれ、そのフィールド名は `dirname` 属性の値になります。

使用法のメモ
------

`dirname` 属性はすべての `<textarea>` 要素、および種類が text、search、tel、url、email のいずれかであるすべての `<input>` 要素で用いることができます。

 送信されるデータの形式は `{dirname_value}={direction}` です。`{dirname_value}` は `dirname` 属性の値に、`{direction}` はテキストの方向になります。
 たとえば、ユーザーが属性 `name="comment"` および `dirname="comment-direction"` を持つ要素に「Hello」を入力した場合、`GET` リクエストでフォームを送信する際の URL エンコードされたデータは `comment=Hello&comment-direction=ltr` となるでしょう。

方向は、以下のいずれかです。

`rtl`

ユーザーが入力したテキストを書く方向は右から左です。

`ltr`

ユーザーが入力したテキストを書く方向は左から右です。

テキストの方向が指定されていない場合は、ユーザーエージェントはフォームが入っている親要素のテキストの方向を用います。それも指定されていない場合は、ユーザーエージェントのデフォルトのテキストの方向を用います。

例
-

### textarea 要素の方向

この例では、textarea 要素に `dir="auto"` 属性を指定することで、ユーザーが入力したテキストに基づいてテキストの方向を自動で識別できるようにしています。


```html
<form method="get" action="https://www.example.com/submit">
  <textarea name="comment" dir="auto" dirname="comment-direction">سيب</textarea>
  <button type="submit">挨拶を送信</button>
</form>
```


 ユーザーがフォームを送信するとき、ユーザーエージェントは名前が `comment`、値が「سيب」のフィールドと、名前が `comment-direction`、値が「rtl」のフィールドの 2 個のフィールドを含めます。
 送信用に URL エンコードされたボディは以下のようになります。


```url
https://www.example.com/submit?comment=%D8%B3%D9%8A%D8%A8&comment-direction=rtl
```

### input 要素の方向

この例では、input 要素に `dir="auto"` 属性を指定することで、ユーザーが入力したテキストに基づいてテキストの方向を自動で識別できるようにしています。


```html
<form method="get" action="https://www.example.com/submit">
  <input
 type="text"
 name="comment-input"
 dir="auto"
 dirname="comment-direction"
 value="Hello" />
  <button type="submit">挨拶を送信</button>
</form>
```


ユーザーがフォームを送信するとき、ユーザーエージェントは名前が `comment-input`、値が「Hello」のフィールドと、名前が `comment-direction`、値が「ltr」のフィールドの 2 個のフィールドを含めます。


```url
https://www.example.com/submit?comment-input=Hello&comment-direction=ltr
```

### 方向の継承

以下の `<input>` 要素と `<textarea>` 要素には `dir` 属性が無いので、親要素から明示的に指定されたテキストの方向 `rtl` を継承します。


```html
<div dir="rtl">
  <form method="get" action="https://www.example.com/submit">
    <input
 type="text"
 name="user"
 dirname="user-direction"
 value="LTR Username" />
    <textarea name="comment" dirname="comment-direction">LTR Comment</textarea>
    <button type="submit">コメントを投稿</button>
  </form>
</div>
```


送信用に URL エンコードされたボディは以下のようになります。


```url
https://www.example.com/submit?user=LTR+Username&user-direction=rtl&comment=LTR+Comment&comment-direction=rtl
```

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-fe-dirname |

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

### html.elements.textarea.dirname

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

### html.elements.input.dirname

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

関連情報
----

* `dir` 属性
* `<input>`
* `<textarea>`
HTML 属性: capture
================

**`capture`** 属性は、オプションとして、新しいファイルをキャプチャすることと、 `accept` 属性で定義された種類の新しいメディアをどの機器でキャプチャするかを指定します。

値としては、 `user` と `environment` があります。 capture 属性は file 入力型が対応しています。

`capture` 属性は、accept 属性が入力の種類を示す場合、画像やビデオデータの取り込みに使用するカメラを指定する文字列をその値として受け取ります。

| 値 | 説明 |
| --- | --- |
| `user` | ユーザー側のカメラやマイクを使用します。 |
| `environment` | 外向きのカメラやマイクを使用します。 |

**メモ:** capture は、以前は論理属性で、存在する場合、ファイル入力を要求する代わりに、カメラやマイクなどの機器のメディアキャプチャ機器を使用するように要求していました。

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

例
-

ファイル入力型に設定すると、マイクやカメラを搭載した OS では、既存のファイルから選択したり、新規にファイルを作成したりできるユーザーインターフェースが表示されます。


```html
<p>
  <label for="soundFile">What does your voice sound like?:</label>
  <input type="file" id="soundFile" capture="user" accept="audio/\*" />
</p>
<p>
  <label for="videoFile">Upload a video:</label>
  <input type="file" id="videoFile" capture="environment" accept="video/\*" />
</p>
<p>
  <label for="imageFile">Upload a photo of yourself:</label>
  <input type="file" id="imageFile" capture="user" accept="image/\*" />
</p>
```


なお、これらはモバイル端末でより効果的に機能します。お使いの端末がデスクトップコンピュータの場合、一般的なファイルピッカーが表示されるでしょう。

仕様書
---

| Specification |
| --- |
| HTML Media Capture # dfn-capture |

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

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

関連情報
----

* ウェブアプリケーションからのファイルの使用
* ファイル API
* `HTMLInputElement.files`
HTML 属性: readonly
=================

**`readonly`** は論理属性で、存在する場合、要素が変更可能ではなくなり、ユーザーがそのコントロールを編集できなくなります。

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

概要
--

`readonly` 属性が input 要素に指定された場合、その入力欄をユーザーが編集できないので、その要素は制約検証が行われません。

`readonly` 属性はフォームコントロールの `text`, `search`, `url`, `tel`, `email`, `password`, `date`, `month`, `week`, `time`, `datetime-local`, `number` の ``<input>`` 型と ``<textarea>`` 要素が対応しています。これらの入力型や要素のいずれかに設定された場合、``:read-only`` 擬似クラスが一致します。この属性が含まれなかった場合は、``:read-write`` 擬似クラスが一致します。

この属性は ``<select>`` や、 checkbox や radio のように既に変更不可能な入力型、file 入力型のように定義上初期状態で値を設定できない入力型は対応していません。range や color は、どちらも既定値があります。hidden も、非表示であればユーザーが値を入力することが期待できないので対応していません。ボタン型も、`image` を含め、すべて対応していません。

**メモ:** テキストコントロールだけが読み取り専用にすることができます。他のコントロール（チェックボックスやボタンなど）は、読み取り専用と無効との間に有用な違いがないため、 `readonly` 属性は適用されません。

入力に `readonly` 属性が設定されている場合、 `:read-only` 擬似クラスも適用されます。逆に、 `readonly` 属性に対応していても、この属性が設定されていない入力欄は、 `:read-write` 擬似クラスに一致します。

### 属性の相互作用

`disabled` と `readonly` の違いは、読み取り専用 (readonly) のコントロールは機能し、フォーカスを設定することもできるのに対し、無効な (disabled) コントロールはフォーカスを受け取ることができず、フォームで送信されず、一般に有効化されるまでコントロールとしては機能しません。

読み取り専用のフィールドはユーザーの操作で値を変更することはできないので、 `required` は `readonly` 属性が一緒に指定されている入力欄では効果がありません。

readonly が付いた値を動的に変更できる唯一の方法は、スクリプトを通して行うことです。

**メモ:** `required` 属性は `readonly` 属性が指定された入力欄では許可されていません。

### ユーザビリティ

ブラウザーは `readonly` 属性を表示します。

### 制約検証

要素が読み取り専用である場合、要素の値をユーザーによって更新することができないため、制約検証は行われません。

例
-

### HTML


```html
<div class="group">
  <input type="text" value="Some value" readonly="readonly" id="text" />
  <label for="text">Text box</label>
</div>
<div class="group">
  <input type="date" value="2020-01-01" readonly="readonly" id="date" />
  <label for="date">Date</label>
</div>
<div class="group">
  <input type="email" value="Some value" readonly="readonly" id="email" />
  <label for="email">Email</label>
</div>
<div class="group">
  <input type="password" value="Some value" readonly="readonly" id="pwd" />
  <label for="pwd">Password</label>
</div>
<div class="group">
  <textarea readonly="readonly" id="ta">Some value</textarea>
  <label for="ta">Message</label>
</div>
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # the-readonly-attribute |

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

### html.elements.input.readonly

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

### html.elements.textarea.readonly

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

関連情報
----

* `:read-only` および `:read-write`
* `<input>`
* `<select>`
rel=manifest
============

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`manifest`** キーワードを `<link>` 要素の `rel` 属性に指定すると、ターゲットリソースがウェブアプリマニフェストであることを示します。

仕様書
---

| Specification |
| --- |
| HTML Standard # link-type-manifest |

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

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

**`modulepreload`** キーワードを `<link>` 要素の `rel` 属性に指定すると、モジュールスクリプトとその依存関係を先取りして取得し、後で評価するために文書のモジュールマップに保存するための宣言的な方法を提供します。

仕様書
---

| Specification |
| --- |
| HTML Standard # link-type-modulepreload |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
rel=dns-prefetch
================

**`dns-prefetch`** キーワードを `<link>` 要素の `rel` 属性に指定すると、ユーザーがターゲットリソースのオリジンにあるリソースを必要としている可能性が高く、したがってブラウザーがそのオリジンの DNS 解決を先取りして実行することでユーザーの使い勝手が向上する可能性が高いというヒントをブラウザーに与えます。

詳しくは dns-prefetch の使用 (en-US)を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # link-type-dns-prefetch |

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

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

**`noreferrer`** キーワードを `<a>`, `<area>`, `<form>` の各要素の `rel` 属性に指定すると、ターゲットリソースへ移動する際、 `Referer` ヘッダーを省略してリファラー情報が漏洩しないようにブラウザーに指示します。それに加えて、 `noopener` キーワードを設定しているかのように動作します。

仕様書
---

| Specification |
| --- |
| HTML Standard # link-type-noreferrer |

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

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

**`preconnect`** キーワードを `<link>` 要素の `rel` 属性に使用すると、ユーザーがターゲットリソースのオリジンからのリソースを必要とする可能性が高いことをブラウザーに示唆します。そのため、ブラウザーはそのオリジンへの接続を事前に開始することでユーザーの操作性を向上させることができる可能性があります。事前接続は、ハンドシェイクの一部またはすべてを事前に実行することにより、指定された元からの将来の読み込みを高速化します（HTTP の場合は DNS+TCP、HTTPS の場合は DNS+TCP+TLS が元となります）。


```html
<link rel="preconnect" href="https://example.com" />
```

仕様書
---

| Specification |
| --- |
| HTML Standard # link-type-preconnect |

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

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

**`me`** は `rel` 属性のキーワードで、 `<link>` および `<a>` 要素で使用します。現在のリソースがリンク先の当事者によって表されていることを示します。この `me` 値は XHTML Friends Network (XFN) 仕様書 で導入されたものです。


```html
<link rel="me" value="example.com" />
```


`rel="me"` 属性は RelMeAuth や Web sign in 仕様書において、ドメイン名や特定の URL を使用してウェブサービスに対して個人を特定できるようにする方法として使用されています。

仕様書
---

#### No specification found

No specification data found for `html.elements.link.rel.me`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

**`prefetch`** キーワードを `<link>` 要素の `rel` 属性に設定すると、ユーザーが将来の操作でターゲットリソースを必要とする可能性が高く、したがってブラウザーはリソースを先読みしてキャッシュすることでユーザーの使い勝手を向上させることができる可能性があることをブラウザーに示唆するものです。

仕様書
---

| Specification |
| --- |
| HTML Standard # link-type-prefetch |

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

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

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`prerender`** キーワードを `<link>` 要素の `rel` 属性に設定すると、ユーザーが次のナビゲーションで対象のリソースを必要とするかもしれないので、ブラウザはリソースを先取りして取得・処理し、例えばサブリソースの取得や画面外のバックグラウンドで何らかのレンダリングを実行すれば、おそらくユーザー体験を改善できる、というヒントになるものです。

仕様書
---

#### No specification found

No specification data found for `html.elements.link.rel.prerender`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

**`noopener`** キーワードを `<a>`, `<area>`, `<form>` の各要素の `rel` 属性に指定すると、ターゲットリソースへ移動する際、開いた元の文書へのアクセスを新しい閲覧コンテキストに許可しないことをブラウザーに指示します。開かれたウィンドウの `Window.opener` プロパティプロパティは設定されません（`null` を返します）。

これは、信頼されていないリンクを開くときに特に有効で、 `Window.opener` プロパティを介して発信元の文書を改ざんできないようにするためです (詳細は rel=noopener についてを参照してください)。ただし、 HTTP の `Referer` ヘッダーは（`noreferrer` を同時に使用しない限り）提供されます。

なお、 `noopener` を使用した場合、ターゲット名に `_top`, `_self`, `_parent` 以外の空でない名前を使用すると、新しいウィンドウやタブを開くかどうかの判断において、すべて `_blank` と同様に扱われます。

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

仕様書
---

| Specification |
| --- |
| HTML Standard # link-type-noopener |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<portal>: ポータル要素
================

**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`<portal>`** は HTML の要素で、他の HTML ページを現在のページに埋め込み、新しいページへの移動がスムーズにできるようにします。

`<portal>` は `<iframe>` に似ています。 `<iframe>` では独立した閲覧コンテキストを作成して埋め込みます。しかし、 `<portal>` で埋め込まれるコンテンツは `<iframe>` の場合よりも制限されます。これを操作することはできませんので、文書にウィジェットを埋め込むには適していません。その代わり、 `<portal>` は他のページのコンテンツのプレビューとして動作します。そのため、埋め込まれたコンテンツへのシームレスな遷移により移動を行うことができます。

属性
--

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

`referrerpolicy`

リファラーポリシーを設定します。これは、 `src` 属性の値で指定された URL のページをリクエストする際に使用されます。

`src`

埋め込むページの URL です。

例
-

### 基本的な例

以下の例は `https://example.com` のコンテンツをプレビューとして埋め込みます。


```html
<portal id="exampleportal" src="https://example.com/"></portal>
```

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

`<portal>` が表示するプレビューは、操作が可能ではないため、入力イベントやフォーカスを受けません。そのため、ポータルの埋め込みコンテンツは、アクセシビリティツリーの要素として公開されません。ポータルは、ボタンのように移動してアクティブにすることができ、クリックしたときの既定の動作は、ポータルを有効にすることです。

ポータルには、埋め込まれたページのタイトルが既定のラベルが与えられます。タイトルがない場合は、プレビューで表示されるテキストが結合されてラベルが作成されます。`aria-label` (en-US) 属性を使用すると、これを上書きすることができます。

事前レンダリングのためにポータルを使用する場合は、 HTML の hidden 属性または CSS の `display` プロパティの値を `none` にして非表示にしてください。

ポータルがアクティブ化している間にアニメーションを使用する場合は、 `prefers-reduced-motion` メディア特性を尊重してください。

技術的概要
-----

|  |  |
| --- | --- |
| 暗黙の ARIA ロール | button |
| DOM インターフェイス | `HTMLPortalElement` |

仕様書
---

| Specification |
| --- |
| Portals # the-portal-element |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<noembed>: 埋め込みフォールバック要素
========================

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

**`<noembed>`** は HTML の要素で、廃止された、標準外の方法であり、 `<embed>` 要素に対応していないブラウザーや、ユーザーが仕様とした種類の埋め込みコンテンツに対応していないブラウザーで代替または「フォールバック」コンテンツを提供するものです。これは HTML 4.01 で非推奨となり、代替コンテンツは `<object>` 要素の開始タグと終了タグの間に配置されるようになりました。

**メモ:** 現在のところ、この要素はまだ多くのブラウザーで動作しますが、廃止されており、使用するべきではありません。代わりに `<object>` 要素の開始タグと終了タグの間にフォールバックコンテンツを入れて使用して下さい。

例
-

`<noembed>` 要素内のメッセージは、ブラウザーが `<embed>` 要素に対応していない場合にのみ表示されます。

### 代替コンテンツの表示


```html
<embed type="vide/webm" src="/media/examples/flower.mp4" width="200" height="200">
  <noembed>
    <h1>代替コンテンツ</h1>
  </noembed>
</embed>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # noembed |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<object>: 外部オブジェクト要素
====================

**`<object>`** は HTML の要素で、画像、内部の閲覧コンテキスト、プラグインによって扱われるリソースなどのように扱われる外部リソースを表します。

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

属性
--

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

`archive` 
非推奨

オブジェクトのリソースの URI 群を、半角スペースで区切って指定します。

`border` 
非推奨

コントロールの境界線の幅で、ピクセル単位です。

`classid` 
非推奨

オブジェクトの実装の URI。 **data** 属性とともに、または **data** 属性の代替として用いることができます。

`codebase` 
非推奨

**classid** 属性、**data** 属性、**archive** 属性で指定された相対 URI を解決するための基準パス。指定しない場合、既定値は現在の文書のベース URI となります。

`codetype` 
非推奨

**classid** によって指定されたデータのコンテンツ型。

`data`

リソースのアドレスを有効な URL で指定。**data** 属性と **type** 属性のうち、少なくとも 1 つは定義しておく必要があります。

`declare` 
非推奨

この論理属性は属性名を指定するだけで有効になります。オブジェクトは、後続する `<object>` 要素でインスタンス化しなければなりません。HTML5 ではリソースを再利用するごとに、完全な形の <object> 要素を繰り返し配置します。

`form`

このオブジェクト要素がフォームに関連付けられていれば、そのフォーム要素（*フォームオーナー*）。属性値は、同一文書内の `<form>` 要素の ID でなければなりません。

`height`

表示されるリソースの高さを CSS ピクセル数 で指定。(絶対値に限ります。パーセント値は不可)

`name`

有効な閲覧コンテキストの名前 (HTML5) またはコントロールの名前 (HTML 4)。

`standby` 
非推奨

オブジェクトの実装とデータの読み込み中にブラウザーに表示することができるメッセージ。

`type`

**data** 属性によって指定されたリソースの コンテンツ型。**data** 属性と **type** 属性のうち、少なくとも 1 つは定義しておく必要があります。

`usemap`

`<map>` 要素を参照するハッシュ名。 '#' の後に map 要素の `name` 属性を繋げた文字列を属性値として記述します。

`width`

表示されるリソースの幅を CSS ピクセル数 で指定。（絶対的な値に限ります。パーセンテージは不可）

例
-

### 動画を埋め込む

#### HTML


```html
<object
 type="video/mp4"
 data="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
 width="600"
 height="140">
  <img src="path/image.jpg" alt="useful image description" />
</object>
```


#### 結果

この例の動画が読み込めなかった場合、代替コンテンツとしてユーザーに画像が提供されます。画像を表示するために `<img>` タグを使用しています。`src` 属性には埋め込みたい画像のパスを設定します。また、画像にアクセシビリティのある名前を提供するために `alt` 属性も記載しています。画像も読み込めなかった場合は、`alt` 属性のコンテンツが表示されます。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、記述コンテンツ、埋め込みコンテンツ、知覚可能コンテンツ、要素が `usemap` 属性を持つ場合は 対話型コンテンツ、リスト化/送信可能 な フォーム関連要素 |
| 許可されている内容 | 0 個以上の `<param>` 要素とそれに続く 透過的コンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 埋め込みコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | `application`, `document`, `img` (en-US) |
| DOM インターフェイス | `HTMLObjectElement` |

仕様書
---

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

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

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

関連情報
----

* `<embed>`
* `<param>`
<search>: 一般検索要素
================

**`<search>`** は HTML の要素で、文書やアプリケーションのうち、検索や絞り込み操作を行うことに関連する、フォームコントロールやその他のコンテンツの部分を表すコンテナーです。`<search>` 要素は意味的に、要素の内容の目的が検索や絞り込み機能であることを示します。検索や絞り込み機能は、ウェブサイトやアプリケーション、現在のウェブページや文書、あるいはインターネット全体やそのサブセクションを対象とする可能性があります。

属性
--

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

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

`<search>` 要素は検索結果を表示するためのものではありません。むしろ、検索やフィルタリングの結果はそのウェブページのメインコンテンツの一部として存在するべきです。とはいえ、検索や 絞り込み機能の中の「クイック検索」機能の一部である提案やリンクは、検索機能なので `<search>` 要素のコンテンツの中で入れ子にするのが適切です。

例
-

### ヘッダーの検索フォーム

この例では、単純なサイト全体の検索を行うために、ウェブサイトヘッダー内の検索のコンテナーとして `<search>` を使用する例を示します。`<search>` は `<form>` の意味づけコンテナーであり、ユーザーが入力した検索クエリーをサーバーへ送信します。

#### HTML


```html
<header>
  <h1>動画のウェブサイト</h1>
  <search>
    <form action="./search/">
      <label for="movie">動画を検索</label>
      <input type="search" id="movie" name="q" />
      <button type="submit">検索</button>
    </form>
  </search>
</header>
```


#### 結果

### ウェブアプリの検索

この例は、ウェブアプリケーションで JavaScript によって動的に行うの検索機能を実装する際の DOM コンテンツの可能性を示しています。検索機能がすべて JavaScript で実装された場合、フォームが送信されなければ `<form>` 要素も送信 `<button>` も必要ありません。意味づけのために、`<search>` 要素が検索と絞り込み機能を含めるために使用されています。

#### HTML


```html
<search>
  <label>
    検索して絞り込み
    <input type="search" id="query" />
  </label>
  <label>
    <input type="checkbox" id="exact-only" />
    完全一致のみ
  </label>

  <section>
    <h3>結果:</h3>
    <ul id="results">
      <!-- 検索結果コンテンツ -->
    </ul>
    <output id="no-results">
      <!-- 結果のない時のコンテンツ -->
    </output>
  </section>
</search>
```


#### 結果

**メモ:** JavaScript を使用していないユーザーもいること、そして JavaScript が正常にダウンロードされ、解釈され、実行されるまでは、どのユーザーも JavaScript を実行していないことを忘れずにしてください。ユーザーが JavaScript を無効にしていても、確実にサイトのコンテンツにアクセスできるように保証してください。

### 複数の検索

この例は、2 つの検索機能を持つページを示しています。最初の検索はヘッダー上のグローバルサイト検索です。2 つ目はページのコンテキストに基づいた検索とフィルターで、この例では車の検索です。

#### HTML


```html
<body>
  <header>
    <h1>Car rental agency</h1>
    <search title="Website">...</search>
  </header>
  <main>
    <h2>Cars available for rent</h2>
    <search title="Cars">
      <h3>Filter results</h3>
      ...
    </search>
    <article>
      <!-- search result content -->
    </article>
  </main>
</body>
```


#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ, 知覚可能コンテンツ. |
| 許可されているコンテンツ | フローコンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 暗黙の ARIA ロール | `search` |
| 許可されている ARIA ロール | `form`, `group`, `none` (en-US), `presentation`, `region`, `search` |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

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

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

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

関連情報
----

* 他の検索に関する要素: `<header>`, `<footer>`, `<aside>`, `<nav>`, `<form>`
* ARIA: Search ロール
<q>: インライン引用要素
==============

**`<q>`** は HTML の要素で、中に含まれるテキストが短いインラインの引用であることを示します。最近の多くのブラウザーでは、文字列を引用符で囲むように実装しています。この要素は、段落区切りをまたがない短い引用のためのものです。長文の引用には、 `<blockquote>` 要素を使用してください。

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

属性
--

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

`cite`

この属性の値は、引用した情報の引用元となる文書やメッセージの URL です。この属性は、引用文のコンテキストや参照先を説明する情報を指すためのものです。

例
-


```html
<p>
  According to Mozilla's website,
  <q cite="https://www.mozilla.org/en-US/about/history/details/">
    Firefox 1.0 was released in 2004 and became a big success.
  </q>
</p>
```

### 結果

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* `<blockquote>` 要素は長い引用のためのものです。
* `<cite>` 要素は引用元のためのものです。
<image>: 画像要素
=============

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

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

**`<image>`** は HTML の要素で、`<img>` 要素の古く、対応が不十分な前身です。
 **使用しないでください**。

ブラウザーによっては、これを自動的に `<img>` 要素に変換しようとし、`src` 属性も指定されていれば成功することがあります。

仕様書
---

 これは正式な仕様書の一部として現れていません。
 HTML+ Discussion Document - Dave Raggett, November 8, 1993 (Section 5.9 - Images) では言及されていますが、 1994 年の HyperText Markup Language Specification - 2.0 の最初の改定では含まれていませんでした。

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

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

関連情報
----

* `<img>`: 文書中で画像を表示する正しい方法
* `<picture>`: 文書中で画像を表示するもっと強力な方法
<dt>: 説明用語要素
============

**`<dt>`** は HTML の要素で、説明または定義リストの中で用語を表す部分であり、`<dl>` の子要素としてのみ用いることができます。普通は `<dd>` 要素が続きます。しかし、複数の `<dt>` 要素が続くと、複数の用語がすぐ後に続く `<dd>` 要素で定義されていることを表します。

後に続く `<dd>`（**詳細説明**）要素は、 `<dt>` を用いて指定した用語について、定義やその他の関連する文字列を表します。

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

属性
--

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

例
-

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

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | フローコンテンツ。ただし配下に `<header>`、`<footer>`、区分コンテンツ、見出しコンテンツがないもの。 |
| タグの省略 | 開始タグは必須。終了タグについては、他の `<dt>` または `<dd>` 要素が後続する場合、もしくは親要素の中にそれ以上のコンテンツがない場合は省略可能。 |
| 許可されている親要素 | `<dl>` または（WHATWG HTML および W3C HTML 5.2 以降においては）`<dl>` の子である `<div>`。この要素は `<dd>` または他の `<dt>` の前で使用することができる。 |
| 暗黙の ARIA ロール | `term` |
| 許可されている ARIA ロール | `listitem` |
| DOM インターフェイス | `HTMLElement`。 Gecko 1.9.2 (Firefox 4) 以前では、Firefox はこの要素に対し `HTMLSpanElement` インターフェイスを実装していました。 |

仕様書
---

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

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

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

関連情報
----

* `<dl>`
* `<dd>`