recursal/MDN huggingface dataset:
<tfoot>: 表フッター要素
================

**`<tfoot>`** は HTML の要素で、表の一連の列を総括する行のセットを定義します。

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

属性
--

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

### 非推奨の属性

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

`align` 
非推奨

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

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

この属性が設定されていない場合は、`left` 値であるものとします。

**メモ:**

* `left`, `center`, `right`, `justify` の値と同様の効果を得るには、 CSS の `text-align` プロパティを使用してください。
* CSS で `char` の値と同様の効果を得るには、 `char` の値を `text-align` プロパティの値として使用することができます。

`bgcolor` 
非推奨

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

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

`char` 
非推奨

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

`charoff` 
非推奨

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

`valign` 
非推奨

この属性は、表本体の各行のセルにおける垂直方向のテキスト配置方法を指定します。以下の値が指定可能です。

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

**メモ:** この属性は最新の標準仕様で廃止された（対応していない）ため、使用しないでください。代わりに CSS の `vertical-align` プロパティを使用してください。

例
-

`<tfoot>` の例については、 `<table>` を参照してください。

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | 0 個以上の `<tr>` 要素 |
| タグの省略 | 開始タグは必須。親 `<table>` 要素内に以降のコンテンツがない場合は終了タグを省略可能。 |
| 許可されている親要素 | `<table>` 要素。`<tfoot>` はすべての `<caption>`, `<colgroup>`, `<thead>`, `<tbody>`, `<tr>` の各要素の後方に配置しなければなりません。これは HTML5 での要件です。HTML4 では、 `<tfoot>` 要素は `<tbody>` 要素および `<tr>` 要素の後方に配置してはなりませんでした。 |
| 暗黙の ARIA ロール | `rowgroup` |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLTableSectionElement` |

仕様書
---

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

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

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

関連情報
----

* 他の表関連要素: `<caption>`, `<col>`, `<colgroup>`, `<table>`, `<tbody>`, `<td>`, `<th>`, `<thead>`, `<tr>`
* `<tfoot>` 要素のスタイル設定に役立つであろう CSS プロパティと擬似クラス:
    + `:nth-child` 擬似クラス: 列内のセルの配置を設定するため
    + `text-align` プロパティ: すべてのセル内コンテンツを '.' などの同一文字で揃えるため
<slot>: ウェブコンポーネントのスロット要素
=========================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**`<slot>`** は HTML の要素――一連のウェブコンポーネント技術の一部――で、ウェブコンポーネント内で別な DOM ツリーを構築し、一緒に表示することができる独自のマークアップを入れることができるプレイスホルダーです。

属性
--

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

`name`

スロットの名前です。

***名前付きスロット***は、 `<slot>` 要素に `name` 属性が付きます。

例
-


```html
<template id="element-details-template">
  <style>
 details {
 font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
 }
 .name {
 font-weight: bold;
 color: #217ac0;
 font-size: 120%;
 }
 h4 {
 margin: 10px 0 -8px 0;
 background: #217ac0;
 color: white;
 padding: 2px 6px;
 border: 1px solid #cee9f9;
 border-radius: 4px;
 }
 .attributes {
 margin-left: 22px;
 font-size: 90%;
 }
 .attributes p {
 margin-left: 16px;
 font-style: italic;
 }
 </style>
  <details>
    <summary>
      <code class="name">
        &lt;<slot name="element-name">NEED NAME</slot>&gt;
      </code>
      <span class="desc"><slot name="description">NEED DESCRIPTION</slot></span>
    </summary>
    <div class="attributes">
      <h4>Attributes</h4>
      <slot name="attributes"><p>None</p></slot>
    </div>
  </details>
  <hr />
