recursal/MDN huggingface dataset:
<article>: 記事コンテンツ要素
====================

**`<article>`** は HTML の要素で、文書、ページ、アプリケーション、サイトなどの中で自己完結しており、（集合したものの中で）個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事、商品カード、ユーザーが投稿したコメント、対話型のウィジェットやガジェット、その他の独立したコンテンツの項目が含まれます。

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

ある文書に複数の記事を含めることができます。たとえば、読者がスクロールするたびに各記事のテキストを次々と表示するブログでは、各記事は `<article>` 要素に含まれ、おそらくその中に 1 つ以上の `<section>` があります。

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

属性
--

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

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

* それぞれの `<article>` は、子要素として見出し（`<h1>` - `<h6>` 要素）を含むなどの方法で識別できるようにするべきです。
* `<article>` 要素を入れ子にした場合、内側の要素は外側の要素に関する記事を表します。例えばブログ投稿へのコメントは、ブログ投稿を表す `<article>` 内へ入れ子にした `<article>` 要素にできます。
* `<article>` 要素の著者情報は `<address>` 要素で提供できますが、入れ子にされた `<article>` 要素には適用されません。
* `<article>` 要素の発行日時は、 `<time>` 要素の `datetime` 属性で示すことができます。
例
-

### HTML


```html
<article class="film\_review">
  <h2>Jurassic Park</h2>
  <section class="main\_review">
    <h3>Review</h3>
    <p>Dinos were great!</p>
  </section>
  <section class="user\_reviews">
    <h3>User reviews</h3>
    <article class="user\_review">
      <h4>Too scary!</h4>
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user\_review">
      <h4>Love the dinos!</h4>
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>
```

### 結果

仕様書
---

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

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

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

関連情報
----

* 他のセクション関連要素: `<body>`, `<nav>`, `<section>`, `<aside>`, h1, h2, h3, h4, h5, h6, `<hgroup>`, `<header>`, `<footer>`, `<address>`
* HTML のセクションとアウトラインの使用
<style>: スタイル情報要素
=================

**`<style>`** は HTML の要素で、文書あるいは文書の一部分のスタイル情報を含みます。 `<style>` 要素を含んでいる文書のコンテンツに適用される CSS を含みます。

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

`<style>` 要素は文書の `<head>` 要素の中に入れる必要があります。一般に、スタイルを外部スタイルシートに入れて `<link>` 要素を使用することをより推奨します。

文書に複数の `<style>` および `<link>` が含まれている場合、これらは含まれている文書の DOM 上の順序で適用されます。 — 予期しないカスケード問題を防ぐために、含まれている順序が正しいことを確認してください。

`<link>` 要素と同じ方法で、 `<style>` 要素に `media` 属性を付けてメディアクエリーを含めると、ビューポートの幅などのメディア特性に依存して内部スタイルシートを選択的に適用することができます。

属性
--

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

`media`

この属性はスタイルを適用するメディアを定義します。値はメディアクエリーであり、省略した場合の既定値は `all` です。

`nonce`

style-src コンテンツセキュリティポリシー内のインラインスクリプトをホワイトリストに入れるために使われる暗号ノンス（ワンタイム番号）です。サーバーはポリシーを送信するたびに一意のノンス値を生成する必要があります。それ以外の方法でリソースのポリシーのバイパスとして推測できないノンスを提供することが重要です。

`title`

この属性は代替スタイルシートのセットを指定します。

`blocking` 
Experimental

この属性は、クリティカルなサブリソースの取得時に、特定の処理をブロックすべきであることを明示的に示します。`@import` でインポートされたスタイルシートは、ふつうクリティカルなサブリソースと見なされますが、一方で `background-image` やフォントはそうとはみなされません。

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

### 非推奨の属性

`type` 
非推奨

この属性は指定すべきではありません。指定した場合、許可される値は空文字列か `text/css` と大文字と小文字を区別せずに一致するものだけです。

例
-

### 単純なスタイルシート

以下の例では、文書にとても単純なスタイルシートを適用します。


```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test page</title>
    <style>
 p {
 color: red;
 }
 </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
```


#### 結果

### 複数の style 要素

この例には、2 つの `<style>` 要素が含まれています。 — 競合する宣言は、詳細度が同じであれば、後の `<style>` 要素が優先されることに注意してください。


```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test page</title>
    <style>
 p {
 color: white;
 background-color: blue;
 padding: 5px;
 border: 1px solid black;
 }
 </style>
    <style>
 p {
 color: blue;
 background-color: yellow;
 }
 </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
```


