<tbody>: テーブル本体要素 - HTML: ハイパーテキストマークアップ言語

<tbody>: テーブル本体要素
=================

**`<tbody>`** は HTML の要素で、表の一連の行（`<tr>` 要素）を内包し、その部分が表（`<table>`）の本体部分を構成することを表します。

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

`<tbody>` 要素は、親戚である `<thead>` や `<tfoot>` と共に、画面やプリンターでの描画で利用できる有用な意味的情報を提供します。

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | 0 個以上の `<tr>` 要素 |
| タグの省略 | `<tbody>` 要素の開始タグは、`<tbody>` 要素の中の最初のものが `<tr>` 要素であり、その要素の直前に終了タグが省略された `<tbody>` 要素、`<thead>` 要素、`<tfoot>` 要素がない場合、省略できます。（空要素の場合は省略できません。）
 `<tbody>` 要素の終了タグは、`<tbody>` 要素の直後に `<tbody>` 要素または `<tfoot>` 要素が続く場合、または親要素にまだコンテンツがない場合に省略できます。
  |
| 許可されている親要素 | `<table>` 要素。 `<tbody>` 要素は
 `<caption>`,
 `<colgroup>`, `<thead>` の各要素の後に配置することができます。
  |
| 暗黙の ARIA ロール | `rowgroup` |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLTableSectionElement` |

属性
--

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

### 非推奨の属性

`align`
非推奨

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

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

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

この属性は非推奨であるため、代わりに CSS の `text-align` プロパティを使用してください。

**メモ:** `text-align` プロパティには、 `align="char"` と同等の機能がどのブラウザーでも実装されていません。 `text-align` のブラウザーの互換性の節 で `<string>` の値を確認してください。

`bgcolor`
非推奨

表の背景色です。 6 桁の 16 進 RGB コードの先頭に '`#`' をつけたものです。定義済みの色キーワードのうちの一つを利用することもできます。

この属性は非推奨であり、代わりに CSS の `background-color` プロパティを使用してください。

`char`
非推奨

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

`charoff`
非推奨

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

`valign`
非推奨

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

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

この属性は非推奨であり、代わりに CSS の `vertical-align` プロパティを使用してください。

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

* 表に (意味的なヘッダー行を識別するために) `<thead>` ブロックがある場合、 `<tbody>` ブロックはその後に置く*必要があります*。
* `<tbody>` を使用する場合、表の行 (`<tr>` 要素) を `<table>` の直接の子として置くことはできませんが、 `<tbody>` の中には置くことができます。 `<tbody>` を使用する場合は、ヘッダーでもフッターでもない行をすべてその中に入れる必要があります。
* 文書を印刷するとき、複数のページにまたがる表では、 `<thead>` および `<tfoot>` 要素が各ページで共通の（またはよく似た）情報を指定するのに対し、 `<tbody>` 要素の中身は一般に、ページごとに異なります。
* 表が (ウィンドウのような) 画面に表示される場合で、表全体を表示するのに十分な大きさがないとき、ユーザーエージェントは `<thead>`, `<tbody>`, `<tfoot>`, `<caption>` ブロックを親である表から独立してユーザーがスクロールさせることができるようにするかもしれません。
* 連続していれば、1 つの表の中に複数の `<tbody>` を使用することが*できます*。これにより必要に応じて、巨大な表の行を複数のセクションに分割し、個別に整形することができます。
例
-

以下の例では、 `<tbody>` 要素の使用例を示します。このタグが使われているその他の例は、 `<table>` の例を参照してください。

### 基本的な例

これは比較的単純な例で、学生のグループについて情報を一覧する表を `<thead>` および `<tbody>` で作成し、本体内に行番号を表示します。

#### HTML

表の HTML は下記のとおりです。なお、学生に関する情報を含む本体のセルはすべて、単一の `<tbody>` 要素の中に入っています。

```html
<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Major</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>コンピューター科学</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>ロシア文学</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>天体物理学</td>
    </tr>
  </tbody>
</table>
```

#### CSS

表を整形する CSS を次に示します。

```css
table {
  border: 2px solid #555;
  border-collapse: collapse;
  font:
    16px "Lucida Grande",
    "Helvetica",
    "Arial",
    sans-serif;
}
```

まず、表の全体的なスタイル属性を設定し、表の外枠の太さ、スタイル、色を設定し、`border-collapse` を使用して、セル間に間隔と独自の境界線を置くのではなく、境界線が隣接セル間で共有されるようにします。`font` は、表の初期フォントを設定するために使用されます。

```css
th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}
```

それから、すべてのデータセルだけでなく、`<td>` および `<th>` のセルの間で共有されるスタイルを含む、テーブル内の大部分のセルに設定されるスタイルです。セルに対して、1 ピクセルの太さで薄い灰色の輪郭、パディングの調整、すべてのセルを `text-align` を使用して左揃えにします。

```css
thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}
```

最後に、`<thead>` ブロックに含まれるヘッダーのセルには追加の整形を行います。より暗い `background-color` にし、大きなフォントサイズにして、下の境界線に他のセルの境界線よりも太く暗い線を引きます。

#### 結果

結果の表は次のようになります。

### 複数の本体

複数の `<tbody>` 要素を使用することで、表内の複数のセクションを作成することができます。それぞれに独自のヘッダー行がある場合もありますが、`<thead>` は表 1 つあたり 1 つしか置けません！。そのため、それぞれの `<tbody>` にヘッダーを作成するには、`<th>` 要素で埋められた `<tr>` を使用する必要があります。どのようにするかを見てみましょう。

前回の例から、リストに数人の学生を追加し、各行に学生の専攻を書く代わりに、学生を選考でグループ化し、ヘッダー行で選考を表すように更新しましょう。

#### 結果

最初に、結果の表を見て、作ろうとしているものを知っておきましょう。

#### HTML

修正した HTML はこのようになります。

```html
<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2">コンピューター科学</th>
    </tr>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
    </tr>
    <tr>
      <td>4077830</td>
      <td>Pierce, Benjamin</td>
    </tr>
    <tr>
      <td>5151701</td>
      <td>Kirk, James</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2">ロシア文学</th>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2">天体物理学</th>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
    </tr>
    <tr>
      <td>8892377</td>
      <td>Toyota, Hiroko</td>
    </tr>
  </tbody>
</table>
```

なお、各専攻は個別の `<tbody>` ブロックに配置され、最初の行に単一の `<th>` 要素に `colspan` 属性を付けて表の幅全体に広がるようにしています。このヘッダーが `<tbody>` 内の専攻の名前を示します。

そして、それぞれの専攻の `<tbody>` で残りの行は 2 つのセルから成り、最初の行は学生番号で、2 つ目の行は名前です。

#### CSS
```

table {
  border: 2px solid #555;
  border-collapse: collapse;
  font:
    16px "Lucida Grande",
    "Helvetica",
    "Arial",
    sans-serif;
}

th,
td {
  border: 1px solid #bbb;
  padding: 2px 8px 0;
  text-align: left;
}

thead > tr > th {
  background-color: #cce;
  font-size: 18px;
  border-bottom: 2px solid #999;
}
```

CSS のほとんどは変更ありません。しかし、（`<thead>` に含まれるものではなく） `<tbody>` に直接含まれるヘッダーセルに対して、若干のスタイルを追加しましょう。これはそれぞれの専攻を示すヘッダーに使われます。

```css
tbody > tr > th {
  background-color: #dde;
  border-bottom: 1.5px solid #bbb;
  font-weight: normal;
}
```

仕様書
---

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

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

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

関連情報
----

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


<template>: コンテンツテンプレート要素 - HTML: ハイパーテキストマークアップ言語

<template>: コンテンツテンプレート要素
=========================

**`<template>`** は HTML の要素で、ページが読み込まれたときにすぐにレンダリングされるのではなく、実行時に JavaScript を使って後からインスタンス化することができる HTML を保持するためのメカニズムです。

テンプレートは、文書内に格納されたコンテンツの断片として考えてください。ページの読み込み時にパーサーが **`<template>`** 要素の内容を処理している間、その内容の有効性のみが検証されます。しかし、要素の内容は描画されません。

属性
--

`<template>` 要素が対応している標準的な属性は、グローバル属性のみです。

Chromium ベースのブラウザーでは、`<template>` 要素は標準外の `shadowrootmode` 属性 にも、実験的な "Declarative Shadow DOM" 提案の一部として対応しています。対応しているブラウザーでは、`<template>` 要素が `shadowrootmode` 属性を持っていることが HTML パーサーによって検出され、直ちに親要素のシャドウルートとして適用されます。`shadowrootmode` は `open` と `closed` のどちらかの値を取ります。これらは `Element.attachShadow()` の `mode` オプションの `open` と `closed` の値に相当します。

また、対応する `HTMLTemplateElement` インターフェイスは標準で `content` プロパティを持ち（同等のコンテンツ/マークアップ属性はなく）、読み取り専用の `DocumentFragment` で、テンプレートが表現する DOM サブツリーを保持しています。なお、`content` プロパティの値を直接使用すると予想外の動作につながる可能性があります。詳しくは、下記の DocumentFragment の落とし穴の回避の節を参照してください。

例
-

まず、HTML 部分の例から始めましょう。

```html
<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- existing data could optionally be included here -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>
```

まず、JavaScript コードを使用して後からコンテンツを挿入するための表を作ります。次に、1 行分を表す HTML 断片の構造が書かれたテンプレートが続きます。

表が生成され、テンプレートが定義されました。 JavaScript を使って、テンプレートを基に構築される各行を表に挿入します。

```js
// templete 要素の content 属性の有無を確認することで、
// ブラウザーが HTML の template 要素に対応しているかテストします。
if ("content" in document.createElement("template")) {
  // 既存の HTML tbody と template の行を使って
  // table をインスタンス生成します。
  const tbody = document.querySelector("tbody");
  const template = document.querySelector("#productrow");

  // 新しい行を複製して表に挿入します。
  const clone = template.content.cloneNode(true);
  let td = clone.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  tbody.appendChild(clone);

  // 新しい行を複製して表に挿入します。
  const clone2 = template.content.cloneNode(true);
  td = clone2.querySelectorAll("td");
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans 2";

  tbody.appendChild(clone2);
} else {
  // HTML の template 要素に対応していないので
  // 表に行を追加するほかの方法を探します。
}
```

結果として、 JavaScript を通して、新しい行が追加された HTML の表ができます。
```

table {
  background: #000;
}
table td {
  background: #fff;
}
```

DocumentFragment の落とし穴の回避
-------------------------

`DocumentFragment` は様々なイベントのために有効なターゲットではないので、その中の要素を複製したり、参照したりすることが好ましいことがよくあります。

以下の HTML および JavaScript を考えてみてください。

### HTML

```html
<div id="container"></div>

<template id="template">
  <div>クリックしてください</div>
</template>
```

### JavaScript

```js
const container = document.getElementById("container");
const template = document.getElementById("template");

function clickHandler(event) {
  event.target.append(" — この div がクリックされました");
}

const firstClone = template.content.cloneNode(true);
firstClone.addEventListener("click", clickHandler);
container.appendChild(firstClone);

const secondClone = template.content.firstElementChild.cloneNode(true);
secondClone.addEventListener("click", clickHandler);
container.appendChild(secondClone);
```

### 結果

`firstClone` は DocumentFragment のインスタンスなので、期待通りにコンテナー内に追加されますが、クリックしてもクリックイベントは発生しません。 `secondClone` は `HTMLDivElement` のインスタンスなので、クリックすると期待通りに動作します。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | メタデータコンテンツ,
 フローコンテンツ,
 記述コンテンツ,
 スクリプト対応要素 |