</template>
```


**メモ:** この完全な例は、 element-details で見ることができます（ライブ実行もご覧ください）。また、テンプレートとスロットの利用にも説明があります。

技術的概要
-----

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

仕様書
---

| Specification |
| --- |
| HTML Standard # the-slot-element |
| DOM Standard # shadow-tree-slots |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<br>: 改行要素
==========

**`<br>`** は HTML の要素で、文中に改行（キャリッジリターン）を生成します。詩や住所など、行の分割が重要な場合に有用です。

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

上記の例に見られるように、 `<br>` 要素はテキストを改行したい場所にそれぞれ含められます。 `<br>` の後のテキストは、テキストブロックの次の行の先頭から再開されます。

**メモ:** 段落の間を開けるために `<br>` を使わないでください。それぞれを `<p>` 要素で囲み、 CSS の `margin` プロパティで間隔を制御してください。

属性
--

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

### 非推奨の属性

`clear`

改行後の次の行を開始する場所を示します。

CSS でのスタイル付け
------------

`<br>` 要素は、テキストのブロック内で改行するという、単一の明確な目的を持っています。そのため、寸法を持たず、自身が表示されることもなく、スタイル付けすることができるのはわずかです。

`<br>` 要素自体に `margin` を設定して、ブロック内のテキストの行間を開けることができますが、これは良いやり方ではありません。 — この用途のために設計された `line-height` プロパティを使用してください。

例
-

### 単純な br

以下の例では `<br>` を使用して、住所のそれぞれの行の間に改行を生成しています。


```html
Mozilla<br />
331 E. Evelyn Avenue<br />
Mountain View, CA<br />
94041<br />
USA<br />
```


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

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

段落間の間隔を広げるために連続した `<br>` 要素を使用することは、読み上げ技術の支援の下で操作をしている人にとっては問題になります。読み上げソフトは要素が存在することをアナウンスするものの、その中にはコンテンツが何もないという状況になる可能性があります。これは読み上げソフトを使用している人の利用を混乱させ不満をためる可能性があります。

追加の間隔をあける必要がある場合は、 `margin` のような CSS プロパティを使用して効果を得るようにしてください。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、記述コンテンツ |
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 | 
 開始タグは必須で、終了タグを記述してはなりません。 XHTML
 文書では、この要素は `<br />` と書きます。
  |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | `none` (en-US), `presentation` |
| DOM インターフェイス | `HTMLBRElement` |

仕様書
---

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

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

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

関連情報
----

* `<address>` 要素
* `<p>` 要素
* `<wbr>` 要素
<ins>
=====

**`<ins>`** は HTML の要素で、文書に追加されたテキストの範囲を表します。同様に、 `<del>` 要素を使用して文書から削除されたテキストの範囲を表すことができます。

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

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

属性
--

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

`cite`

会議の議事録やトラブルシューティングシステムのチケットといった、追加についての説明を記したリソースへの URI を示します。

`datetime`

この属性は変更が行われた日時を示し、有効な日付または日時の文字列でなければなりません。値が日付または日時の文字列として解釈できなかった場合は、要素にタイムスタンプが関連付けられなくなります。時刻がない日付の書式については、妥当な日付文字列の書式を参照してください。日付と時刻の両方を含む場合の文字列の書式については、妥当な日時文字列の書式を参照してください。

例
-


```html
<ins>This text has been inserted</ins>
```

### 結果

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

`<ins>` 要素が存在することは、多くの読み上げ技術の既定の設定では読み上げられません。 CSS の `content` プロパティを `::before` および `::after` 擬似要素と共に使うことで読み上げさせることができます。


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

ins::before {
  content: " [挿入開始] ";
}

ins::after {
  content: " [挿入終了] ";
}
```


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

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

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

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

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

関連情報
----

* 文書の削除された部分に印をつける `<del>` 要素
<u>: 非言語的注釈（下線）要素
=================

**`<u>`** は HTML の要素で、非言語的に注釈があることを示す方法で表示する行内テキストの区間を示します。これは既定で単純な実線の下線として表示されますが、 CSS を使用して変更することもできます。

**警告:** この要素は古いバージョンの HTML で "Underline" (下線) 要素と呼ばれる傾向があり、現在でもそのように誤用されることがあります。テキストに下線を引くのであれば、代わりに CSS の `text-decoration` プロパティを `underline` に設定したスタイルを適用してください。

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

`<u>` を使用するのがどのような場合に適切で、どのような場合に適切でないのかについての詳細は、使用上の注意を参照してください。

属性
--

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

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

他の純粋な整形要素と同様に、以前の HTML の下線 (`<u>`) 要素は HTML 4 で非推奨になりました。しかし `<u>` は、 HTML 5 で新しい意味論的な、何らかの曖昧な注釈が適用されるテキストをマークするという意味で復活しました。