#### 結果

### メディアクエリーが含まれるもの

この例では一つ前に作ったものに対して、2 番目の `<style>` 要素に `media` 属性を設定してあるので、ビューポートが 500px 未満の場合のみ適用されるようにします。


```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test page</title>
    <style>
 p {
 color: white;
 background-color: blue;
 padding: 5px;
 border: 1px solid black;
 }
 </style>
    <style media="all and (max-width: 500px)">
 p {
 color: blue;
 background-color: yellow;
 }
 </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
```


#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | メタデータコンテンツ、 `scoped` 属性が提供された場合:
 フローコンテンツ |
| 許可されている内容 | `type` 属性に合致するテキストコンテンツ、すなわち
 `text/css`。
  |
| タグの省略 | どちらのタグも省略できません。 |
| 許可されている親要素 | メタデータコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | 許可されている `role` なし |
| DOM インターフェイス | `HTMLStyleElement` |

仕様書
---

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

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

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

関連情報
----

* 文書に外部スタイルシートを適用することができる `<link>` 要素
* 代替スタイルシート
<noframes>: フレームフォールバック要素
=========================

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

**`<noframes>`** は HTML の要素で、 `<frame>` 要素に対応していない（または対応を無効化した）ブラウザーのためのコンテンツを提供します。よく使われるほとんどのブラウザーがフレームに対応していますが、一部のモバイルブラウザーやテキストモードブラウザーなどの例外もあります。

`<noframes>` の中では HTML 文書の body 要素内で利用できる HTML 要素が使用できますが、フレームを使用するための `<frameset>` 要素および `<frame>` 要素は意味がないので例外です。

`<noframes>` は、ユーザーのブラウザーがフレームに対応していないことを説明するメッセージを表示するために利用することができますが、できればフレームを使わなくても同じ（または同等の）機能を提供するための別なフォームを表現するために使用するべきです。

**メモ:** `<frame>` 要素および `<frameset>` 要素が廃止されたため、この要素も廃止されており使用するべきではありません。フレームがどうしても必要であれば、 `<iframe>` 要素を用いて表現するべきです。

属性
--

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

例
-

この例には、 2 つのフレームを持つフレームセットがあります。加えて、 `<noframes>` を使用してユーザーエージェントがフレームに対応していない場合には説明メッセージを表示します。


```html
<!doctype html>
<html lang="en-US">
  <head>
    <!-- Document metadata goes here -->
  </head>
  <frameset rows="45%, 55%">
    <frame src="https://developer.mozilla.org/en/HTML/Element/frameset" />
    <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
    <noframes>
      <p>
        It seems your browser does not support frames or is configured to not
        allow them.
      </p>
    </noframes>
  </frameset>
</html>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # noframes |

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

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

関連情報
----

* `<frameset>`
* `<frame>`
<frameset>
==========

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

**`<frameset>`** は HTML の要素で、`<frame>` 要素を保持するために使用します。

**メモ:** `<iframe>` の使用に置き換わったためフレームの使用は推奨されなくなったので、現在のウェブサイトではこの要素はほとんど使用しません。

属性
--

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

`cols` 
非推奨

この属性は、フレームセット内の水平方向の領域の数と寸法を指定します。

`rows` 
非推奨

この属性は、フレームセット内の垂直方向の領域の数と寸法を指定します。

例
-

### フレームセット文書

フレームセット文書では、`<body>` 要素の代わりに `<frameset>` 要素があります。`<frame>` 要素は `<frameset>` の中に配置されます。


```html
<!doctype html>
<html lang="en-US">
  <head>
    <!-- Document metadata goes here -->
  </head>
  <frameset cols="50%, 50%">
    <frame src="https://developer.mozilla.org/en/HTML/Element/iframe" />
    <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
  </frameset>