| 許可されている内容 | 制限なし |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | メタデータコンテンツ,
 記述コンテンツ,
 スクリプト対応要素
 を受け付けるすべての要素。また、 `span` 属性を持たない `<colgroup>` 要素の子になることもできます。
  |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLTemplateElement` |

仕様書
---

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

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

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

関連情報
----

* ウェブコンポーネント: `<slot>` （および過去の `<shadow>`）
* テンプレートとスロットの使用


<main> - HTML: ハイパーテキストマークアップ言語

<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 ロール


<noscript>: スクリプト無し要素 - HTML: ハイパーテキストマークアップ言語

<noscript>: スクリプト無し要素
=====================

**`<noscript>`** は HTML の要素で、ブラウザーがこのページ上のスクリプトの種類に対応していない場合や、スクリプトの実行が無効にされている場合に表示する HTML の部分を定義します。

|  |  |
| --- | --- |
| コンテンツカテゴリー | メタデータコンテンツ、フローコンテンツ、記述コンテンツ |
| 許可されている内容 |
 スクリプトの実行が無効かつ `<head>`
 要素の子孫である場合: 任意の順序で、0 個以上の
 `<link>`
 要素、0 個以上の`<style>` 要素、0 個以上の
 `<meta>` 要素。スクリプトの実行が無効かつ
 `<head>` 要素の子孫ではない場合: 任意の透過的コンテンツ、ただし
 `<noscript>`
 要素を入れ子にしてはならない。上記以外の場合:
 フローコンテンツ、記述コンテンツ。
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 |
 祖先要素に `<noscript>` が存在しない場合に、記述コンテンツ
 を受け入れるすべての要素。または、祖先要素に
 `<noscript>`
 が存在しない場合に、`<head>` 要素 (HTML
 文書に限る)。
  |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLElement` |

属性
--

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

例
-

```html
<noscript>
  <!-- 外部ファイルにリンクするアンカー -->
  <a href="https://www.mozilla.org/">外部リンク</a>
</noscript>
<p>ロック！！</p>
```

### スクリプトが有効になっている場合の表示例

ロック！！

### スクリプトが無効になっている場合の表示例

外部リンク

ロック！！

仕様書
---

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

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

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


<nav>: ナビゲーションセクション要素 - HTML: ハイパーテキストマークアップ言語

<nav>: ナビゲーションセクション要素
=====================

**`<nav>`** は HTML の要素で、現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表します。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがあります。

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

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

属性
--

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

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

* すべてのリンクを `<nav>` 要素に入れる必要はありません。`<nav>` はナビゲーションリンクの主要なブロックのみに用います。`<footer>` にもよくリンクのリストが設置されますが、`<nav>` 要素の中に入れる必要はありません。
* `<nav>` 要素は文書内に複数設定することができます。例えば、サイトナビゲーションを一つ、ページ内ナビゲーションを一つなどです。このような場合、アクセシビリティを強化するために、 `aria-labelledby` を使用することができます。例をご覧ください。
* スクリーンリーダーのような障碍者向けのユーザーエージェントは、この要素を使用してナビゲーション用のコンテンツを初期読み上げから省略するかを判断するために使用することがあります。
例
-

この例では、`<nav>` ブロックを使用して、リンクの番号なしリスト (`<ul>`) を囲んでいます。適切な CSS によってサイドバー、ナビゲーションバー、あるいはドロップダウンメニューにすることができます。

```html
<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
```

`nav` 要素の意味づけはリンクを提供することです。しかし、`nav` 要素はリストを格納する必要はなく、他の種類のコンテンツを格納することもできます。このナビゲーションブロックでは、リンクは散文で指定されています。

```html
<nav>
  <h2>Navigation</h2>
  <p>
    You are on my home page. To the north lies <a href="/blog">my blog</a>, from
    whence the sounds of battle can be heard. To the east you can see a large
    mountain, upon which many <a href="/school">school papers</a> are littered.
    Far up this mountain you can spy a little figure who appears to be me,
    desperately scribbling a <a href="/school/thesis">thesis</a>.
  </p>
  <p>
    To the west are several exits. One fun-looking exit is labeled
    <a href="https://games.example.com/">"games"</a>. Another more
    boring-looking exit is labeled <a href="https://isp.example.net/">ISP™</a>.
  </p>
  <p>
    To the south lies a dark and dank <a href="/about">contacts page</a>.
    Cobwebs cover its disused entrance, and at one point you see a rat run
    quickly out of the page.
  </p>
</nav>
```

### 結果

仕様書
---

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

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

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

関連情報
----

* 他のセクション関連要素: `<body>`, `<article>`, `<section>`, `<aside>`, h1, h2, h3, h4, h5, h6, `<hgroup>`, `<header>`, `<footer>`, `<address>`
* HTML 文書のセクションとアウトライン
* ARIA: Navigation ロール


<figcaption>: 図キャプション要素 - HTML: ハイパーテキストマークアップ言語

<figcaption>: 図キャプション要素
=======================

**`<figcaption>`** は HTML の要素で、親の `<figure>` 要素内にあるその他のコンテンツを説明するキャプションや凡例を表します。

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

属性
--

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

例
-

`<figcaption>` の例については、 `<figure>` のページを参照して下さい。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | フローコンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | `<figure>` 要素。
 `<figcaption>`
 要素は最初または最後の子要素でなければなりません。
  |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | `group`, `none` (en-US),
 `presentation` |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

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

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

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

関連情報
----

* `<figure>` 要素


<html>: HTML 文書 / ルート要素 - HTML: ハイパーテキストマークアップ言語

<html>: HTML 文書 / ルート要素
=======================

**`<html>`** は HTML 要素で、 HTML 文書においてルート (基点) となる要素 (最上位要素) であり、*ルート要素*とも呼ばれます。他のすべての要素は、この要素の子孫として配置しなければなりません。

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | ひとつの `<head>` 要素と、それに続くひとつの `<body>` 要素。 |
| タグの省略 | 開始タグは、 `<html>` 要素内の最初のノードがコメントでない場合は省略可能です。終了タグは、 `<html>` 要素の直後にコメントがない場合は省略可能です。 |
| 許可されている親要素 | なし。これは文書のルート要素です。 |
| 暗黙の ARIA ロール | document |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLHtmlElement` |

属性
--

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

`manifest`
非推奨

Non-standard

ローカルにキャッシュされるべきリソースを示すリソースマニフェストの URI を指定します。

`version`
非推奨

現在の文書を管理する HTML の文書型定義のバージョンを指定します。文書型宣言のバージョン情報と重複しているため、この属性は必須ではありません。

`xmlns`

文書の XML 名前空間を指定します。既定値は `"http://www.w3.org/1999/xhtml"` です。これは XML パーサーで解釈される文書では必須、 text/html の文書では任意です。

例
-

```html
<!doctype html>
<html lang="en">
  <head>
    <!-- … -->
  </head>
  <body>
    <!-- … -->
  </body>
</html>
```

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

HTML では `<html>` 要素の開始タグと終了タグを指定する必要はありませんが、ウェブページの `lang` を指定できるようにするために、作者はこれを指定することが重要です。 RFC 5646: Tags for Identifying Languages (also known as BCP 47) に従った有効な言語タグを持つ `lang` 属性を `<html>` 要素に提供すれば、画面の内側へアナウンスするための適切な言語を決定するのに役立ちます。識別言語タグは、ページのコンテンツの大部分で使用されている言語を記述する必要があります。これがないと、画面の内側へ、通常、オペレーティングシステムの設定された言語が既定値として適用され、誤読が発生する可能性があります。

`<html>` 要素に妥当な `lang` を設定することで、ページで `<head>` に含まれる `<title>` などの重要なメタデータについても、正しくアナウンスすることができます。

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

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

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

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

関連情報
----

* MathML の最上位要素: `<math>`
* SVG の最上位要素: `<svg>`


<strike> - HTML: ハイパーテキストマークアップ言語

<strike>
========

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

**`<strike>`** は HTML の要素で、テキストの上に取り消し線（水平線）を引きます。

**警告:** この要素は HTML 4 および XHTML 1 で非推奨になり、HTML5 で廃止されました。意味的に適切であれば、すなわち、*削除された*コンテンツを表すのであれば、代わりに `<del>` を使用してください。それ以外の場合は `<s>` を使用してください。

属性
--

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

例
-

```html
<strike>: <strike>今日のおすすめ: サーモン</strike> 売り切れ<br />
<s>: <s>今日のおすすめ: サーモン</s> 売り切れ
```

このコードの結果は次の通りです。

技術的概要
-----

|  |  |
| --- | --- |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # strike |

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

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

関連情報
----

* `<s>` 要素
* `<del>` 要素（データが*削除された*場合に使用）
* CSS の `text-decoration` プロパティ（取り消し線のスタイルを実現するために用いることができる）


<strong>: 強い重要性要素 - HTML: ハイパーテキストマークアップ言語

: 強い重要性要素
=================

**`<strong>`** は HTML の要素で、内容の重要性、重大性、または緊急性が高いテキストを表します。ブラウザーは一般的に太字で描画します。

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

属性
--

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

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

`<strong>` 要素は「強い重要性」のある内容、つまり（警告など）高い重大性や緊急性のある物事のためのものです。これは、ページ全体にとって非常に重要な文である可能性があります。または、いくつかの単語が周囲のコンテンツと比較して重要であると指摘することができます。

通常、この要素は既定で太字で表示されます。しかし、単に太字にするために使用*しない*でください。そのような用途には CSS の `font-weight` プロパティを使用してください。高い水準の重要性を示すことなく、あるテキストに注意を引かせたい場合は `<b>` 要素を使用してください。強調する文字列をマークしたい場合は `<em>` 要素を使用してください。

他に、ページのテキストの中でメモや警告を表す段落のラベルを記述することも `<strong>` の許容される使い方です。

###  と

新しい開発者をよく悩ませることが、ウェブサイトの表示において同じことを表現するために、なぜたくさんの方法があるかということです。`<b>` と `<strong>` はもっともよくある混乱の源で、開発者に「`<b>` と `<strong>` のどちらを使えばいいんですか？どちらも同じことをするんでしょう？」という疑問を起こします。

それは正しくありません。`<strong>` 要素はより高い重要性を持つコンテンツのためのものであるのに対し、 `<b>` 要素はより重要であるという意味なしに、テキストに注意を引かせるために使用します。

HTML ではどちらも有効で意味のある要素であり、ほとんどのブラウザーでは、同じ既定のスタイル（太字）が使用されていることは間違いありません（ただし、古いブラウザーの中には `<strong>` に下線を引くものもあります）。それぞれの要素は特定の種類のシナリオで使用するためのものです。単に装飾のために太字のテキストを使用する場合は、代わりに CSS の `font-weight` プロパティを使用してください。

囲まれたテキストの意図された意味または目的によって、使用する要素を決定してください。伝えられる意味がどのような意味であるかがすべてです。

###  と

この混乱に加えて、 HTML 4 では `<strong>` を単により強い強調としていましたが、 HTML 5 では `<strong>` を「内容の強い重要性」を表すもの定義しています。これは重要な違いです。

`<em>` が（「私はにんじんが好きです」と「私はにんじんが好きです」のように）発音の強調によって文の意味が変わる場合に使用するのに対し、`<strong>` は（例えば「**警告！**これは**とても危険です**」のように）文の一部に重要性を加えるために使用します。 `<strong>` と `<em>` のどちらも入れ子にして、それぞれ相対的な重要度や強調度を高めるためことができます。

例
-

### 基本的な例

```html
<p>作業を進める前に、<strong>必ず安全ゴーグルを装着してください</strong>。</p>
```

結果は次のようになります。

### 警告のラベル表示

```html
<p><strong>重要:</strong> その前に、バターをたっぷり追加してください。</p>
```

結果は次のようになります。

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* `<b>` 要素
* `<em>` 要素
* `font-weight` プロパティ


<cite>: 引用元要素 - HTML: ハイパーテキストマークアップ言語

<cite>: 引用元要素
=============

**`<cite>`** は HTML の要素で、引用された創作物のタイトルをマークアップするために使用します。この参照は、引用メタデータに関する利用場面に合わせた慣習に応じて省略形が用いられることがあります。

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

属性
--

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

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

`<cite>` 要素の文脈では、例えば以下のような創作物のうちの一つを引用することができます。

* 書籍
* 研究論文
* エッセイ
* 詩
* 楽譜
* 歌
* 演劇や映画の台本
* 映画
* テレビ番組
* ゲーム
* 彫刻
* 絵画
* 舞台作品
* 演劇
* オペラ
* ミュージカル
* 展示
* 事件報告書
* コンピュータープログラム
* ウェブサイト
* ウェブページ
* ブログ投稿やコメント
* フォーラム投稿やコメント
* ツイート
* Facebook 投稿
* 記述された、または口頭の声明
* その他

`<blockquote>` 要素や `<q>` 要素によって引用された素材の情報源の出典を記述するには、これらの要素の `cite` 属性を使用してください。

通常、ブラウザーは既定で `<cite>` にイタリック体を適用します。これを防ぐには、CSS の `font-style` プロパティを `<cite>` 要素に適用してください。

例
-

```html
<p>より詳しい情報については <cite>[ISO-0000]</cite> に記載されています。</p>
```

### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 記述コンテンツ, 知覚可能コンテンツ
  |
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLElement`。Gecko 1.9.2 (Firefox 4)
 以前では、この要素には `HTMLSpanElement`
 インターフェイスが実装されています。
  |