**メモ:** （既定で下線が引かれる）ハイパーリンクと誤認されるような方法で、（これも既定で下線が引かれる）`<u>` 要素を使用することは避けるように注意してください。

### 用途

`<u>` 要素の有効な用途としては、綴りエラーの通知、中国語の文字列の固有名詞記号の記述、その他の形の注釈などがあります。

単に表現の目的で下線を引いたり、本の題名を記述したりするために `<u>` を使用するべきでは*ありません*。

### 仕様を考慮するべきその他の要素

多くの場合、次のような場合は `<u>` よりも他の要素を使用するべきです。

* `<em>`: 強調の記述
* `<b>`: テキストに注意を引かせる
* `<mark>`: キーワードや句をマーク
* `<strong>`: 強い重要性のあるテキストを示す
* `<cite>`: 書籍やその他の出版物の題名をマーク
* `<i>`: 西洋言語のテキストで技術用語、音訳、考え、船名などを記述

（`<u>` で作成された非言語的な注釈に対して）言語的な注釈を提供する場合は、 `<ruby>` 要素を使用してください。

意味論的な意味なしで下線を引きたい場合は、 `text-decoration` プロパティの値 `underline` を使用してください。

例
-

### 綴りエラーを表示

この例は、 `<u>` 要素と CSS を使用して、綴り間違いのエラーを含む段落を表示し、エラー箇所をこの目的でよく使用される、赤い波線の下線スタイルで示します。

#### HTML


```html
<p>This paragraph includes a <u class="spelling">wrnogly</u> spelled word.</p>
```


この HTML では、 `<u>` にクラス `spelling` を付けて、 "wrongly" という語の綴りミスを示すために使用しているのが分かります。

#### CSS


```css
u.spelling {
  text-decoration: red wavy underline;
}
```


この CSS は `<u>` 要素にクラス `spelling` がついてスタイル付けされるとき、テキストすぐ下に赤い波線の下線を引くことを示しています。これはスペルミスをスタイル付けするときに一般的なスタイル付けです。 `red dashed underline` を使って表現できるスタイルもよく使われます。

#### 結果

結果は現在利用可能なもっと有名なワープロを使ってきた人になじみがあるものでしょう。

### <u> の回避

多くの場合、実際には `<u>` を使用したいと思わないでしょう。いくつかの場面で代わりに何をするべきかを示す例を挙げましょう。

#### 意味を伴わない下線

意味を含むことがないテキストに下線を引くには、次のように、 `<span>` 要素と `text-decoration` プロパティに `"underline"` を設定したものを使用してください。

##### HTML


```html
<span class="underline">Today's Special</span>
<br />
Chicken Noodle Soup With Carrots
```


##### CSS


```css
.underline {
  text-decoration: underline;
}
```


##### 結果

#### 書籍の題名の表現

書籍の題名は `<u>` や `<i>` でもなく、 `<cite>` 要素を使用して表現してください。

##### HTML


```html
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
```


##### cite 要素のスタイル付け

なお、 `<cite>` 要素の既定のスタイルではテキストを斜体で表示します。 CSS を使用して上書きすることができます。


```html
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
```



```css
cite {
  font-style: normal;
  text-decoration: underline;
}
```

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* ふつう、 `<span>`, `<i>`, `<em>`, `<b>`, `<cite>` 要素が代わりに使用されます。
* 意味論的なものではない下線には、 CSS の `text-decoration` プロパティを使用してください。
<aside>: 余談要素
=============

**`<aside>`** は HTML の要素で、文書のメインコンテンツと間接的な関係しか持っていない文書の部分を表現します。サイドバーやコールアウトボックスなどを表現するためによく使われます。

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

属性
--

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

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

* 文章中の括弧書きについては、文章の主要な流れに属するものであるといえますので、これをタグ付けするために `<aside>` 要素を使用しないでください。
例
-

### <aside> の使用

このれは `<aside>` を使用して記事の中のある段落をマークアップします。この段落は記事の主要な内容と間接的な関係しかありません。


```html
<article>
  <p>
    The Disney movie <cite>The Little Mermaid</cite> was first released to
    theatres in 1989.
  </p>
  <aside>
    <p>The movie earned $87 million during its initial release.</p>
  </aside>
  <p>More info about the movie…</p>
</article>
```