</html>
```


文書の `<body>` 内に別の HTML ページを埋め込みたい場合は、`<iframe>` 要素を使用してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # frameset |

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

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

関連情報
----

* `<frame>`
* `<iframe>`
<i>: 慣用テキスト要素
=============

**`<i>`** は HTML の要素で、何らかの理由で他のテキストと区別されるテキストの範囲を表します。例えば、慣用句、技術用語、分類学上の呼称、などです。英文においてはよくイタリック体で表現されてきたものであり、それがこの要素の `<i>` という名前の元になっています。

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

属性
--

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

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

* `<i>` 要素は、読みやすくする目的で、文字列を通常の文脈から区別するために使用します。これは、この範囲の文字列が周囲の文字列とは意味論的に異なるということです。`<i>` 要素の用途の中には、次のような様々な品質やモードのテキストを表す区間があります。
    + 音声または語調が変わるところ
    + 分類学上の表記（"*Homo sapiens*" のような属や種など）
    + 他言語の慣用語（"*et cetera*"など）。言語を識別するには `lang` 属性を指定する必要があります。
    + 専門用語
    + 音訳
    + 感想（「彼女は不思議に思った、*ところでこの作家は何を話しているのだろう*」など）
    + 西洋の書字体系における船名または船舶名（「彼らは配属された船である *Empress of the Galaxy* をドックで探した」など。）
* 以前のバージョンの HTML 仕様では、 `<i>` 要素は文字列をイタリック体で表示するために使用する、単なる表現用の要素でした。これは `<b>` 要素が文字列の太字表示に使用されたことと同様です。これらのタグに印字表現ではない意味が定義されたため、それは正しくなくなりました。ブラウザーは現在でも一般的に `<i>` の中身を斜体で表示するでしょうが、この要素の定義としては、そうすることは要件ではなくなりました。テキストをイタリック体で表示するには、 CSS の `font-style` プロパティを使用してください。
* この要素は、他の要素でより適切にマークアップされない場合にのみ使用してください。
    + 強調を表すには `<em>` 要素を使用してください。
    + 重要性を表すには `<strong>` 要素を使用してください。
    + 関連性を表すには `<mark>` 要素を使用してください。
    + 書籍、演劇、音楽などの作品名を表すには `<cite>` 要素を使用してください。
    + 用語の定義のインスタンスを表すには `<dfn>` 要素を使用してください。
例
-

この例では、 `<i>` 要素を他の言語の文字列を示すために使用することを示します。


```html
<p>
  The Latin phrase <i lang="la">Veni, vidi, vici</i> is often mentioned in
  music, art, and literature.
</p>
```

### 結果

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* `<em>`
* その他のイタリック体にする要素: `<var>`, `<dfn>`, `<cite>`, `<address>`
<header>
========

**`<header>`** は HTML の要素で、導入的なコンテンツ、ふつうは導入部やナビゲーション補助のグループを表します。見出し要素だけでなく、ロゴ、検索フォーム、著者名、その他の要素を含むこともできます。

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

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

`<header>` 要素は、区分コンテンツの中に含まれていない限り、ウェブサイト全体の `banner` ランドマークロールと同じ意味を持ちます。その場合、`<header>` 要素はランドマークではありません。

`<header>` 要素はグローバルなサイトヘッダーを定義することができ、アクセシビリティツリーでは `banner` として記述されます。通常、ロゴ、会社名、検索機能、そして場合によってはグローバルナビゲーションやスローガンを含みます。一般的にはページの上部に配置されます。

それ以外の場合は、アクセシビリティツリーの `section` となり、通常は周囲のセクションの見出し（`h1` - `h6` 要素）とオプションで小見出しを格納しますが、これは必須では**ありません**。

### 歴史的な使用法

`<header>` 要素は、もともと HTML の初期に見出しのために存在していました。これは the very first website に見られます。ある時点で見出しは `<h1>` ～ `<h6>` となり、`<header>` が自由に別なロールを担うことができるようになりました。

属性
--

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

例
-

### ページのヘッダー


```html
<header>
  <h1>Main Page Title</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>
```


#### 結果

### 記事のヘッダー


```html
<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>
```


#### 結果

アクセシビリティ
--------

`<header>` 要素が `banner` ランドマークを定義するのは、そのコンテキストが `<body>` 要素のときです。HTML の header 要素は、`<article>`、`<aside>`、`<nav>`、`<section>` 要素の子孫である場合は banner ランドマークとみなされません。

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ,
 知覚可能コンテンツ |
| 許可されている内容 | フローコンテンツ。但し、子孫に他の `<header>` や
 `<footer>` がないこと。
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素。ただし、`<address>`、`<footer>`、他の
 `<header>`
 要素の子孫になることはできません。
  |
| 暗黙の ARIA ロール | banner,
 または
 `article`, `aside`, `main`, `nav`,
 `section`
 の各要素、または
 `role=article`,
 `complementary`,
 `main`,
 `navigation`,
 `region`
 の要素の子孫である場合は対応するロールなし |
| 許可されている ARIA ロール | `group`, `presentation`,
 `none` (en-US) |
| DOM インターフェイス | `HTMLElement` |

仕様書
---

| Specification |
| --- |
| HTML Standard # the-header-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、`<footer>`、`<section>`、`<address>`
<nobr>: 無改行テキスト要素
=================

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

**`<nobr>`** は HTML の要素で、その内包する文字列の自動改行を無効化します。行内に収まらない文字列は、領域からはみ出てレンダリングされるか、スクロールバーを伴って表示されます。

**警告:** この要素は広く対応されていますが、この要素は標準の要素であったことは**ない**ため、使用するべきではありません。代わりに、 CSS プロパティの `white-space` を次のように使用してください。


```html
<span style="white-space: nowrap;">Long line with no breaks</span>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # nobr |

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

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