仕様書
---

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

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

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

関連情報
----

* `<blockquote>` 要素は長い引用に使用します。
* `<q>` 要素と `cite` 属性はインラインの引用に使用します。


<td>: 表データセル要素 - HTML: ハイパーテキストマークアップ言語

<td>: 表データセル要素
==============

**`<td>`** は HTML の要素で、表でデータを包含するセルを定義します。これは*モデル*に関与します。

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

属性
--

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

`colspan`

この属性はセルをいくつの列に広げるかを示す、負でない整数を持ちます。既定値は `1` です。1000 を超える値は正しくないとみなされ、既定値 (1) が設定されるでしょう。

`headers`

この属性は、空白文字で区切られた文字列のリストを持ちます。各々の文字列は、この要素に当てはめる `<th>` 要素の **id** 属性と対応します。

`rowspan`

この属性はセルをいくつの行に広げるかを示す、負でない整数を持ちます。既定値は `1` です。`0` を設定した場合は、セルが属する表セクション (`<thead>`, `<tbody>`, `<tfoot>`) の終端 (暗黙的に定義されるものであっても) まで拡張します。65534 より大きな値は、65534 に切り詰めます。

### 非推奨の属性

`abbr`
非推奨

この属性は、セルの内容の簡潔な説明を持ちます。読み上げソフトなど一部のユーザーエージェントは、内容自体の前にこの説明を提供することがあります。

**メモ:** この属性は最新の標準で廃止されているため、使用しないでください。あるいは、省略した説明をセル内に置き、長い内容を **title** 属性に置くこともできます。

`align`
非推奨

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

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

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

**メモ:**

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

`axis`
非推奨

この属性は、空白文字で区切られた文字列のリストを持ちます。各文字列は、このヘッダーを適用するセルグループの `id` です。

`bgcolor`
非推奨

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

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

`char`
非推奨

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

`charoff`
非推奨

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

`height`
非推奨

この属性はセルの高さの推奨値を定義するために使用されます。代わりの CSS の `height` プロパティを使用してください。

`scope`
非推奨

これは列挙型の属性で、この (`<th>` で定義されている) 見出し要素が関連するセルを定義します。この属性は `<th>` 要素のみに、行と列のどちらの見出しであるかを定義するために使用してください。

`valign`
非推奨

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

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

同様の効果を実現するには、代わりに CSS の `vertical-align` プロパティを使用してください。

`width`
非推奨

この属性は、セルの推奨する幅を定義します。代わりに CSS の `width` プロパティを使用してください。

例
-

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

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | 区分化ルート |
| 許可されている内容 | フローコンテンツ |
| タグの省略 | 開始タグは必須。直後に `<th>` 要素または `<td>` 要素がある場合、または親要素内で以降のデータがない場合は終了タグが省略可能。 |
| 許可されている親要素 | `<tr>` 要素 |
| 暗黙の ARIA ロール | `cell`（`<table>` 要素の子孫である場合） |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLTableCellElement` |

仕様書
---

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

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

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


<meta>: メタデータ要素 - HTML: ハイパーテキストマークアップ言語

<meta>: メタデータ要素
===============

**`<meta>`** は HTML の要素で、メタデータを表します。これは、他のメタ関連要素 (`<base>`, `<link>`, `<script>`, `<style>`, `<title>`) で表すことができないものを表します。

|  |  |
| --- | --- |
| コンテンツカテゴリー | メタデータコンテンツ。 `itemprop` 属性がある場合はフローコンテンツ、記述コンテンツ。 |
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 | 空要素であるため開始タグは必須であり、終了タグは置いてはいけません。 |
| 許可されている親要素 | * `<meta charset>`, `<meta http-equiv>`: `<head>` 要素。`http-equiv` がエンコーディング宣言ではない場合は、 `<head>` 要素内にある `<noscript>` 要素の内部にも配置できます。
* `<meta name>`: メタデータコンテンツを受け入れるすべての要素。
* `<meta itemprop>`: メタデータコンテンツまたはフローコンテンツを受け入れるすべての要素。
 |
| 許可されている ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLMetaElement` |

`<meta>` 要素で提供されるメタデータの型は、以下のいずれかになります。

* `name` 属性が設定されている場合、`<meta>` 要素は *文書レベルメタデータ* を提供し、ページ全体に適用されます。
* `http-equiv` 属性が設定されている場合、 `<meta>` 要素は *プラグマディレクティブ* であり、同様の名前の HTTP ヘッダーによって与えられるものと同等の情報を提供します。
* `charset` 属性が設定されている場合、 `<meta>` 要素は *文字セット宣言* であり、文書がどの文字エンコーディングでエンコードされているかを指定します。
* `itemprop` 属性が設定されている場合、`<meta>` 要素は *ユーザー定義のメタデータ* を提供します。
属性
--

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

**メモ:** `name` 属性は `<meta>` 要素において特別な意味を持ちます。また、`itemprop` 属性は、`<meta>` 要素にすでに `name`, `http-equiv`, `charset` のいずれかがある場合は設定してはいけません。

`charset`

この属性は、文書の文字エンコーディングを宣言します。この属性が存在する場合、その値は大文字小文字の区別なく "`utf-8`" という ASCII 文字列と一致する必要があります。UTF-8 が HTML5 文書で唯一の有効なエンコーディングだからです。文字エンコーディングを宣言する `<meta>` 要素は、文書の最初の 1024 バイトの中に完全に収まっている必要があります。

`content`

この属性は状況に応じて、`http-equiv` 属性または `name` 属性に関連付けられた値を持ちます。

`http-equiv`

プラグマディレクティブを定義します。属性名が `http-equiv(alent)` なのは、利用できる値のすべてが特定の HTTP ヘッダーの名前だからです。

* `content-security-policy`
 この値により、ページ作者がページのコンテンツポリシーを定義できます。いくつかの例外を除き、ポリシーはサーバーオリジンやスクリプトのエンドポイントの指定に関与します。これは、クロスサイトスクリプティング攻撃の対策になります。
* `content-type`
 文書の MIME タイプを宣言するもので、後に文字エンコーディングの定義が続きます。指定された場合、 `content` 属性には "`text/html; charset=utf-8`" 設定しなければなりません。これは `<meta>` 要素に `charset` 属性を指定した場合と同じであり、文書内の位置の制約も同様になります。 **メモ:** `text/html`で提供される文書でのみ使用することができます - XML MIME型で提供される文書では使用できません。
* `default-style`

既定の CSS スタイルシートセットの名前を設定します。

* `x-ua-compatible`
 指定された場合、 `content` 属性は "`IE=edge`" という値を持つ必要があります。ユーザーエージェントはこのプラグマを無視することが要求されます。
* `refresh` これは以下のことを指定する指示です。
    + `content` 属性に正の整数が 1 つだけ含まれている場合は、ページを再読み込みするまでの秒数。
    + `content` 属性に正の整数と、その後に文字列 '`;url=`' と有効な URL がある場合は、別のページにリダイレクトするまでの秒数。
**警告:**

`refresh` の値で設定されたページは、時間間隔が短すぎになるという危険性があります。画面の内側から読み上げるような支援技術を利用している人は、自動的にリダイレクトされる前にページの内容を読み、理解することができないかもしれません。また、弱視の人にとっても、突然に予告なくページ内容が更新されると、混乱させる可能性があります。

    + MDN WCAG を理解する、ガイドライン 2.2 の説明
    + MDN WCAG を理解する、ガイドライン 3.1 の説明
    + Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0
    + Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0
    + Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0

`name`

`name` 属性と `content` 属性を一緒に使用すると、文書のメタデータを名前と値のペアで提供することができます。 `name` 属性はメタデータの名前、 `content` 属性がその値を指定します。

HTML 仕様書で定義されている標準的なメタデータ名のセットについては、標準メタデータ名を参照してください。

例
-

```html
<meta charset="utf-8" />

<!-- 3 秒後にページをリダイレクト -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org" />
```

仕様書
---

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

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

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

関連情報
----

* 標準メタデータ名
* 学習: `<meta>`
* viewport メタタグ


<link>: 外部リソースへのリンク要素 - HTML: ハイパーテキストマークアップ言語

<link>: 外部リソースへのリンク要素
=====================

**`<link>`** は HTML の要素で、現在の文書と外部のリソースとの関係を指定します。
 この要素はスタイルシートへのリンクに最もよく使用されますが、サイトのアイコン（"favicon" スタイルのアイコンと、モバイル端末のホーム画面やアプリのアイコンの両方）の確立や、その他のことにも使用されます。

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

外部スタイルシートへリンクするには、 `<head>` の中に次のような `<link>` 要素を入れてください。

```html
<link href="main.css" rel="stylesheet" />
```

この単純な例では、`href` 属性内にスタイルシートへのパスを提供し、`rel` 属性の値を `stylesheet` にしています。`rel` は "relationship" を意味し、おそらく `<link>` 要素の重要な機能の一つです。 — 値はこれを含んでいる文書にどのように関係するかを示します。

他にも見かけるであろう他の一般的な種別はたくさんあります。例えば、サイトのファビコンへのリンクがあります。

```html
<link rel="icon" href="favicon.ico" />
```

他にもアイコンの `rel` 値はいくつもあり、以下のように主に様々なモバイルプラットフォーム上で特殊なアイコンの種別を示すために使用されます。

```html
<link
 rel="apple-touch-icon-precomposed"
 sizes="114x114"
 href="apple-icon-114.png"
 type="image/png" />
```

`sizes` 属性はアイコンの寸法を表し、 `type` はリンクされようとしているリソースの MIME タイプが入ります。これらはブラウザーが利用できる最も適切なアイコンを選択するための有益なヒントを提供します。

`media` 属性でメディア種別やクエリーを指定することもできます。このリソースはメディアの条件が真になった場合のみ読み込まれます。

```html
<link href="print.css" rel="stylesheet" media="print" />
<link
 href="mobile.css"
 rel="stylesheet"
 media="screen and (max-width: 600px)" />
```

`<link>` 要素には、興味深いパフォーマンスやセキュリティの機能もいくつか追加されています。以下の例を見てみましょう。

```html
<link
 rel="preload"
 href="myFont.woff2"
 as="font"
 type="font/woff2"
 crossorigin="anonymous" />
```

`rel` が `preload` の値であることは、ブラウザーがこのリソースを先読みすることを指示しており (詳しくは rel="preload" によるコンテンツの先読みを参照)、 `as` 属性がコンテンツが読み込まれるされる特定のクラスを示します。
 `crossorigin` 属性はリソースが CORS リクエストによって読み込まれるかどうかを示します。

その他の使い方のメモです。

* `<link>` 要素はリンク種別が **body-ok** であるかどうかによって、 `<head>` 要素または `<body>` 要素のどちらかに置くことができます。例えば `stylesheet` リンク種別は body-ok であり、`<link rel="stylesheet">` を body 要素内に置くことができます。しかし、これは従うべき良い方法ではありません。 `<link>` 要素は `<head>` に入れて本文から離した方が分かりやすくなります。
* サイトにファビコンを設定するために `<link>` を使用する場合で、サイトがセキュリティの強化のためにコンテンツセキュリティポリシー (CSP) を使用している場合、ファビコンにポリシーが適用されます。ファビコンが読み込まれないという問題が発生したら、 `Content-Security-Policy` ヘッダーの `img-src` ディレクティブがアクセスを禁止していないかどうか確認してください。
* HTML および XHTML の仕様では `<link>` 要素向けのイベントハンドラーを定義していますが、それらがどのように使用されるかは不明確です。
* XHTML 1.0 では `<link>` のような空要素では、 `<link />` のように末尾のスラッシュが必要です。
* WebTV は `rel` に `next` の値を使用して、一連の文書の次のページを先読みすることに対応しています。
属性
--

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