#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、区分コンテンツ、知覚可能コンテンツ |
| 許可されている内容 | フローコンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素。`<aside>` 要素は
 `<address>`
 要素の子孫要素として配置してはならない。
  |
| 暗黙の ARIA ロール | `complementary` |
| 許可されている ARIA ロール | `feed`, `none` (en-US),
 `note` (en-US), `presentation`,
 `region`, `search` |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

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

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

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

関連情報
----

* 他の区分化関連要素: `<body>`, `<article>`, `<section>`, `<nav>`, h1, h2, h3, h4, h5, h6, `<hgroup>`, `<header>`, `<footer>`, `<address>`
* HTML のセクションとアウトラインの使用
* ARIA: Complementary ロール
<title>: 文書題名要素
===============

**`<title>`** は HTML の要素で、ブラウザーの題名バーやページのタブに表示される文書の題名を定義します。テキストのみを含めることができます。要素内のタグはすべて無視されます。


```html
<title>Grandma's Heavy Metal Festival Journal</title>
```


|  |  |
| --- | --- |
| コンテンツカテゴリー | メタデータコンテンツ |
| 許可されている内容 | 要素間のホワイトスペースではないテキスト。 |
| タグの省略 | 
 開始タグと終了タグの両方が必要。なお、
 `</title>`
 を忘れると、ブラウザーがページの残りの部分を無視することがある。
  |
| 許可されている親要素 | 
 他に `<title>` 要素を含まない
 `<head>` 要素。
  |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLTitleElement` |

属性
--

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

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

`<title>` 要素は常にページの `<head>` ブロックの中で使われます。

### ページの題名と SEO

ページの題名の内容は、検索エンジン最適化 (SEO) に著しい影響を与えることがあります。一般的に、長く、説明的な題名は、短く、一般的な題名よりも効果があります。題名の内容は、検索エンジンのアルゴリズムが検索結果にページを列挙する順序を決定するために使用する材料の一つです。また、題名は検索結果ページを眺めている読者の注意を引く最初の「フック」となります。

良い題名を作成するためのガイドラインやコツを示します。

* 1 ～ 2 語の題名は避けましょう。説明的な文言を使用したり、用語集や参照スタイルのページでは用語と定義の組を使用したりしましょう。
* 検索エンジンは通常、ページの題名は最初のおよそ 55–60 文字を表示します。それを超えるテキストは失われることがあるので、それよりも長くはしないようにしてください。もっと長い題名を使う必要があるのであれば、重要な部分を前にもってくると、題名の中の重要な部分が落とされにくくなります。
* 「キーワード BLOB」を使用しないでください。題名が単なるキーワードの羅列であると、アルゴリズムはそのページの検索結果内の順位を落とすことがあります。
* 題名はできるだけサイト内で固有のものにするようにしてください。複写や複写に近いものは検索結果を不正確にすることがあります。
例
-


```html
<title>素敵で面白いこと</title>
```


この例ではページの題名全体 (ウィンドウの最上部またはウィンドウのタブに表示されるもの) を「素敵で面白いこと」にします。

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

正確で簡潔な題名を提供し、ページの目的を記述することが重要です。

支援技術を使用するユーザーのためのナビゲーション技術として、ページの題名を読んで、どのようなコンテンツが含まれるかを推測するというものが良く使われます。これはコンテンツを特定するためにページ間を移動すると、時間を消費したり手順を間違える可能性があったりするからです。題名はウェブサイトのページごとに固有のものであるべきです。ページの主な目的を最初に示し、その後にウェブサイト名が続くのが理想的です。このパターンに従うことで、ページの主な目的が確実にスクリーンリーダーによって最初に告知されるようになります。こうすることで、ユーザーが同じウェブサイト内で移動するすべてのページで、固有のページ題名よりも先にウェブサイトの名前が読み上げられるのを待たなければならないよりも、はるかに優れた使い勝手になります。

### 例


```html
<title>Menu - Blue House Chinese Food - FoodYum: Online takeout today!</title>
```


フォームの送信にエラーが含まれていて、送信すると現在のページが再表示された場合、題名を使用してユーザーに送信のエラーを認識させることができます。例えば、ページ `title` の値を更新して、重要なページの状態変化（検証状態の問題など）を反映します。


```html
<title>
  2 errors - Your order - Sea Food Store - Food: Online takeout today!