関連情報
----

* `white-space`
* `overflow`
<small>: 附随コメント要素
=================

**`<small>`** は HTML の要素で、スタイルの表現とは独立して、著作権表示や法的表記のような、注釈や小さく表示される文を表します。既定では、 `small` から `x-small` のように、一段階小さいフォントでテキストが表示されます。

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

属性
--

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

例
-

### 基本的な使用


```html
<p>
  これは最初の文です。
  <small>この文は小さい文字で表記されています。</small>
</p>
```


#### 結果

### CSS による代替


```html
<p>
  これは最初の文です。
  <span style="font-size:0.8em">この文は小さい文字で表記されています。</span>
</p>
```


#### 結果

注
-

`<small>` 要素は `<b>` 要素や `<i>` 要素と同様に、構造と表現の分離の原則に反しますが、これら 3 つの要素は HTML で有効です。作者は `<small>` を使用するか CSS を使用するかを決める際に最良の判断を行うよう求められます。

技術的概要
-----

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

仕様書
---

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

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

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

関連情報
----

* `<b>`
* `<sub>` と `<sup>`
* `<font>`
* `<style>`
* HTML 4.01 仕様書: Font Styles
<datalist>: HTML データリスト要素
=========================

**`<datalist>`** は HTML の要素で、この要素には `<option>` 要素の集合が含まれ、他のコントロール内で選択できる許容または推奨オプションを表します。

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

`<datalist>` 要素をコントロールに結びつけるには、`id` 属性で固有の識別子を与え、同じ識別子を値とした `list` 属性を `<input>` 要素に追加します。
 この動作は、特定の種類の `<input>` だけが対応しており、また、ブラウザーの種類によっても異なる場合があります。

**メモ:** `<option>` 要素は内部コンテンツとして、また `value` 属性と `label` 属性に値を格納することができます。ドロップダウンメニューでどちらが表示されるかはブラウザーに依存しますが、クリックされたときに制御フィールドに入力されるコンテンツは常に `value` 属性に由来します。

属性
--

この要素には、すべての要素が持つグローバル属性以外の属性はありません。

例
-

### テキスト型

text、search、url、tel、email、number の各型は、ユーザーがコントロールをクリックまたはダブルクリックすると、ドロップダウンメニューで表示されます。
 通常、コントロールの右側には、定義済みの値があることを示す矢印もあります。


```html
<label for="myBrowser">一覧からブラウザーを選択して下さい:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>
```

### 日付と時刻型

month、week、date、time、datetime-local の各型は、日付や時刻を便利に選択できるようなインターフェイスを表示することができます。
 あらかじめ定義された値をそこに示すことで、ユーザーはすばやく制御値を満たすことができます。

**メモ:** type に対応していない場合、単純なテキストフィールドを作成する `text` 型が代わりに使用されます。このフィールドは推奨値を正しく認識し、ドロップダウンメニューでユーザーに表示します。


```html
<input type="time" list="popularHours" />
<datalist id="popularHours">
  <option value="12:00"></option>
  <option value="13:00"></option>
  <option value="14:00"></option>
</datalist>
```

### 範囲型

range 型の推奨値は、ユーザーが簡単に選択できるように目盛りの羅列で示されます。


```html
<label for="tick">Tip amount:</label>
<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />
<datalist id="tickmarks">
  <option value="0"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
</datalist>
```

### 色型

color の種類は、あらかじめ定義された色をブラウザーが提供するインターフェイスで示すことができます。


```html
<label for="colors">色を選択して下さい（できれば赤系）:</label>
<input type="color" list="redColors" id="colors" />
<datalist id="redColors">
  <option value="#800000"></option>
  <option value="#8B0000"></option>
  <option value="#A52A2A"></option>
  <option value="#DC143C"></option>
</datalist>
```