`as`

 この属性は、 `rel="preload"` または `rel="prefetch"` を `<link>` 要素に設定した場合に限り使用されます。
 これは `<link>` によって読み込まれるコンテンツのタイプを指定する属性であり、リクエストの照合、正しいコンテンツセキュリティポリシーの適用、正しい `Accept` リクエストヘッダーの設定のために必要です。
 さらに、 `rel="preload"` はこれをリクエストの優先度付の信号として使用します。下記の表はこの属性に有効な値と、適用先の要素またはリソースの一覧です。

| 値 | 適用先 |
| --- | --- |
| audio | `<audio>` 要素 |
| document | `<iframe>` および `<frame>` 要素 |
| embed | `<embed>` 要素 |
| fetch | fetch, XHR

**Note:** この値では `<link>` に crossorigin 属性が付いたものが必要です。
 |
| font | CSS @font-face |
| image | `<img>` および `<picture>` 要素で srcset または imageset 属性が付いているもの、 SVG の `<image>` 属性、 CSS の `*-image` ルール |
| object | `<object>` 属性 |
| script | `<script>` 要素、ワーカーの `importScripts` |
| style | `<link rel=stylesheet>` 要素、 CSS の
 `@import` |
| track | `<track>` 要素 |
| video | `<video>` 要素 |
| worker | ワーカー、共有ワーカー |

`crossorigin`

列挙型の属性で、関連リソースを取得する際に CORS を使用しなければならないかを示します。
 CORS が有効な画像は、*汚染*されることなく `<canvas>` 要素で再利用できます。次の値が使用できます。

`anonymous`

 オリジン間リクエスト (つまり、 HTTP の `Origin` ヘッダーを持つリクエスト) が実行されます。ただし、信用情報は送信されません (Cookie、X.509 証明書、 HTTP ベーシック認証は利用されません)。
 サーバーが元のサイトに信用情報を付与しない (HTTP の `Access-Control-Allow-Origin` ヘッダーの設定がない) 場合、リソースが汚染され、その使用も制限されます。

`use-credentials`

 オリジン間リクエスト (つまり、 HTTP の `Origin` ヘッダーを持つリクエスト) が実行され、信用情報が送信されます (Cookie、証明書、HTTP ベーシック認証が利用されます)。
 サーバーが元のサイトに信用情報を付与しない場合 (HTTP の `Access-Control-Allow-Credentials` ヘッダーに関わらず)、画像が*汚染*され、その使用も制限されます。

 この属性が存在しない場合、リソースは CORS リクエストなしで (`Origin` HTTP ヘッダーを送信せずに) 取得され、汚染されない使用が妨げられます。これが無効な場合、列挙型のキーワード **anonymous** が指定されたものとして扱われます。
 それ以上の情報は CORS 設定属性 を参照してください。

`disabled`
Non-standard

`rel="stylesheet"` の場合のみ、 `disabled` は論理属性であり、指定されたスタイルシートを読み込んで文書に適用するかどうかを示します。 `disabled` が HTML に読み込み時点で指定されていた場合、そのスタイルシートはページ読み込み処理の間に読み込まれません。代わりに、そのスタイルシートは `disabled` 属性が `false` に変更されたか削除された場合にオンデマンドで読み込まれます。

DOM から `disabled` プロパティの値を変更すると、そのスタイルシートを文書の `Document.styleSheets` の一覧から削除します。

`fetchpriority`
Experimental

先読みされたリソースを取得する際に使用する相対的な優先度のヒントを 提供します。使用できる値は次の通りです。

`high`

同じ型を持つ他のリソースと比較して、優先度の高い取り込みを示します。

`low`

同じ型の他のリソースと比較して、優先順位が低い取り込みを示します。

`auto`

既定値。同じ型の他のリソースに対するフェッチ優先順位を自動的に決定することを示します。

`href`

この属性は、リンクしたリソースの URL を指定します。 URL は絶対・相対のどちらでもかまいません。

`hreflang`

 この属性は、リンク先のリソースの言語を示します。
 これは単なる助言です。
 許容される値は RFC 5646: Tags for Identifying Languages (also known as BCP 47) で定めています。
 この属性は、`href` 属性が提供されている場合にのみ使用します。

`imagesizes`

`rel="preload"` および `as="image"` において、 `imagesizes` 属性は、`img` 要素によって使用される適切なリソースを、その `srcset` および `sizes` 属性に対応する値で先読みすることを示す sizes 属性です。

`imagesrcset`

`rel="preload"` および `as="image"` において、 `imagesrcset` 属性は `img` 要素によって使用される適切なリソースを、その `srcset` および `sizes` 属性に対応する値で先読みすることを示す sourceset 属性です。

`integrity`
Experimental

この属性は、取得したリソースが予期せぬ改ざんを受けずに提供されたかを、ユーザーエージェントが検証するために使用できるメタデータである、ブラウザーに取得させたリソース (ファイル) の暗号学的ハッシュを BASE64 でエンコードしたデータを含みます。サブリソース完全性をご覧ください。

`media`

この属性は、リンク先のリソースが適用されるメディアを指定します。この値はメディアクエリーでなければなりません。この属性は主に外部のスタイルシートから、実行中のデバイスに最適なものをユーザーエージェントが選択できるようにリンクするときに役立ちます。

**メモ:**

* HTML 4 では、単純なホワイトスペースで区切られたメディアリテラルのリストのみ記述できます。これはメディア種別とグループ で、`print`, `screen`, `aural`, `braille` などの使用可能な値が定義されています。
 HTML5 ではこれがあらゆるメディアクエリーに拡張され、 HTML 4 で使用できる値の上位互換となっています。
* CSS3 メディアクエリーに対応していないブラウザーは、リンクを適切に理解するとは限りません。 HTML 4 で定義されたメディアクエリーのセットに制限されるので、フォールバックリンクを設定することを忘れないでください。

`prefetch` 安全なコンテキスト用
Experimental

この属性は、おそらく次のナビゲーション先で必要でありユーザーエージェントが取得すべきであるリソースを特定します。これは将来リソースがリクエストされたときに、ユーザーエージェントが早く応答することを可能にします。

`referrerpolicy`
Experimental

リソースを読み込む際にどのリファラーを使用するかを示す文字列です。

* `no-referrer` は、`Referer` ヘッダーを送信しないことを表します。
* `no-referrer-when-downgrade` は、TLS (HTTPS) を使用せずにオリジンへナビゲートする場合は `Referer` ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザーエージェントの既定の動作です。
* `origin` は、ページのオリジン (大まかにいえばスキーム、ホスト、ポート) をリファラーとすることを表します。
* `origin-when-cross-origin` は、異なるオリジンへの移動ではリファラーをスキーム、ホスト、ポートに制限します。同一オリジンへの移動では、リファラーのパスも含めます。
* `unsafe-url` は、リファラーにオリジンとパスを含めることを表します (ただし、フラグメント、パスワード、ユーザー名は含めません)。これはオリジンやパスの情報が TLS で保護されたリソースからセキュアでないオリジンへ漏えいしますので、安全ではありません。

`rel`

この属性は現在の文書に対する、リンクされた文書の関係を示します。属性値は、空白で区切られたリンク種別の値のリストでなければなりません。

`sizes`
Experimental

この属性は、リソースに含まれる映像メディア向けのアイコンのサイズを定義します。これは、 `rel` の値が `icon` または Apple の `apple-touch-icon` のような標準外の種別が含まれている場合にのみ指定することができます。以下の値を指定できます。

* `any`: `image/svg+xml` のようなベクター画像であるため、どのようなサイズにも調整可能であることを示します。
* ホワイトスペースで区切られたサイズのリスト。サイズはそれぞれ `<幅のピクセル数>x<高さのピクセル数>` または `<幅のピクセル数>X<高さのピクセル数>` という形式です。それぞれのサイズがリソースに含まれていることが必要です。

**メモ:** ほとんどのアイコン形式は 1 個のアイコンのみ保存可能です。よってほとんどの場合、 `sizes` 属性はエントリーが 1 個だけになります。
 アップルの ICN はもちろん、マイクロソフトの ICO 形式も使用できます。 ICO の方が一般的であり、複数ブラウザーの対応 (特に IE の古いバージョン) が重要である場合はこの形式を使用してください。

`title`

`title` 属性は、`<link>` 要素では特別な意味があります。`<link rel="stylesheet">` で使用すると、優先スタイルシートか代替スタイルシートか を定義します。

`type`

 この属性は、リンク先コンテンツの種類を定義します。この属性の値は **text/html** や **text/css** などの MIME タイプにします。
 この属性の一般的な使用法は、参照されるスタイルシートのタイプ（**text/css** など）の定義ですが、 CSS はウェブ上の唯一のスタイルシート言語であるため、`type` 属性を省略できるばかりでなく、それが実際に推奨される習慣になっています。
 また `rel="preload"` リンク種別で、ブラウザーが対応するファイルタイプのみダウンロードさせるためにも使用します。

`blocking`
Experimental

この属性は、外部リソースの読み取り時に特定の処理をブロックすべきであることを明示的に示します。ブロックされる操作は、下記のブロック属性をスペースで区切った一覧でなければなりません。

* `render`: 画面に描画するコンテンツがブロックされます。

### 標準外の属性

`methods`
Non-standard

非推奨

 この属性の値は、オブジェクト上で動作する関数についての情報を提供します。
 この値は基本的に HTTP プロトコルが利用されたときに与えられますが、(**title** 属性と同じような理由で) リンク先の情報を前もって含めるときに役立ちます。
 例えば定義されたメソッドの機能によって、異なるリンクの描画をブラウザーが選択します。
 検索可能なリンクで異なるアイコンを取得したり、外部リンクには現在のサイトから去ることを示す描画にしたりできます。
 この属性は、定義された Internet Explorer 4 ですら、あまり理解されておらず対応もされていません。

`target`
非推奨

定義されたリンク関係を持つ、またはリンクしたリソースを表示するフレームまたはウィンドウの名前を定義します。

### 廃止された属性

`charset`
非推奨

 この属性は、リンク先のリソースの文字エンコーディングを定義します。この値は RFC 2045 で定義されている文字セットの、スペースまたはカンマで区切られたリストです。
 既定値は `iso-8859-1` です。

**メモ:** この廃止された属性と同じ効果を生み出すためには、リンク先のリソースで HTTP の `Content-Type` ヘッダーを使用してください。

`rev`
非推奨

 この属性の値は、`href` 属性で定義したリンク先文書に対する、現在の文書の関係を示します。
 従って、この属性は `rel` 属性の値と比べたときに逆向きの関係を定義します。
 この属性向けのリンク種別の値は、`rel` 向けの値と似ています。

**メモ:** 代わりに、逆の意味のリンク種別の値を与えた `rel` 属性を使用してください。例えば `made` は `author` に置き換えます。また、この属性は「リビジョン」 (revision) を表すものではないので、バージョン番号を指定してはいけませんが、残念ながらいくつものサイトでそのように使用されています。

例
-

### スタイルシートの読み込み

ページにスタイルシートを読み込むには、以下の構文を使用します。

```html
<link href="style.css" rel="stylesheet" />
```

### 代替スタイルシートの提供

代替スタイルシートも提示できます。

 ユーザーはメニューの **表示 > スタイルシート** で、使用するスタイルシートを選択できます。
 これは、ユーザーがページをさまざまなバージョンで閲覧する手段を提供します。

```html
<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />
```

### 異なる利用場面のアイコンの提供

同じページにいくつかの異なるアイコンへのリンクを含めて、ブラウザーが `rel` や `sizes` の値をヒントとして使用し、特定の場面で最適に動作する一つを選択するようにすることができます。

```html
<!-- 高解像度ディスプレイの第 3 世代 iPad -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="144x144"
 href="favicon144.png" />
<!-- 高解像度ディスプレイの iPhone -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="114x114"
 href="favicon114.png" />
<!-- 第 1、第 2 世代の iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png" />
<!-- 高解像度でない iPhone, iPod Touch, Android 2.1 以降の端末 -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png" />
<!-- 基本的なファビコン -->
<link rel="icon" href="favicon32.png" />
```

### メディアクエリーのついた条件付きのリソース読み込み

以下のように、メディア種別やクエリーを `media` 属性で指定することができます。このリソースはメディア条件が真の場合にのみ読み込まれます。

```html
<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="all" />
<link
 href="desktop.css"
 rel="stylesheet"
 media="screen and (min-width: 600px)" />
<link
 href="highres.css"
 rel="stylesheet"
 media="screen and (min-resolution: 300dpi)" />
```