</title>
```


**メモ:** 現在のところ、ページの題名を動的に更新しても、スクリーンリーダーによって自動的にアナウンスされることはありません。ページの状態の大幅な変更を反映するためにページの題名を更新する場合は、ARIA ライブリージョンを使用する必要があるかもしれません。

* MDN WCAG を理解する ― ガイドライン 2.4 の解説
* Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.1
仕様書
---

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

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

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

関連情報
----

* SVG の `<title>` 要素
<embed>: 埋め込み外部コンテンツ要素
======================

**`<embed>`** は HTML の要素で、外部のコンテンツを文書中の指定された場所に埋め込みます。コンテンツは外部アプリケーションや、対話型コンテンツの他の出所（ブラウザーのプラグインなど）によって提供されます。

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

**メモ:** 本文書は、HTML Living Standard の一部として定義された要素についてのみ記載します。以前の標準化されていない要素の実装については扱いません。

最近のほとんどのブラウザーは、ブラウザーのプラグインの対応を非推奨にして削除しているため、サイトを平均的なユーザーのブラウザーで操作できるようにしたいのであれば、 `<embed>` に頼ることは賢明ではないということを意識しておいてください。

属性
--

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

`height`

このリソースを表示する高さを CSS ピクセル値で示します。絶対的な値でなければなりません。パーセント値は使用*できません*。

`src`

埋め込むリソースの URL を示します。

`type`

インスタンス化するプラグインを選択するために使用する MIME タイプ。

`width`

このリソースを表示する幅を CSS ピクセル値で示します。絶対的な値でなければなりません。パーセント値は使用*できません*。

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

`object-position` プロパティを使用して、要素のフレーム内の埋め込みオブジェクトの位置を調整することができ、 `object-fit` プロパティを使用して、オブジェクトの寸法をフレーム内にどのように合わせるかを制御することができます。

例
-


```html
<embed
 type="video/quicktime"
 src="movie.mov"
 width="640"
 height="480"
 title="Title of my video" />
```

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

`embed` 要素に `title` 属性を使用してコンテンツにラベルを付けるようにしてください。そうすれば、読み上げソフトのような支援技術を使用して捜査している人々が内容を理解することができるようになります。題名がないと、埋め込みコンテンツが何であるかを特定することができません。このようにして文脈を見失うと、特に `embed` 要素が動画や音声のような対話的なコンテンツを含んでいたとに、混乱したり時間を浪費したりします。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、記述コンテンツ、埋め込みコンテンツ、対話型コンテンツ、知覚可能コンテンツ |
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 | 開始タグは必須。終了タグを記述してはならない。 |
| 許可されている親要素 | 埋め込みコンテンツを受け入れるすべての要素。 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | `application`, `document`,
 `img` (en-US), `none` (en-US),
 `presentation` |
| DOM インターフェイス | `HTMLEmbedElement` |

仕様書
---

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

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

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

関連情報
----

* 様々な種類のコンテンツの埋め込みのために使用されるその他の要素: `<audio>`, `<canvas>`, `<iframe>`, `<img>`, `<math>`, `<object>`, `<svg>`, `<video>`
* フレーム内での埋め込みコンテンツの位置や寸法の設定: `object-position` および `object-fit`
<section>: 汎用セクション要素
====================

**`<section>`** は HTML の要素で、文書の自立した一般的なセクション（区間）を表します。そのセクションを表現するより意味的に具体的な要素がない場合に使用します。少数の例外を除いて、セクションには見出しを置いてください。

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

属性
--

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

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

前述のように、 `<section>` は汎用的な区分要素ですので、それを表現するためのより具体的な要素がない場合にのみ使用してください。例えば、ナビゲーションメニューは `<nav>` 要素で囲むべきですが、検索結果のリストや地図表示とそのコントロールなどは特定の要素を持たないので、 `<section>` の中に入れることができます。

また、次のようなことも考慮してください。

* この要素の内容が単独の、自立した記事として配信されて意味のある不可分の単位のコンテンツ（例えば、ブログ投稿やブログのコメント、新聞記事など）を表す場合は、`<article>` 要素を使用したほうがいいでしょう。
* 内容が、メインコンテンツと一緒に機能する有用な付帯情報を表しているものの、メインコンテンツの一部ではない場合（関連リンクや著者の経歴など）は、 `<aside>` を使用してください。
* 内容が文書のメインコンテンツを表す場合は、 `<main>` を使用してください。
* スタイル付けのためのラッパーとしてのみ使用する場合は、 `<div>` を使用してください。大まかに言うと、 `<section>` は文書のアウトラインの中に論理的に現れるべきです。

 繰り返しになりますが、それぞれの `<section>` はできるだけ、特に見出し
 (h1 - h6 要素) を `<section>` の子要素に含めて識別できるようにするべきです。見出しのない `<section>` の例については以下を参照してください。

例
-

### 単純な使い方の例

#### 導入前


```html
<div>
  <h2>見出し</h2>
  <p>素晴らしいコンテンツの数々</p>