### パスワード型

仕様書では `<datalist>` を password 型にリンクすることができることになっていますが、セキュリティ上の理由から、対応しているブラウザーはありません。


```html
<label for="pwd">パスワードを入力:</label>
<input type="password" list="randomPassword" id="pwd" />
<datalist id="randomPassword">
  <option value="5Mg[\_3DnkgSu@!q#"></option>
</datalist>
```

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ、記述コンテンツ |
| 許可されている内容 | 記述コンテンツ、または 0 個以上の `<option>` 要素のどちらか |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | 記述コンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール | listbox |
| 許可されている ARIA ロール | なし |
| DOM インターフェイス | `HTMLDataListElement` |

仕様書
---

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

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

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

関連情報
----

* `<input>` 要素、特に `list` 属性
* `<option>` 要素
<thead>: 表ヘッダー要素
================

**`<thead>`** は HTML の要素で、表の列の見出しを定義する行のセットを定義します。

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

属性
--

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

### 非推奨の属性

`align` 
非推奨

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

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

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

**警告:** この属性は最新の標準仕様で廃止された（対応していない）ため、使用しないでください。

* 値の配置を指定するには、CSS の `text-align` プロパティを使用してください。

`bgcolor` 
非推奨

この属性は、列の各セルの背景色を定義します。6 桁の 16 進による色または名前付きの色を受け付けます。アルファ透過には対応していません。

**メモ:** この属性は標準外であるため、使用しないでください。`thead` 要素はCSS の `background-color` プロパティを、適用可能な要素、たとえば `thead`, `<tr>`, `<td>`, `<th>` のいずれかの要素で使用してください。

`char` 
非推奨

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

**メモ:** この属性は最新の標準仕様で廃止された（そして対応していない）ため、使用しないでください。

`charoff` 
非推奨

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

**メモ:** この属性は最新の標準仕様で廃止された（対応していない）ため、使用しないでください。

`valign` 
非推奨

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

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

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

例
-

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

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | 0 個以上の `<tr>` 要素 |
| タグの省略 | 開始タグは必須。 `<thead>` 要素の直後に `<tbody>` 要素または `<tfoot>` 要素がある場合は終了タグを省略可能。 |
| 許可されている親要素 | `<table>` 要素。 `<thead>` は（暗黙的に定義されるものであっても） `<caption>` 要素や `<colgroup>` 要素の後方かつ `<tbody>`, `<tfoot>`, `<tr>` の各要素の前方に配置しなければなりません。 |
| 暗黙の ARIA ロール | `rowgroup` |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLTableSectionElement` |

仕様書
---

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

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

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

関連情報
----

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

**`<li>`** は HTML の要素で、リストの項目を表すために用いられます。この要素は、その項目が属する順序付きリスト (`<ol>`)、順序なしリスト (`<ul>`)、メニュー (`<menu>`) のいずれかの子要素として配置する必要があります。メニュー要素および順序なしリスト内においては、リストの項目は通常、行頭文字を伴って表示されます。順序付きリスト内では、数字や文字による連番のリストマーカーを伴って表示されます。

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

属性
--

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

`value`

これは整数値の属性で、`<ol>` 要素で定義されたリスト項目の序数値を示します。リストがローマ数字や文字で表示される場合であっても、この属性は数値のみが指定できます。続くリスト項目は、その番号から続いて採番されます。順序なしリスト (`<ul>`) やメニュー (`<menu>`) では **value** 属性は意味がありません。

`type` 
非推奨

Non-standard

文字の属性で、表示するリストマーカーの種類を指定します。

* `a`: 小文字
* `A`: 大文字
* `i`: 小文字のローマ数字
* `I`: 大文字のローマ数字
* `1`: 数字

もし親の `<ol>` 要素で使用されていた場合は、それよりも優先されます。

**メモ:** この属性は非推奨になっています。代わりに CSS の `list-style-type` プロパティを使用してください。

例
-

もっと詳細な例は、 `<ol>` と `<ul>` のページを参照してください。

### 番号付きリスト


```html
<ol>
  <li>最初のリスト項目</li>
  <li>二番目のリスト項目</li>
  <li>三番目のリスト項目</li>
</ol>
```


#### 結果

### カスタム値の付いた番号付きリスト


```html
<ol type="I">
  <li value="3">third item</li>
  <li>fourth item</li>
  <li>fifth item</li>