### スタイルシートの load イベント

`load` イベントの発生を確認することで、スタイルシートが読み込まれた時を判断できます。同様に `error` イベントを確認することで、スタイルシートを処理する際のエラー発生を検出できます。

```html
<script>
 const stylesheet = document.querySelector("#my-stylesheet");

 stylesheet.onload = () => {
 // Do something interesting; the sheet has been loaded
 };

 stylesheet.onerror = () => {
 console.log("An error occurred loading the stylesheet!");
 };
</script>

<link rel="stylesheet" href="mystylesheet.css" id="my-stylesheet" />
```

**メモ:** `load` イベントはスタイルシートとスタイルシートがインポートするすべてのコンテンツの読み込みと解析が行われた後、スタイルシートがコンテンツに適用される直前に発生します。

### 先読みの例

`<link rel="preload">` の例は、 `rel="preload"` によるコンテンツの先読みにいくつかあります。

### リソースが読み込まれるまで描画をブロック

`render` トークンを `blocking` 属性に設定することができます。
 指定すると、リソースが取り込まれるまでページのレンダリングがブロックされます。

```html
<link blocking="render" href="critical-font.woff2" as="font" />
```

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー |
 メタデータコンテンツ。
 `itemprop` が存在する場合は、フローコンテンツおよび記述コンテンツ。
  |
| 許可されている内容 | なし。これは空要素です。 |
| タグの省略 | 空要素であるため開始タグは必須であり、終了タグは置いてはいけません。 |
| 許可されている親要素 |
 メタデータ要素を受け入れるすべての要素。
 itemprop 属性がある場合は記述コンテンツを受け入れるすべての要素。
  |
| 暗黙の ARIA ロール | `href` 属性つきの `link` |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLLinkElement` |

仕様書
---

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

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

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

関連情報
----

* HTTP の `Link` ヘッダー


<ul>: 順序なしリスト要素 - HTML: ハイパーテキストマークアップ言語

<ul>: 順序なしリスト要素
===============

**`<ul>`** は HTML の要素で、項目の順序なしリストを表します。一般的に、行頭記号を伴うリストとして描画されます。

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

属性
--

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

`compact`
非推奨

Non-standard

この論理属性は、コンパクトなスタイルでリストを描画するようブラウザーに指示するものです。この属性の解釈はユーザーエージェントに委ねられ、またすべてのブラウザーで動作するものでもありません。

**警告:** この属性は非推奨になっているため、使用しないでください。代わりに CSS を使用してください。 `compact` 属性と同様の効果を得るには、 CSS の `line-height` プロパティを用い、その値として `80%` を指定します。

`type`
非推奨

Non-standard

リストの行頭記号の形状を指定するために用います。 HTML3.2 および HTML 4.0/4.01 tranditional で定義されていた値は以下の通りです。

* `circle`
* `disc`
* `square`

4 つ目の行頭記号の形状として、WebTV インターフェイスで `triangle` が定義されていますが、すべてのブラウザーが対応しているわけではありません。

この属性が存在せず、CSS の `list-style-type` プロパティがその要素に適用されていない場合は、ユーザーエージェントが行頭記号の種類を、リストの入れ子階層に応じて選択します。

**警告:** この属性は非推奨なので使用しないでください。代替として CSS の `list-style-type` プロパティを使用してください。

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

* `<ul>` 要素は、数的な順序がなく、その配置順に意味を持たない項目を持つリストを表します。通常、順序なしリストの項目はドット、円形、四角形などいくつかの形式による行頭記号を伴って描画されます。行頭記号のスタイルは HTML 仕様書のページでは定義されていませんが、 CSS の `list-style-type` プロパティを用いて変更することが可能です。
* `<ul>` 要素と `<ol>` 要素は、必要なだけ深く入れ子にすることができます。さらに言えば、入れ子になったリストが `<ol>` と `<ul>` の間で変化することに制限はありません。
* `<ol>` と `<ul>` は、どちらも項目のリストを表します。両者の違いは、 `<ol>` 要素では順序に意味があることです。使い分けの目安としては、項目の順序を変更してみてください。意味が変わるようであれば `<ol>` 要素を使用し、そうでない場合は `<ul>` 要素を使用することができます。
例
-

### シンプルな例

```html
<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>
```

次のように出力されます。

### 入れ子になったリスト

```html
<ul>
  <li>first item</li>
  <li>
    second item
    <!-- 閉じタグの </li> がここにはない -->
    <ul>
      <li>second item first subitem</li>
      <li>
        second item second subitem
        <!-- 入れ子になった第二の順序なしリストでも同じ -->
        <ul>
          <li>second item second subitem first sub-subitem</li>
          <li>second item second subitem second sub-subitem</li>
          <li>second item second subitem third sub-subitem</li>
        </ul>
      </li>
      <!-- 三番目の順序なしリストを含む li の
 閉じタグ </li> -->
      <li>second item third subitem</li>
    </ul>
    <!-- ここに閉じタグ </li> -->
  </li>
  <li>third item</li>
</ul>
```

次のように出力されます。

### <ul> と <ol> のネスト

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

次のように出力されます。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ。また、 `<ul>` 要素の子に少なくとも 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 インターフェイス | `HTMLUListElement` |

仕様書
---

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

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

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

関連情報
----

* その他のリスト関連要素: `<ol>`, `<li>`, `<menu>`
* `<ul>` 要素の整形に有益な CSS プロパティ:
    + `list-style` プロパティ: 行頭記号の表示方法の変更
    + CSS カウンター: 複雑に入れ子になったリストの扱い
    + `line-height` プロパティ: 非推奨の `compact` 属性のシミュレート
    + `margin` プロパティ: リストのインデントの制御


<s>: 取り消し要素 - HTML: ハイパーテキストマークアップ言語

<s>: 取り消し要素
===========

**`<s>`** は HTML の要素で、テキストを取り消し線または打ち消し線つきで描画します。`<s>` 要素はすでに適切または正確ではなくなった事柄を表現するために使用してください。しかし、文書の修正を示す場合、 `<s>` 要素は適切ではありません。この場合は `<del>` と `<ins>` の方が適しているので、こちらを使用してください。

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

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

属性
--

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

例
-

```css
.sold-out {
  text-decoration: line-through;
}
```

```html
<s>本日のおすすめ: サーモン</s> 売り切れ<br />
<span class="sold-out">本日のおすすめ: サーモン</span> 売り切れ
```

### 結果

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

`s` 要素が存在することは、多くのスクリーンリーダー技術の既定の設定ではアナウンスされません。 CSS の `content` プロパティを、 `::before` および `::after` 擬似要素と共に使うことでアナウンスさせることができます。

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

s::before {
  content: " [取り消しテキスト開始] ";
}

s::after {
  content: " [取り消しテキスト終了] ";
}
```

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

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

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

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

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

関連情報
----

* `<strike>` 要素は、`<s>` 要素の分身でしたが、廃止されており、もうウェブサイトで使用するべきではありません。
* `<del>` 要素は、データが*削除された*場合に代わりに使用するべきものです。
* CSS の `text-decoration-line` プロパティは、`<s>` 要素の以前の視覚効果を実現します。


<plaintext>: プレーンテキスト要素（非推奨） - HTML: ハイパーテキストマークアップ言語

<plaintext>: プレーンテキスト要素（非推奨）
============================

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

**`<plaintext>`** は HTML の要素で、開始タグ以降のすべてを生のテキストとして表示し、それ以降の HTML を無視します。開始タグ以降は全て生のテキスト扱いになるので、終了タグはありません。

**警告:** この要素は使用しないで下さい。

* `<plaintext>` は HTML 2 より非推奨となっており、全てのブラウザーが実装しているわけではありません。実装しているブラウザーでも、一貫していません。
* `<plaintext>` は廃止されています。この要素を受け付けるブラウザーは `<pre>` 要素と同様に扱い、内部の HTML を解釈する場合もあります。
* `<plaintext>` 要素が (`<head>` などの非表示の要素を除いて) ページの最初の要素になるのであれば、 HTML は使用しないでください。代わりに、テキストファイルを `text/plain` の MIME タイプで送信するようにしてください。
* この要素を使用する代わりに、 `<pre>` 要素か、意味的に適切であれば (インラインテキスト向けの) `<code>` 要素を使用してください。その際、コンテンツの中身がうっかり HTML として解釈されないように、 `<`, `>` `&` の各文字をエスケープしてください。
* 等幅フォントは、 HTML 要素に CSS の `font-family` スタイルを `monospace` にすることで適用することができます。

属性
--

この要素は、全ての要素が持つグローバル属性以外の属性を持ちません。

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

この要素は `HTMLElement` インタフェースを提供します。

仕様書
---

| Specification |
| --- |
| HTML Standard # plaintext |

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

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

関連情報
----

* `<pre>` および `<code>` 要素を代わりに使用してください。
* `<xmp>` も `<plaintext>` と同様に廃止されています。


<big>: 大きめのテキスト要素 - HTML: ハイパーテキストマークアップ言語

<big>: 大きめのテキスト要素
=================

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

**`<big>`** は HTML の非推奨の要素で、内包するテキストを周りの文字列よりも 1 段階大きいフォントの大きさで描画します（例えば `medium` が `large` になります）。大きさはブラウザーの最大フォントの大きさに制限されます。

**警告:** この要素は仕様書から削除され、もう使用するべきではありません。ウェブ開発者は CSS の `font-size` プロパティを使用して、フォントの大きさを調整してください。

属性
--

この要素は、すべての要素で共通のグローバル属性以外の属性はありません。

例
-

ここでは `<big>` を使って表示する例と、その後で現在の CSS の文法で代用して同じ結果を得る方法を示します。

### big の使用

この例は、廃止された `<big>` 要素を使用して、一部のテキストの大きさを拡大します。

#### HTML

```html
<p>
  This is the first sentence.
  <big>This whole sentence is in bigger letters.</big>
</p>
```

#### 結果

### CSS の `font-size` の使用

この例では CSS の `font-size` プロパティを使用して、フォントの大きさを 1 レベル大きくしています。

#### CSS

```css
.bigger {
  font-size: larger;
}
```

#### HTML

```html
<p>
  This is the first sentence.
  <span class="bigger">This whole sentence is in bigger letters.</span>
</p>
```

#### 結果

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

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

仕様書
---

| Specification |
| --- |
| HTML Standard # big |

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

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

関連情報
----

* CSS: `font-size`, `font`
* HTML: `<small>`, `<font>`, `<style>`
* HTML 4.01 仕様書: Font Styles


<marquee>: マーキー要素 - HTML: ハイパーテキストマークアップ言語

<marquee>: マーキー要素
=================

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

**`<marquee>`** は HTML の要素で、テキストがスクロールする領域を挿入します。要素の属性を使用して、テキストがコンテンツ領域の端に達したときにどうするかを制御できます。

属性
--

`behavior`
非推奨

marquee 要素内でのテキストのスクロール方法を `scroll`、`slide`、`alternate` の内の何れかのキーワードで指定します。指定を省略した場合は、初期値の `scroll` が適用されます。

`bgcolor`
非推奨

背景色を、色名もしくは 16 進カラーコードで指定します。

`direction`
非推奨

marquee 要素内でのテキストのスクロール方向を `left`、`right`、`up`、`down` の内の何れかのキーワードで指定します。初期値は `left` です。

`height`
非推奨

スクロール範囲の高さを、ピクセル値かパーセント値で指定します。

`hspace`
非推奨

水平方向のマージンを指定します。

`loop`
非推奨

テキストのスクロール回数を指定します。初期値は −1 であり、これはスクロール回数を制限せず、恒久的にスクロールを続ける指定です。

`scrollamount`
非推奨

インターバル内での、テキストの移動ピクセル数を指定します。初期値は 6 です。

`scrolldelay`
非推奨

スクロール動作のインターバルをミリ秒で指定します。初期値は 85 です。`truespeed` 属性が指定されていない場合は 60 が最下限であり、これ以下の値は 60 として解釈されます。

`truespeed`
非推奨

既定では、`scrolldelay` で 60 を下回る値は無視します。`truespeed` を指定すると、それらの値が無視されません。

`vspace`
非推奨

垂直方向のマージンをピクセル値かパーセント値で指定します。

`width`
非推奨