</div>
```


##### 結果

#### 導入後


```html
<section>
  <h2>見出し</h2>
  <p>素晴らしいコンテンツの数々</p>
</section>
```


##### 結果

### 見出しのないセクションの使用

`<section>` が見出しなしで使用されている状況は、伝統的な文書構造よりも、ウェブアプリケーションや UI のセクションでよく見られます。文書内では、コンテンツの内容を示す見出しのない独立したセクションがあっても、実際には何の意味もありません。このような見出しは、すべての読者にとって便利ですが、特にスクリーンリーダーのような支援技術のユーザーにとっては便利であり、また、 SEO にも有効です。

しかし、二次的なナビゲーションの仕組みを考えてみましょう。グローバルナビゲーションがすでに `<nav>` 要素で囲まれている場合、 `<section>` の中に前へ/次へのメニューを入れることも考えられます。


```html
<section>
  <a href="#">前の記事</a>
  <a href="#">次の記事</a>
</section>
```


また、アプリを制御するためのボタンバーのようなものはどうでしょうか。必ずしも見出しが必要ではないかもしれませんが、それでも文書の明確なセクションであることに変わりはありません。


```html
<section>
  <button class="reply">返信</button>
  <button class="reply-all">全員に返信</button>
  <button class="fwd">転送</button>
  <button class="del">削除</button>
</section>
```


支援技術やスクリーンリーダーに適した CSS を使って非表示にするには、次のようにします。


```css
.hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
```


#### 結果

コンテンツによっては、見出しを入れることで SEO 施策にもなるので、選択肢の一つとして検討してみてはいかがでしょうか。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 区分コンテンツ,
 知覚可能コンテンツ |
| 許可されている内容 | フローコンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素。ただし、`<section>` 要素は
 `<address>`
 要素の子孫要素として配置してはならない。
  |
| 暗黙の ARIA ロール | `region`
 （要素にアクセシブル名がある場合）、それ以外の場合は対応するロールなし |
| 許可されている ARIA ロール | `alert`, `alertdialog`,
 `application`, `banner`,
 `complementary`,
 `contentinfo`, `dialog`,
 `document`, `feed`,
 `log`, `main`,
 `marquee` (en-US), `navigation`,
 `none` (en-US), `note` (en-US),
 `presentation`, `search`,
 `status`, `tabpanel` (en-US) |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-section-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>`, `<footer>`, `<address>`
* HTML のセクションとアウトラインの使用
* ARIA: Region ロール
* Why You Should Choose HTML5 article Over section, by Bruce Lawson
<legend>: フィールドセット凡例要素
======================

**`<legend>`** は HTML の要素で、その親要素である `<fieldset>` の内容のキャプションを表します。

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

属性
--

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

例
-