</ol>
```


#### 結果

### 順序なしリスト


```html
<ul>
  <li>最初のリスト項目</li>
  <li>二番目のリスト項目</li>
  <li>三番目のリスト項目</li>
</ul>
```


#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | なし |
| 許可されている内容 | フローコンテンツ |
| タグの省略 | 
 直後に別の `<li>`
 要素が続く場合、または他のリスト項目が続くことなく親要素が閉じられた場合は、終了タグが省略可能。
  |
| 許可されている親要素 | `<ul>`、`<ol>`、`<menu>`。すでに廃止されているが、`<dir>`
 の子要素としても配置可能であった。
  |
| 暗黙の ARIA ロール | `listitem`
 when child of an
 `ol`, `ul` or
 `menu` |
| 許可されている ARIA ロール | `menuitem` (en-US),
 `menuitemcheckbox` (en-US),
 `menuitemradio` (en-US), `option`,
 `none` (en-US), `presentation`,
 `radio`, `separator` (en-US),
 `tab`, `treeitem` (en-US) |
| DOM インターフェイス | `HTMLLIElement` |

仕様書
---

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

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

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

関連情報
----

* 他のリスト関連 HTML 要素: `<ul>`, `<ol>`, `<menu>` および廃止された `<dir>`
* `<li>` の整形に便利な CSS プロパティ:
    + 箇条書き記号の表示を選択するための `list-style`
    + 複雑な入れ子状リストを処理するのに使用できる CSS counters
    + リスト項目のインデントの調整に用いることができる `margin`
<div>: コンテンツ区分要素
================

**`<div>`** は HTML の要素で、フローコンテンツの汎用コンテナーです。 CSS を用いて何らかのスタイル付けがされる（例えば、スタイルが直接適用されたり、親要素にフレックスボックスなどの何らかのレイアウトモデルが適用されるなど）までは、コンテンツやレイアウトには影響を与えません。

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

「純粋」なコンテナーとして、`<div>` 要素は本質的には何も表しません。その代わり、 `class` や `id` を使用してスタイル付けしやすくしたり、文書内で異なる言語で書かれた部分を（`lang` 属性を使用して）示したりするために使用します。

属性
--

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

**メモ:** `align` 属性は廃止されたので、使用しないでください。代わりに、 CSS のプロパティを使用したり、 CSS グリッドや CSS フレックスボックスを使用して `<div>` 要素をページの中央に配置したりしてください。

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

* `<div>` 要素は、他に適切な意味的要素（`<article>` や `<nav>` など）がない場合に限り使用してください。
アクセシビリティの考慮
-----------

`<div>` 要素は `generic` の暗黙のロールを持っており、まったくない訳ではありません。これは、特定の役割を持つ直接の子孫要素が適切に機能することを期待する、特定の ARIA の組み合わせ宣言に影響を与える可能性があります。

例
-

### 単純な例


```html
<div>
  <p>
    Any kind of content here. Such as &lt;p&gt;, &lt;table&gt;. You name it!
  </p>
</div>
```


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

### スタイル付けを行う例

この例では CSS を用いて `<div>` にスタイルを適用することで、影付きのボックスを作成します。なお、 `<div>` 要素に `class` 属性を使用して、 `"shadowbox"` という名前のスタイルを要素に適用します。

#### HTML


```html
<div class="shadowbox">
  <p>Here's a very interesting note displayed in a lovely shadowed box.</p>
</div>
```


#### CSS


```css
.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
```


#### 結果

技術的概要
-----

|  |  |
| --- | --- |
| コンテンツカテゴリー | フローコンテンツ, 知覚可能コンテンツ |
| 許可されている内容 | フローコンテンツ。または (WHATWG HTML において) 親要素が
 `<dl>` である場合: 1つ以上の
 `<dt>` 要素と、それに続く1つ以上の
 `<dd>` 要素、さらに任意で
 `<script>` 要素や
 `<template>` 要素が混在。
  |
| タグの省略 | 不可。開始と終了タグの両方が必要。 |
| 許可されている親要素 | フローコンテンツ
 を受け入れるすべての要素。または (WHATWG
 HTML において) `<dl>` 要素。
  |
| 暗黙の ARIA ロール | 対応するロールなし |
| 許可されている ARIA ロール | すべて |
| DOM インターフェイス | `HTMLDivElement` |

仕様書
---

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

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

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

関連情報
----

* 意味論的な区分要素: `<section>`, `<article>`, `<nav>`, `<header>`, `<footer>`
* 記述コンテンツのスタイル付け用の `<span>` 要素