スクロール範囲の幅をピクセル値かパーセント値で指定します。

イベントハンドラー
---------

`onbounce`

マーキーがスクロール位置の末端に達したときに発行されます。 behavior 属性の値に `alternate` が指定されている場合のみ発行されます。

`onfinish`

loop 属性で指定された回数のループが終了した時に発行されます。 loop 属性に 1 以上の値が指定されている場合にのみ発行されます。

`onstart`

marquee がスクロールを開始した時に発行されます。

メソッド
----

`start()`

marquee のスクロールの開始

`stop()`

marquee のスクロールの停止

例
-

```html
<marquee>This text will scroll from right to left</marquee>

<marquee direction="up">This text will scroll from bottom to top</marquee>

<marquee
 direction="down"
 width="250"
 height="200"
 behavior="alternate"
 style="border:solid">
  <marquee behavior="alternate">This text will bounce</marquee>
</marquee>
```

### 結果

技術的概要
-----

|  |  |
| --- | --- |
| DOM インターフェイス | `HTMLMarqueeElement` (en-US) |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-marquee-element-2 |

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

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

関連情報
----

* `HTMLMarqueeElement` (en-US)


<kbd>: キーボード入力要素 - HTML: ハイパーテキストマークアップ言語

<kbd>: キーボード入力要素
================

**`<kbd>`** は HTML の要素で、キーボード、音声入力、その他の入力端末からのユーザーによる文字入力を表す行内の文字列の区間を表します。慣習的に、ユーザーエージェントは既定で `<kbd>` 要素の中身を等幅フォントで表示しますが、 HTML 標準で規定されているものではありません。

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

`<kbd>` は `<samp>`（サンプル出力）要素の中で様々な組み合わせの入れ子が行われ、様々な形の入力や視覚的な合図に基づいた入力を表現します。

属性
--

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

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

他の要素 `<kbd>` と組み合わせることで、もっと具体的なシナリオを表現できる場合があります。

* 他の `<kbd>` 要素の中で更に `<kbd>` 要素を使用すると、もっと大きい入力の中における、実際のキー入力またはその他の入力単位を表します。以下の入力時のキー操作の表現を参照してください。
* `<kbd>` 要素を `<samp>` 要素の中で使用すると、システムからユーザーにエコーバックされた入力を表します。以下の入力のエコーバックの例を参照してください。
* 一方、 `<kbd>` 要素の中で `<samp>` 要素を使用すると、メニューやメニュー項目の名前、画面上に表示されているボタンの名前など、システムによって表示された文字列に基づく入力を表します。以下の画面上に表示された入力の選択肢の表現を参照してください。

**メモ:** 専用のスタイルを定義して、 `<kbd>` 要素における既定のフォントの選択を上書きすることができますが、ユーザー設定によっては CSS より優先されることがあります。

例
-

### 基本的な例

```html
<p>
  コマンド "mycommand" のドキュメントを参照するには <kbd>help mycommand</kbd>
  コマンドを使用してください。
</p>
```

#### 結果

### 入力時のキー操作の表現

複数のキー操作から成る入力を表現したい場合、複数の `<kbd>` 要素を重ねて、外側の `<kbd>` 要素で入力全体を表し、内側の `<kbd>` で入力時のそれぞれのキー操作を表すことができます。

#### スタイルなし

最初に、 HTML だけでどのように見えるかを見てみましょう。

##### HTML

```html
<p>
  キーボードショートカットの
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>
  を使用して新規文書を作成することもできます。
</p>
```

ここでは外側の `<kbd>` 要素でキー入力操作全体を囲み、それぞれのキーの組み合わせを記述するために、それぞれのキーを囲んでいます。

**メモ:** 常にこのように囲む必要はありません。外側の `<kbd>` 要素を省略して簡略化しても構いません。言い換えれば、単に `<kbd>Ctrl</kbd>+<kbd>N</kbd>` と表現するのも完全に有効です。

**メモ:** しかし、スタイルシートによっては、このように重ねて囲んだ方が便利だと感じられるかもしれません。

##### 結果

スタイルシートを適用しないと、出力結果は次のように見えます。

#### 専用スタイル付き

いくらか CSS を追加して、もっと分かりやすくすることができます。

##### CSS

キーボードキーのレンダリング時に適用できる、入れ子になっている `<kbd>` 要素の新しいセレクター、`kbd>kbd` を追加します。

```css
kbd > kbd {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}
```

##### HTML

それから HTML を更新して、このクラスを出力中のキーに使用するように表現します。

```html
<p>
  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>
  を押して新規文書を作成することもできます。
</p>
```

##### 結果

結果は私たちが求めているものです。

### 入力のエコーバック

`<kbd>` 要素を `<samp>` 要素内で使用すると、システムからエコーバックされた入力を表現することができます。

```html
<p>
  構文エラーが発生すると、このツールは確認のために
  あなたが入力したコマンドを出力します。
</p>
<blockquote>
  <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>
</blockquote>
```

##### 結果

### 画面上に表示された入力の選択肢の表現

`<kbd>` 要素の中で `<samp>` 要素を使用すると、メニューやメニュー項目の名前や、画面上に表示されているボタンの名前など、システムが表示した文字列に基づく入力を表すことができます。

例えば、「ファイル」メニューの中の「新規文書」を選択する方法を HTML で表現すると、このようになります。

```html
<p>
  新規ファイルを作成するには、メニューの <kbd><kbd><samp>ファイル</samp></kbd>
  ⇒<kbd><samp>新規文書</samp></kbd></kbd> を選択して下さい。
</p>

<p>
  新しいファイルの名前を入力したら、 <kbd><samp>OK</samp></kbd>
  ボタンを押して確認することを忘れないでください。
</p>
```

これはいくらか興味深い組み合わせです。メニューの選択肢を記述するために、入力全体を `<kbd>` 要素で囲んでいます。それからその中で、メニューとメニュー項目の名前を `<kbd>` および `<samp>` の中に入れ、画面上の部品を選択する入力であることを示しています。

#### 結果

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* `<code>`


<bdo>: 双方向文字列上書き要素 - HTML: ハイパーテキストマークアップ言語

<bdo>: 双方向文字列上書き要素
==================

**`<bdo>`** は HTML の要素で、現在のテキストの書字方向を上書きし、中のテキストが異なる書字方向で描画されるようにします。

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

テキストの文字は指定された方向の開始位置から描画されます。それぞれの文字の向きには影響を与えません（ですから、例えば、文字は裏返しにはなりません）。

属性
--

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

`dir`

この要素の内容において、テキストが描画される方向です。以下の値が指定可能です。

* `ltr`: テキストを左から右へ (left-to-right) 向かわせることを意味する指定。
* `rtl`: テキストを右から左へ (right-to-left) 向かわせることを意味する指定。

例
-

```html
<!-- 書字方向を切り替える -->
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
```

### 結果

メモ
--

HTML 4 の仕様では、この要素にイベントが指定されていません。イベントは XHTML で追加されました。これは、恐らく見落としでしょう。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 記述コンテンツ, 知覚可能コンテンツ
  |
| 許可されている内容 | 記述コンテンツ |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLElement`。Gecko 1.9.2 (Firefox 4)
 以前では、Firefox はこの要素に対し
 `HTMLSpanElement`
 インターフェイスを実装しています。
  |

仕様書
---

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

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

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

関連情報
----

* 関連する HTML 要素: `<bdi>`


<figure>: キャプションが付けられる図要素 - HTML: ハイパーテキストマークアップ言語

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

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

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

属性
--

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

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

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

### 画像

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

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

#### 結果

### コードスニペット

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

#### 結果

### 引用

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

#### 結果

### 詩

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

#### 結果

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* `<figcaption>` 要素


<base>: 文書の基底 URL 要素 - HTML: ハイパーテキストマークアップ言語

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

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

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

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

属性
--

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

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

`href`

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

`target`

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

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

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

### 複数の <base> 要素

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

### ページ内アンカー

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

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

### Open Graph

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

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

例
-

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

仕様書
---

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

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

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


<menu>: メニュー要素 - HTML: ハイパーテキストマークアップ言語

<menu>: メニュー要素
==============

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

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

属性
--

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

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

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

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

例
-

### ツールバー

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

#### HTML

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

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

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

#### CSS

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

li {
  flex-grow: 1;
}

button {
  width: 100%;
}
```

#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー |
フローコンテンツ。この要素の子に 1 個以上の `<li>`
 要素がある場合は知覚可能コンテンツ。
  |
| 許可されている内容 |
 0 個以上の `<li>`,
 `<script>`,
 `<template>`。
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | `list` |
| 許可されている ARIA ロール | `directory` (en-US), `group`,
 `listbox`, `menu` (en-US), `menubar` (en-US),
 `none` (en-US), `presentation`,
 `radiogroup` (en-US), `tablist` (en-US),
 `toolbar` or `tree` (en-US) |
| DOM インターフェイス | `HTMLMenuElement` |

仕様書
---

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

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

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

関連情報
----

* 他のリスト関連 HTML 要素: `<ol>`, `<ul>`, `<li>`


<hr>: 主題区切り（水平線）要素 - HTML: ハイパーテキストマークアップ言語

<hr>: 主題区切り（水平線）要素
==================

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

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

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

属性
--

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

`align`
非推奨

Non-standard

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

`color`
非推奨

Non-standard

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

`noshade`
非推奨

Non-standard

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

`size`
非推奨

Non-standard

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

`width`
非推奨

Non-standard

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

例
-

### HTML

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

<hr />

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

### 結果

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* `<p>`


<source>: メディアまたは画像のソース要素 - HTML: ハイパーテキストマークアップ言語

<source>: メディアまたは画像のソース要素
=========================

**`<source>`** は HTML の要素で、`<picture>`、`<audio>`、`<video>` の各要素に対し、複数のメディアリソースを指定します。この要素は空要素であり、すなわち中身も閉じタグもありません。画像ファイル形式やメディアファイル形式の対応状況が様々であるブラウザーの幅広い互換性を確保するために、同じメディアコンテンツを複数のファイル形式で提供することはよくあることです。

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

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | なし。この要素は空要素です。 |
| タグの省略 | 開始タグは必須。終了タグを記述してはならない。 |
| 許可されている親要素 |
 メディア要素（`<audio>` または
 `<video>`）の場合、どの
 フローコンテンツまたは `<track>` 要素よりも前に配置する。

`<picture>` 要素の場合、
 `<img>` 要素より前に配置する。
  |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | なし |
| DOM インターフェイス | `HTMLSourceElement` |

属性
--

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

`type`

画像の MIME メディア型またはその他のメディア型で、オプションで `codecs` 引数 (en-US)を伴います。

`src`

この `source` 要素の親が `<audio>` および `<video>` 要素の場合は必須ですが、`source` 要素の親が `<picture>` 要素である場合は指定できません。

メディアのリソースの場所です。

`srcset`

この `source` 要素の親が `<picture>` 要素である場合は必須ですが、`source` 要素の親が `<audio>` または `<video>` 要素の場合は指定できません。

1 つ以上の文字列をカンマ区切りで並べたリストであり、ブラウザーが使用できる画像のセットを示します。それぞれの文字列の構成は以下のとおりです。

1. 画像を指定する 1 つの URL
2. 幅記述子。これは正の整数に `"w"` を付加した文字列で、例えば `300w` のようになります。指定しない場合の既定値は無限大です。
3. 画素密度記述子。これは直後に `"x"` を付加した正の浮動小数点数です。指定しない場合の既定値は `1x` です。

有効であるためには、リスト内の各文字列は、少なくとも幅記述子またはピクセル密度記述子を持たなければなりません。2 種類の記述子が混在してはならず、リスト全体で一貫して一方のみを使用しなければなりません。リストの中で、各記述子の値は固有でなければなりません。ブラウザーは、指定された時点で表示するために最も適切な画像を選びます。`sizes` 属性が存在する場合は、各文字列に対して幅の記述子を指定しなければなりません。ブラウザーが `srcset` に対応していない場合は、`src` が既定値として使用されます。

`sizes`

この `source` 要素の親が `<picture>` 要素である場合は指定可能ですが、`source` 要素の親が `<audio>` または `<video>` 要素の場合は指定できません。