`<legend>` の使用例は、 `<form>` のページを参照してください。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | 記述コンテンツ
 および
 見出し
 （h1–h6 要素）
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | `<fieldset>` 要素。`<legend>`
 要素は
 `<fieldset>`
 の最初の子要素として配置しなくてはならない。
  |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLLegendElement` |

仕様書
---

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

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

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

関連情報
----

* ARIA: Form ロール
<center>: 中央揃えテキスト要素
====================

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

**`<center>`** は HTML の要素で、中に含まれるブロックレベルまたはインラインコンテンツを中央揃えして表示するブロックレベル要素です。コンテナーはふつう `<body>` ですが、必ずしもそうとは限りません。

このタグは HTML 4（および XHTML 1）で非推奨要素に指定され、CSS の `text-align` プロパティを `<div>` 要素に適用するか、それぞれの `<p>` 要素に適用する方式が採用されました。ブロックを中央揃えするには、別な CSS プロパティである `margin-left` および `margin-right` など用いて、値を `auto` に設定してください（または、 `margin` を `0 auto` に設定してください）。

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

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

例 1
---


```html
<center>
  This text will be centered.
  <p>So will this paragraph.</p>
</center>
```

例 2 （CSS での方法）
--------------


```html
<div style="text-align:center">
  This text will be centered.
  <p>So will this paragraph.</p>
</div>
```

例 3 （CSS での方法）
--------------


```html
<p style="text-align:center">
  This line will be centered.<br />
  And so will this line.
</p>
```

メモ
--

`text-align``:center` を `<div>` または `<p>` 要素に適用すると、その*コンテンツ*を中央揃えにしますが、コンテンツの寸法はどれも変更されません。

仕様書
---

| Specification |
| --- |
| HTML Standard # center |

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

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

関連情報
----

* `text-align`
* `display`
<address>: 連絡先要素
================

**`<address>`** は HTML の要素で、この中の HTML が個人、団体、組織の連絡先情報を提供していることを示します。

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

`<address>` 要素の内容で提供される連絡先情報は、その文脈で適切であればどのような形でもよく、必要とされるあらゆる形の連絡先情報（住所、 URL、メールアドレス、電話番号、ソーシャルメディアのアカウント、地理上の座標など）を含めることができます。`<address>` には、連絡先情報が参照する個人、団体、組織の名前を含めてください。

`<address>` は様々な文脈で使用することができます。ページヘッダーでビジネスの連絡先を提供したり、`<address>` を `<article>` 要素に入れることで、記事の著者を識別したりすることができます。

属性
--

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

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

* `<address>` 要素、直近の `<article>` または `<body>` 要素の連絡先情報を表すためにのみ使用できます。
* この要素には、公開日（`<time>` によるもの）のような連絡先情報以外の情報を含めるべきではありません。
* 一般的に、 `<address>` 要素は現在のセクションに `<footer>` 要素があれば、その中に配置することができます。
例
-

この例は `<address>` 要素で記事の編集者の連絡先情報を示す使い方を示しています。


```html
<address>
  作者の連絡先は
  <a href="http://www.somedomain.com/contact"> www.somedomain.com</a>
  です。<br />
  バグを発見した場合は<a href="mailto:webmaster@somedomain.com"
 >ウェブマスターへご連絡ください</a
 >。<br />
  住所は下記の通りです。<br />
  Mozilla Foundation<br />
  331 E Evelyn Ave<br />
  Mountain View, CA 94041<br />
  USA
</address>
```

### 結果

この要素は文字列を `<i>` 要素や `<em>` 要素と同じ既定のスタイルで描画しますが、付加的な意味情報として連絡先情報を扱うときに `<address>` を使用するのがより適切でしょう。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、知覚可能コンテンツ |
| 許可されている内容 | フローコンテンツ。ただし
 `<address>` 要素をネストしたり、見出しコンテンツ
 (`<hgroup>`, h1,
 h2, h3,
 h4, h5,
 h6), 区分コンテンツ
 (`<article>`, `<aside>`,
 `<section>`, `<nav>`),
 `<header>` 要素および
 `<footer>` 要素を入れたりしてはなりません。
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツ
 を受け入れるすべての要素。ただし `<address>` 要素は除く
 (論理的な対称性の原理によれば、親要素である
 `<address>` タグは
 `<address>`
 要素を入れ子にすることができません。したがって、同じ
 `<address>` のコンテンツの親に
 `<address>` タグを置くこともできません)。
  |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLElement`。 Gecko 2.0 (Firefox 4) より前では
 `HTMLSpanElement`
 インターフェイスが提供されます。
  |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-address-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>`, `<footer>`, `<section>`, `<header>`
* HTML 文書のセクションとアウトライン