ソースの寸法のリストで、そのソースが表す画像が最終的に表示される幅を表します。それぞれのソースの寸法、条件と長さの組をカンマ区切りで並べたものです。この情報は `srcset` で指定された画像を使用する際に、ページのレイアウトを行う前にブラウザーが使用します。なお、 `sizes` は `srcset` でピクセル倍率ではなく幅指定子が提供された時（例えば 2x ではなく 200w の場合）のみ、効果があることに注意してください。

`media`

この `source` 要素の親が `<picture>` 要素である場合は指定可能ですが、`source` 要素の親が `<audio>` または `<video>` 要素の場合は指定できません。

リソースの志向するメディアのメディアクエリーです。

`height`

この `source` 要素の親が `<picture>` 要素である場合は指定可能ですが、`source` 要素の親が `<audio>` または `<video>` 要素の場合は指定できません。

画像の内在的な高さをピクセル単位で指定します。単位のない整数でなければなりません。

`width`

この `source` 要素の親が `<picture>` 要素である場合は指定可能ですが、`source` 要素の親が `<audio>` または `<video>` 要素の場合は指定できません。

画像の内在的な幅をピクセル単位で指定します。単位のない整数でなければなりません。

`type` 属性が指定されていない場合は、サーバーからメディア形式を取得して、ユーザーエージェントが扱うことができるものであるかどうかを確認します。表示できない場合は、次の `<source>` をチェックします。`type` 属性が指定された場合、ユーザーエージェントが表示できる形式と比較し、扱えないものであれば、サーバーはクエリーさえ行わず、次の `<source>` 要素をチェックします。

`<picture>` 要素のコンテキストで用いた場合、ブラウザーは提供されたすべての `<source>` を調べても使用する適切な画像が見つからなかった場合、`<picture>` 要素の子の `<img>` で指定した画像を使用するようフォールバックされます。

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

`<source>` 要素は**空要素**です。すなわち内容がないだけでなく、終了タグもありません。すなわち、 "`</source>`" は HTML の中で決して使われません。

ウェブブラウザーが対応している画像形式の詳細と、使用する適切な形式を選択するためのガイダンスについては、ウェブ上で使用する画像ファイルの種類と画像のガイドを参照してください。使用できる動画・音声メディアの種類については、ウェブ上で使用するメディアの種類と形式のガイドを参照してください。

例
-

### 動画の例

次の例は、 Ogg 形式に対応したブラウザーと QuickTime 動画形式を再生可能な環境を想定した記述例です。 `audio` 要素や `video` 要素に対応していない場合、代わりにメッセージが表示されます。 audio 要素や video 要素には対応していても指定した形式のすべてが再生不可である場合は、 `error` イベントが発生し、（もしあれば）既定のメディアコントロールがエラーを示します。使用できるメディアファイル形式や、ブラウザーが対応しているメディアファイル形式の詳細については、ウェブ上のメディアの種類と形式についてのガイドを参照してください。

```html
<video controls>
  <source src="foo.webm" type="video/webm" />
  <source src="foo.ogg" type="video/ogg" />
  <source src="foo.mov" type="video/quicktime" />
  I'm sorry; your browser doesn't support HTML video.
</video>
```

その他の例については、学習エリアの記事動画と音声のコンテンツにすばらしいリソースがあります。

### 図形の例

この例では、2 つの `<source>` 要素が `<picture>` 内に含まれており、利用可能な空間の大きさがある幅を超えた時に使用する画像のバージョンを提供します。利用可能な幅がこれらの幅よりも小さい場合、ユーザーエージェントは `<img>` 要素で指定された代替画像を表示します。

```html
<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 800px)" />
  <source srcset="mdn-logo-medium.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN Web Docs" />
</picture>
```

`<picture>` 要素では、常に一つの `<img>` 要素をフォールバック画像として、 `alt` 属性をアクセシビリティのためにつける必要があります。 (画像が関係のない背景の装飾的な画像でない限り)。

### height および width 属性を持つ画像の例

 この例では、`height` と `width` 属性を持つ 3 つの`<source>`要素が、`<picture>` 要素に含まれています。
 メディアクエリーにより、ビューポートの寸法に基づいて、`height` および `width` 属性により表示すべき画像をブラウザーに選択させます。

```html
<picture>
  <source
 srcset="landscape.png"
 media="(min-width: 1000px)"
 width="1000"
 height="400" />
  <source
 srcset="square.png"
 media="(min-width: 800px)"
 width="800"
 height="800" />
  <source
 srcset="portrait.png"
 media="(min-width: 600px)"
 width="600"
 height="800" />
  <img
 src="fallback.png"
 alt="Image used when the browser does not support the sources"
 width="500"
 height="400" />
</picture>
```

仕様書
---

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

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

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

関連情報
----

* ウェブ上のメディアの種類と形式のガイド
* 画像ファイルの型と形式のガイド
* `<picture>` 要素
* `<audio>` 要素
* `<video>` 要素
* ウェブパフォーマンス


<sup>: 上付き文字要素 - HTML: ハイパーテキストマークアップ言語

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

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

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

属性
--

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

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

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

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

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

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

### べき乗

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

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

#### 結果

### Superior lettering

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

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

#### 結果

### 序数

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

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

#### 結果

技術的概要
-----

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

仕様書
---

| Specification |
| --- |
| HTML Standard # the-sub-and-sup-elements |

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

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

関連情報
----

* 下付き文字を表現する HTML の `<sub>` 要素。なお、`sub` と `sup` を同時に使用することはできません。化学式で上付き文字と下付き文字の両方が必要な場合には、MathML を用いる必要があります。
* MathML 要素: `<msub>`, `<msup>`, `<msubsup>`
* CSS の `vertical-align` プロパティ


<abbr>: 略語要素 - HTML: ハイパーテキストマークアップ言語

<abbr>: 略語要素
============

**`<abbr>`** は HTML の要素で、略語や頭字語を表します。

略語や頭字語を記載する場合、最初の使用時には、略語をマークアップするための `<abbr>` とともに、その用語の完全な展開をプレーンテキストで提供してください。これにより、ユーザーにその略語や頭字語の意味を知らせることができます。

オプションの `title` 属性で、略語や頭字語の完全な展開形が存在しない場合に、その展開形を提供することができます。これは、ユーザーエージェントがコンテンツをどのように告知/表示するかのヒントを提供し、同時にすべてのユーザーにその略語が意味していることを知らせます。設定する場合、`title` はこの完全な説明がのみを含み、それ以外を含んではいけません。

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

属性
--

この要素はグローバル属性のみに対応しています。`title` 属性は `<abbr>` 要素と共に使用すると、特定の意味を持ちます。これは完全な人間が読める形の説明または略語の完全形を設定する必要があります。この文字列は、よくマウスポインターが要素の上で静止したときに、ブラウザーがツールチップとして表示することがあります。

それぞれの `<abbr>` 要素は他の独立しています。同じ文書内で他の省略形ではない表現の文字列に自動的に結びつかない場合は、`title` を使用してください。

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

### よくある使用例

必ずしもすべての略語を `<abbr>` でマークアップする必要はありません。しかし、有用な場合がいくつかあります。

* 略語が使用され、文書コンテンツの流れの外で完全形や定義を提供したい場合は、 `<abbr>` を適切な `title` と共に使用してください。
* 読み手にとってなじみのない略語を定義する場合、用語を `<abbr>` を使用して表現し、`title` 属性や行内文字列で定義を説明してください。
* テキスト内に略語が存在し、意味の注釈が必要な場合、`<abbr>` 要素は有用です。これはスタイル付けやスクリプトの目的で使用することができます。
* `<abbr>` は `<dfn>` との組み合わせで、略語や頭字語の用語の定義を行なうことができます。以下の略語の定義の例をご覧ください。
### 文法的な考慮事項

文法的に数を表現する言語（つまり、項目の数が文の文法に影響する言語）では、`<abbr>` 要素内の `title` 属性で同じ文法的な数値を使用してください。これは、アラビア語のように 2 よりも大きい数の文法を持つ言語で特に重要ですが、英語にも当てはまります。

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

この要素の目的は単に作者の利便性のためであり、すべてのブラウザーが既定でこの要素を行内 (`display``: inline`) で表示します。ただし、既定のスタイルはブラウザーによりさまざまです。

一部のブラウザーでは、この要素の内容に点線の下線を引きます。他にも点線の下線を引くだけでなく、小さな大文字で表示するものもあります。それ以外のものは `<span>` 要素以上のスタイルを適用しません。このスタイルを制御するには `text-decoration` および `font-variant` を使用してください。

例
-

### 意味論的な略語のマークアップ

完全形や説明を提供せずに略語をマークアップするには、この例にあるように、単に属性なしで `<abbr>` を使用してください。

#### HTML

```html
<p><abbr>HTML</abbr> を使うのは楽しくて簡単です。</p>
```

#### 結果

### 略語のスタイル付け

この単純な例に見られるように、 CSS を使用して略語のために専用のスタイルを設定することができます。

#### HTML

```html
<p><abbr>CSS</abbr> を使うと、略語のスタイル付けができます。</p>
```

#### CSS

```css
abbr {
  font-variant: all-small-caps;
}
```

#### 結果

### 完全形の提供

`title` 属性を追加することで、略語や頭字語の完全形や定義を提供することができます。

#### HTML

```html
<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>
```

#### 結果

### 略語の定義

こちらに示すように、`<abbr>` と `<dfn>` を組み合わせることで、より正式に略語を定義することができます。

#### HTML

```html
<p>
  <dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr></dfn>
  は、ウェブページの意味と構造を構築するために使用するマークアップ言語です。
</p>

<p>
  仕様 (<dfn id="spec">Specification</dfn>, <abbr>spec</abbr>) は、ある技術や
  API
  がどのように機能することを意図し、どのようにアクセスするのかを詳細に説明した文書です。
</p>
```

#### 結果

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

頭字語や略語を、ページ内で最初に使われたときに完全な形で綴ることは、特に中身が技術用語や業界用語であった場合に、人々が理解するのに役立ちます。

本文中で略語や頭字語を展開することが使用不可能な場合のみ、`title` を記載してください。特に読み手にとって慣れない専門用語の場合、発表された単語やフレーズと画面に表示される内容に差異があると、耳障りになることがあります。

#### 例

```html
<p>
  JavaScript Object Notation (<abbr>JSON</abbr>) は軽量のデータ交換形式です。
</p>
```

#### 結果

これは特に、コンテンツで説明している用語や概念になじみがない人、その言語の初心者、認知症の人などに有益です。

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* `<abbr>` 要素の使用


<rb>: ルビベース要素 - HTML: ハイパーテキストマークアップ言語

<rb>: ルビベース要素
=============

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

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

属性
--

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

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

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

### rb の使用

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

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

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

#### 結果

### 注釈の分割

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

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

#### 結果

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

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* `<ruby>`
* `<rt>`
* `<rp>`
* `<rtc>`


<output>: 出力要素 - HTML: ハイパーテキストマークアップ言語

<output>: 出力要素
==============

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

属性
--

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

`for`

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

`form`

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

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

`name`

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

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

例
-

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

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

### 結果

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

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

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

仕様書
---

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

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

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


<rtc>: ルビテキストコンテナー要素 - HTML: ハイパーテキストマークアップ言語

<rtc>: ルビテキストコンテナー要素
====================

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

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

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

属性
--

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

例
-

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

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

### 結果

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* `<ruby>`
* `<rp>`
* `<rb>`
* `<rt>`


<iframe>: インラインフレーム要素 - HTML: ハイパーテキストマークアップ言語

<iframe>: インラインフレーム要素
=====================

**`<iframe>`** は HTML の要素で、入れ子になった閲覧コンテキストを表現し、現在の HTML ページに他のページを埋め込むことができます。

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

それぞれの閲覧コンテキストにはそれぞれの文書があり、URL ナビゲーションができます。それぞれの埋め込み閲覧コンテキストのナビゲーションは、最上位の閲覧コンテキストのセッション履歴で直線化されます。他の閲覧コンテキストを埋め込んでいる閲覧コンテキストは、*親閲覧コンテキスト* と呼ばれます。*最上位* の閲覧コンテキスト（親を持たないもの）は、通常はブラウザーのウィンドウで、 `Window` オブジェクトで表されます。

**警告:** それぞれの閲覧コンテキストは完全な文書環境であるため、ページの中で `<iframe>` を使用するごとに、必要となるメモリやその他の計算リソースが増加します。理論的には好きなだけ `<iframe>` を使用することができますが、パフォーマンスの問題を確認してください。

属性
--

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

`allow`

権限ポリシーを `<iframe>` に指定します。このポリシーは、 `<iframe>` が利用可能な機能（例：マイク、カメラ、バッテリー、ウェブ共有 API へのアクセスなど）をリクエストのオリジンに基づいて定義します。

**メモ:** `allow` 属性で指定された権限ポリシーは `Permissions-Policy` ヘッダーで指定されたポリシーの上に、さらに制限を実装するものです。それはそれを置き換えるものではありません。

`allowfullscreen`

この `<iframe>` が `requestFullscreen()` を呼び出して全画面モードにすることができる場合は、 `true` に設定します。

**メモ:** この属性は古い属性とみなされており、 `allow="fullscreen"` として再定義されました。

`allowpaymentrequest`
Experimental

異なるオリジンの `<iframe>` で 支払いリクエスト API の実行を許可する場合は `true` に設定します。

**メモ:** この属性は古い属性とみなされており、 `allow="payment"` として再定義されました。

`credentialless`
Experimental

Non-standard

`true` に設定すると `<iframe>` を無信頼であることを示します。 つまり、そのコンテンツは新しい、一時的なコンテキストで読み込まれることになります。これはそのオリジンに関連するネットワーク、クッキー、ストレージデータへのアクセス権がありません。最上位の文書の存続期間に依存する新しいコンテキストを使用します。その代わりに `Cross-Origin-Embedder-Policy` (COEP) 埋め込みルールは解除され、COEP を設定した文書はそうでない第三者の文書を埋め込むことができるようになります。詳しくは無信頼の iframe を参照してください。

`csp`
Experimental

埋め込みリソースを制限するコンテンツセキュリティポリシーです。詳しくは `HTMLIFrameElement.csp` をご覧ください。

`height`

フレームの高さを CSS ピクセル数で示します。既定値は `150` です。

`loading`

ブラウザーが iframe をどのように読み込むかを示します。

* `eager`: 可視ビューポートの外にあるかどうかに関わらず、 iframe を直ちにロードします（これが既定値です）。
* `lazy`: ブラウザーで定義されたビューポートからの計算された距離に達するまで iframe の読み込みを延期します。

`name`

埋め込み閲覧コンテキストのターゲットの名前です。 `<a>`, `<form>`, `<base>` 要素における `target` 属性の値、 `<input>` や `<button>` 要素における `formtarget` 属性の値、 `window.open()` メソッドの `windowName` 引数の値として使用することができます。

`referrerpolicy`

フレームのリソースにアクセスする際にどのリファラーを送信するかを示します。

* `no-referrer`: `Referer` ヘッダーを送信しません。
* `no-referrer-when-downgrade`: `Referer` ヘッダーは TLS (HTTPS) のないオリジンには送信しません。
* `origin`: 送信するリファラーを、参照しているページのオリジン（スキーム, ホスト名, ポート番号）に限定します。
* `origin-when-cross-origin`: 他のオリジンへ送信されるリファラーは、スキーム、ホスト名、ポート番号のみにします。同一オリジンへの移動では、パスも含めます。
* `same-origin`: リファラーは同じオリジンには送信しますが、異なるオリジンへのリクエストにはリファラー情報を送信しません。
* `strict-origin`: プロトコルのセキュリティ水準が同じ (HTTPS→HTTPS) である場合は、文書のオリジンのみをリファラーとして送信しますが、宛先の安全性が劣る場合 (HTTPS→HTTP) には送信しません。
* `strict-origin-when-cross-origin`: 同一オリジンへのリクエストには URL 全体を送信し、プロトコルのセキュリティ水準が同じ (HTTPS→HTTPS) である場合は、文書のオリジンのみをリファラーとして送信し、宛先の安全性が劣る場合 (HTTPS→HTTP) にはヘッダーを送信しません。
* `unsafe-url`: リファラーにオリジン*および*パスを含めます (ただし、フラグメント、パスワード、ユーザー名は含めません)。オリジンやパスの情報が TLS で保護されたリソースから安全性の劣るオリジンへ漏えいしますので、**これは安全ではありません**。

`sandbox`

`<iframe>` に埋め込まれたコンテンツに適用される制限を制御します。フレーム内のコンテンツに追加の制約を適用します。この属性の値は、空にするとすべての制約を適用し、空白区切りのトークンにすると特定の制約を外します。

* `allow-downloads`: download 属性を持つ `<a>` または `<area>` 要素を通して、またファイルのダウンロードにつながるナビゲーションを通してファイルのダウンロードを可能にします。これは、ユーザーがリンクをクリックしたか、JS コードがユーザーとの対話なしに開始したかに関係なく、動作します。
* `allow-downloads-without-user-activation`
Experimental
: ユーザーの操作なしでダウンロードが発生することを許可します。
* `allow-forms`: ページがフォームを送信することを許可します。このキーワードを使用しない場合、フォームは通常通り表示されますが、フォームを送信しても入力の検証、ウェブサーバへのデータ送信、ダイアログの終了が行われません。
* `allow-modals`: ページが `Window.alert()`, `Window.confirm()`, `Window.print()`, `Window.prompt()` によってモーダルウィンドウを開くことができるようにしますが、 `<dialog>` は、このキーワードに関わらず開くことが可能です。また、ページが `BeforeUnloadEvent` イベントを受信することができるようにもします。
* `allow-orientation-lock`: リソースが画面の方向をロックすることができるようにします。
* `allow-pointer-lock`: リソースがポインターロック API (en-US) を使用できるようにします。
* `allow-popups`: ポップアップを許可します（`Window.open()`, `target="_blank"`, `Window.showModalDialog()` などから）。このキーワードが使用されていない場合、その機能は静かに失敗します。
* `allow-popups-to-escape-sandbox`: サンドボックス化された文書が、サンドボックスを継承するウィンドウではないウィンドウを開けるようにします。例えば、これによって安全に広告をサンドボックス化し、同じ制約を広告のリンク先のページに強制しないようにすることができます。
* `allow-presentation`: リソースがプレゼンテーションセッション (en-US)を開始できるようにします。
* `allow-same-origin`: このトークンが使用されていない場合、リソースは同一オリジンポリシーに常に失敗する特別なオリジンからのものとして扱われます（潜在的にデータストレージやクッキーへのアクセスや一部の JavaScript API の使用を阻止することがあります）。
* `allow-scripts`: ページがスクリプトを実行することを許可します（ただし、ポップアップウィンドウは作成しません）。このキーワードが使用されない場合、この操作は許可されません。
* `allow-storage-access-by-user-activation`
Experimental
: `<iframe>` で読み込んだ文書がストレージアクセス API を使用して、分離されていないクッキーへのアクセスをリクエストできるようにします。
* `allow-top-navigation`: リソースが最上位の閲覧コンテキスト（`_top` という名前のもの
 に移動できるようにします。
* `allow-top-navigation-by-user-activation`: リソースが最上位の閲覧コンテキストに移動できるようにしますが、ユーザーの操作によって開始されたものに限ります。
* `allow-top-navigation-to-custom-protocols`: ブラウザーに組み込まれている、またはウェブサイトによって登録された `http` 以外のプロトコルへのナビゲーションを可能にします。この機能は `allow-popups` や `allow-top-navigation` キーワードでも有効になります。

**メモ:**

* 埋め込まれた文書のオリジンが埋め込み先のページと同じである場合、 `allow-scripts` と `allow-same-origin` を同時に使用すると、埋め込まれた文書から `sandbox` 属性を削除することができるようになるため、**絶対に避けるべき**です。 `sandbox` 属性をまったく使用しないよりも安全ではなくなります。
* 攻撃者がサンドボックス化した `iframe` の外側にコンテンツを表示することができる場合、サンドボックス化は無意味です。例えば、閲覧者がフレームを新しいタブで開く場合などです。潜在的なダメージを抑えるため、そうしたコンテンツは*別のオリジン*から提供するようにもしてください。

`src`

埋め込むページの URL です。同一オリジンポリシーに従う空白ページを埋め込む場合は、 `about:blank` の値を使用してください。また、プログラムから `<iframe>` の src 属性を削除すると (例えば `Element.removeAttribute()` などで)、 Firefox (バージョン 65 以降)、 Chromium ベースのブラウザー、 Safari/iOS では `about:blank` が読み込まれます。

`srcdoc`

埋め込むインライン HTML で、 `src` 属性を上書きします。ブラウザーが `srcdoc` 属性に対応していない場合は、 `src` 属性の URL で代替されます。

`width`

フレームの幅を CSS ピクセル数で示します。既定値は `300` です。

### 非推奨の属性

以下の属性は非推奨であり、すべてのユーザーエージェントが対応しているとは限りません。新しいコンテンツでは使用せず、既存のコンテンツから削除するようにしましょう。

`align`
非推奨

フレームを含むコンテキストに対する、フレームの整列方法を指定します。

`frameborder`
非推奨

値が `1` (既定) ならば、このフレームの周りに境界線を描きます。値が `0` ならば、このフレームの周りの境界線を削除しますが、代わりに CSS の `border` プロパティを使用して `<iframe>` の境界線を制御してください。

`longdesc`
非推奨

フレームの内容についての長い説明の URL です。誤用が広がっているため、非視覚ブラウザーでは有用ではありません。

`marginheight`
非推奨

フレームの内容と上下の境界との間における、ピクセル単位の余白の量です。

`marginwidth`
非推奨

フレームの内容と左右の境界との間における、ピクセル単位の余白の量です。

`scrolling`
非推奨

ブラウザーがフレームにスクロールバーを表示することを示します。

* `auto`: フレームの内容が、フレームの寸法よりも大きい場合のみ。
* `yes`: 常にスクロールバーを表示する。
* `no`: スクロールバーを一切表示しない。

スクリプト操作
-------

インラインフレームは、 `<frame>` 要素のように `window.frames` 擬似配列に入ります。

DOM の `HTMLIFrameElement` オブジェクトでは、スクリプトはフレーム化されたリソースの `window` オブジェクトに `contentWindow` プロパティを使ってアクセスすることができます。 `contentDocument` プロパティは `iframe` の内側の `document` 要素を参照します (`contentWindow.document` と等価です)。

スクリプトは、フレームの内側からは `window.parent` で親ウィンドウを参照できます。

フレームの内容にアクセスするスクリプトは、同一オリジンポリシーに従います。別なオリジンから読み込まれたスクリプトは、フレーム内のスクリプトがフレームの親にアクセスする場合を含め、他の `window` オブジェクトのほとんどのプロパティにアクセスできません。オリジンをまたいだやりとりは `Window.postMessage()` を使用して実現できます。

位置指定と表示倍率
---------

置換要素なので、 `<iframe>` 要素のボックス内における埋め込み文書の位置、配置、表示倍率は、 `object-position` および `object-fit` プロパティで設定することができます。

例
-

### シンプルな <iframe>

この例では、https://example.org のページを `<iframe>` で埋め込みます。

#### HTML

```html
<iframe
 src="https://example.org"
 title="iframe Example 1"
 width="400"
 height="300">
</iframe>
```

#### 結果

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

読み上げソフトのような支援技術を利用して操作している人は、 `<iframe>` 上の `title` 属性を使用して内容をラベル付けします。 title の値で埋め込みコンテンツを正確に説明してください。

```html
<iframe
 title="Wikipedia page for Avocados"
 src="https://en.wikipedia.org/wiki/Avocado"></iframe>
```

この title がないと、埋め込みコンテンツが何であるかを特定するために `<iframe>` の内容に移動しなければならなります。このコンテキストの移動は、特に複数の `<iframe>` が存在するページや、動画や音楽などの対話型コンテンツが埋め込まれているページでは、混乱を招き、時間のかかる作業になる可能性があります。

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* プライバシー、アクセス制限、情報セキュリティ


<pre>: 整形済みテキスト要素 - HTML: ハイパーテキストマークアップ言語

<pre>: 整形済みテキスト要素
=================

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

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

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

属性
--

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

`cols`
Non-standard

非推奨

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

`width`
非推奨

Non-standard

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

`wrap`
Non-standard

非推奨

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

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

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

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

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

### 例

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

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

### 基本的な例

#### HTML

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

#### 結果

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

#### HTML

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

if (i < 10 && i > 0)
  return "1 桁の数値"
</pre>
```

#### 結果

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

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