ビューポートのメタタグ - HTML: ハイパーテキストマークアップ言語

ビューポートのメタタグ
===========

この記事では、 `<meta>` "viewport" タグを使用して、ビューポートのサイズと形状を制御する方法について記述しています。

背景
--

ブラウザーのビューポートは、ウェブコンテンツを見ることができるウィンドウの領域です。これはレンダリングされたページと同じサイズではないことが多く、その場合、ブラウザーはユーザーがスクロールしてすべてのコンテンツにアクセスできるよう、スクロールバーを提供します。

モバイル端末やその他の狭い画面では、通常画面よりも広い仮想ウィンドウまたはビューポートでページをレンダリングし、レンダリング結果を縮小して、すべてを一度に見ることができるようにするものがあります。ユーザーは、パンやズーム操作によって、ページのさまざまな領域を見ることができます。例えば、モバイル画面の幅が 640px の場合、ページは 980px の仮想ビューポートでレンダリングされ、 640px の空間に収まるように縮小されるかもしれません。

これは、すべてのページがモバイル用に最適化されているわけではなく、小さなビューポート幅でレンダリングすると壊れてしまう（あるいは少なくとも見た目が悪くなる）ために行われます。この仮想ビューポートは、モバイル端末に最適化されていないサイト全般を、画面が狭い端末でも見やすくするための方法です。

しかし、この仕組みは、メディアクエリーを使用して狭い画面に最適化されているページにはあまり向いていません。例えば、仮想ビューポートが 980px の場合、640px や 480px 以下で起動するメディアクエリーは絶対に使用せず、こうしたレスポンシブデザイン手法の有効性を限定してしまうのです。ビューポートのメタタグは、このような画面の内側が狭い端末における仮想ビューポートの問題を緩和するものです。

ビューポートの基本
---------

一般的なモバイルに最適化されたサイトには、以下のようなものがあります。

```html
<meta name="viewport" content="width=device-width, initial-scale=1" />
```

すべての端末が同じ幅というわけではありません。画面のサイズや方向が大きく異なる場合でも、ページがうまく動作するようにする必要があります。

`<meta>` "viewport" タグの基本的なプロパティは以下の通りです。

`width`

ビューポートの大きさを制御します。これは `width=600` のような具体的なピクセル数か、特別な値 `device-width` で、 100vw、つまりビューポート幅の 100% となるように設定することができます。最小値は `1` です。最大値は `10000` です。負の値は無視されます。

`height`

ビューポートの大きさを制御します。これは `height=400` のような具体的なピクセル数か、特別な値 `device-height` で、 100vh、つまりビューポートの高さの 100% となるように設定することができます。最小値は `1` です。最大値は `10000` です。負の値は無視されます。

`initial-scale`

ページを最初に読み込んだときの表示倍率を制御します。最小値は `0.1` です。最大値は `10` です。既定値は `1` です。負の値は無視されます。

`minimum-scale`

ページ上でどの程度ズームアウトを許可するかを制御します。最小値は `0.1` です。最大値は `10` です。既定値は `0.1` です。負の値は無視されます。

`maximum-scale`

ページで許可される拡大率を制御します。 3 より小さい値を設定するとアクセシビリティに違反します。最小値は `0.1` です。最大値は `10` です。既定値は `10` です。負の値は無視されます。

`user-scalable`

ページ上でズームインとズームアウトのアクションが許可されるかどうかを制御する。有効な値は `0`, `1`, `yes`, `no` の何れかです。既定値は `1` で、これは `yes` と同じです。値を `0` （つまり `no` と同じ）に設定すると、ウェブコンテンツアクセシビリティガイドライン (WCAG) に違反することになります。

**警告:** `user-scalable=no` の使用は、弱視などの視覚的な障碍を持つユーザーに対して、アクセシビリティの問題を発生させる可能性があります。 WCAG では少なくとも 2 倍まで拡大するように要求していますが、 5 倍の拡大を可能にすることが最善の習慣とされています。

画面の密度
-----

画面解像度が上がり、人間の目では個々のピクセルが識別できないサイズになりました。例えば、スマートフォンの画面は、小さな画面でも1920〜1080ピクセル（〜400dpi）以上の解像度を持っている場合がほとんどです。このため、多くのブラウザーは、 CSS 「ピクセル 」 1 つに対して複数のハードウェアピクセルを対応させることで、より小さな物理サイズでページを表示することができます。当初は、タッチ操作に最適化された多くのウェブサイトで、ユーザビリティと読み取り可能なサイズの問題が発生しました。

高 dpi の画面においては、`initial-scale=1` を指定したページは、ブラウザーに効果的に拡大表示されることになります。テキストは滑らかで鮮明に表示されますが、ビットマップ画像は画面の内側まで解像度を生かしきれないかもしれません。こうした画面においては、より鮮明な画像を実現するために、ウェブ開発者は画像やレイアウト全体を最終的なサイズよりも高い倍率で設計し、 CSS やビューポートプロパティを使用して縮小することが求められるかもしれません。

既定のピクセル比は、ディスプレイの密度に依存します。密度が 200dpi 未満のディスプレイでは、比率は 1.0 です。密度が 200 〜 300dpi のディスプレイでは、比率は 1.5 です。 300dpi 以上のディスプレイの場合、比率は整数の floor(*density*/150dpi) となります。既定の比率は、ビューポートの縮小率が 1 に等しい場合にのみ適用されることに注意してください。それ以外の場合は、 CSS ピクセルとデバイスピクセルの関係は、現在のズームレベルに依存します。

ビューポートの幅と画面の幅
-------------

サイトでは、ビューポートを特定のサイズに設定することができます。例えば、`"width=320, initial-scale=1"` という定義は、縦長モードの小さな携帯電話のディスプレイに正確にフィットするように使用することができます。これは、ブラウザーがより大きなサイズでページを表示しない場合に問題が発生する可能性があります。これを修正するために、ブラウザーは要求された縮尺で画面を埋めるために必要であればビューポートの幅を拡大させます。これは、特に大画面の端末で使用する場合に有用です。

初期または最大の縮尺を設定したページでは、 `width` プロパティが実際には最小のビューポート幅に対応することを意味しています。例えば、レイアウトに少なくとも 500 ピクセルの幅が必要な場合、以下のようなマークアップを使用することができます。画面幅が 500 ピクセル以上ある場合、ブラウザーは画面に合わせるために（ズームインするのではなく）ビューポートを拡大します。

```html
<meta name="viewport" content="width=500, initial-scale=1" />
```

他にも利用できる属性として `minimum-scale`, `maximum-scale`, `user-scalable` があります。これらのプロパティは、初期の拡大縮小や横幅に影響を与え、また、ズームレベルの変更を制限します。

モバイル端末とタブレット端末の一般的なビューポートサイズ
----------------------------

どのモバイル端末とタブレット端末がどのようなビューポート幅を持っているかを知りたい場合は、ここにモバイル端末とタブレット端末のビューポートサイズの包括的なリストが掲載されています。ここでは、縦向きと横向きのビューポート幅、物理的な画面サイズ、オペレーティングシステム、デバイスのピクセル密度などの情報を提供しています。

仕様書
---

| Specification |
| --- |
| CSS Viewport Module Level 1 # viewport-meta |


HTML 要素リファレンス - HTML: ハイパーテキストマークアップ言語

HTML 要素リファレンス
=============

このページでは、すべての HTML 要素を一覧表示しています。これらはタグを使用して作成されます。

この一覧は、考えているものを見つけやすいように、機能別にグループ化しています。アルファベット順のすべての要素の一覧は、このページと同様に各要素ページのサイドバーにあります。

**メモ:** HTML 要素や属性の基礎について詳しくは、 HTML 入門の記事で要素の節をご覧ください。

メインルート
------

| 要素 | 説明 |
| --- | --- |
| `<html>` | HTML 文書のルート（最上位要素）を表すため、*ルート要素*とも呼ばれます。他のすべての要素は、この要素の子孫として配置しなければなりません。 |

文書メタデータ
-------

メタデータは、ページに関する情報のことです。これはソフトウェア (検索エンジン や ブラウザー など) が利用する、およびページの描画を支援するスタイル、スクリプト、データといった情報を含みます。スタイルやスクリプトのメタデータはページ内で定義するか、それらの情報を持つ別のファイルへのリンクとして定義します。

| 要素 | 説明 |
| --- | --- |
| `<base>` | 文書内におけるすべての相対 URL の基点となる URL を指定します。文書内に 1 つだけ置くことができます。 |
| `<head>` | 文書に関する機械可読な情報（メタデータ）、たとえばタイトル、スクリプト、スタイルシートなどを含みます。 |
| `<link>` | 現在の文書と外部リソースとの関係を指定します。この要素は CSS をリンクするために最もよく使用されますが、他にもサイトアイコン（「ファビコン」スタイルのアイコンやモバイル端末でのホーム画面やアプリのアイコンの両方）を設定するために使用されます。 |
| `<meta>` | メタデータを表します。これは、他のメタ関連要素 (`<base>`, `<link>`, `<script>`, `<style>`, `<title>`) で表すことができないものを表します。 |
| `<style>` | 文書あるいは文書の一部分のスタイル情報を含みます。 `<style>` 要素を含んでいる文書のコンテンツに適用される CSS を含みます。 |
| `<title>` | ブラウザーのタイトルバーやページのタブに表示される文書のタイトルを定義します。テキストのみを含めることができます。要素内のタグはすべて無視されます。 |

区分化ルート
------

| 要素 | 説明 |
| --- | --- |
| `<body>` | HTML 文書のコンテンツを示す要素です。文書中に 1 つだけ配置できます。 |

コンテンツ区分
-------

コンテンツ区分要素は、文書のコンテンツを論理的な断片に体系づけます。ページのコンテンツでヘッダーやフッターのナビゲーション、あるいはコンテンツのセクションを識別する見出しなどの、大まかなアウトラインを作成するために区分要素を使用します。

| 要素 | 説明 |
| --- | --- |
| `<address>` | これを含んでいる HTML が個人、団体、組織の連絡先を提供していることを示します。 |
| `<article>` | 文書、ページ、アプリケーション、サイトなどの中で自己完結しており、（集合したものの中で）個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事、商品カード、ユーザーが投稿したコメント、対話型のウィジェットやガジェット、その他の独立したコンテンツの項目が含まれます。 |
| `<aside>` | 文書のメインコンテンツと間接的な関係しか持っていない文書の部分を表現します。サイドバーやコールアウトボックスなどを表現するためによく使われます。 |
| `<footer>` | 直近の区分コンテンツまたは区分化ルート要素のフッターを表します。フッターには通常、そのセクションの著作者に関する情報、関連文書へのリンク、著作権情報等を含めます。 |
| `<header>` | 導入的なコンテンツ、ふつうは導入部やナビゲーション等のグループを表します。見出し要素だけでなく、ロゴ、検索フォーム、作者名、その他の要素を含むこともできます。 |
| `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` | セクションの見出しを 6 段階で表します。`<h1>` が最上位で、`<h6>` が最下位です。 |
| `<hgroup>` | 小見出し、代替タイトル、キャッチフレーズなどの副次的コンテンツとグループ化された見出しを表します。 |
| `<main>` | 文書の本体の主要な内容を表します。主要な内容とは、文書の中心的な主題、またはアプリケーションの中心的な機能に直接関連または拡張した内容の範囲のことです。 |
| `<nav>` | 現在の文書内の他の部分や他の文書へのナビゲーションリンクを提供するためのセクションを表します。ナビゲーションセクションの一般的な例としてメニュー、目次、索引などがあります。 |
| `<section>` | 文書の自立した一般的なセクション (区間) を表します。そのセクションを表現するより意味的に具体的な要素がない場合に使用します。少数の例外を除いて、セクションには見出しを置いてください。 |
| `<search>` | 検索または絞り込み処理を実行することに関連する一連のフォームコントロールまたは他のコンテンツを含む部分を表します。 |

テキストコンテンツ
---------

HTML テキストコンテンツ要素は、開始タグ `<body>` と終了タグ `</body>` の間にあるコンテンツでブロックやセクションを編成します。これらの要素はコンテンツの用途や構造を識別するものであり、アクセシビリティ や SEO のために重要です。

| 要素 | 説明 |
| --- | --- |
| `<blockquote>` | 内包するテキストが引用文であることを示します。通常、字下げを伴ってレンダリングされます。`cite` 属性により引用元の文書の URL を、 `<cite>` 要素により引用元の文書のタイトルなどを明示可能です。 |
| `<dd>` | 説明リスト要素 (`<dl>`) 内で、その前の用語 (`<dt>`) の説明、定義、値などを示します。 |
| `<div>` | フローコンテンツの汎用コンテナーです。 CSS を用いて何らかのスタイル付け（例えば、スタイルが直接適用されたり、親要素にフレックスボックスなどの何らかのレイアウトモデルが適用されるなど）がされない限り、コンテンツやレイアウトには影響を与えません。 |
| `<dl>` | 説明リストを表します。この要素は、一連の用語（`<dt>` 要素を使用して指定）と説明（`<dd>` 要素によって提供）をリスト化したものです。一般的な使用例として、用語集の作成やメタデータ（キーと値のペアのリスト）の表示が挙げられます。 |
| `<dt>` | 説明または定義リストの中で用語を表す部分であり、 `<dl>` の子要素としてのみ用いることができます。普通は `<dd>` 要素が続きます。しかし、複数の `<dt>` 要素が続くと、複数の用語がすぐ後に続く `<dd>` 要素で定義されていることを表します。 |
| `<figcaption>` | 親の `<figure>` 要素内にあるその他のコンテンツを説明するキャプションや凡例を表します。 |
| `<figure>` | 自己完結型のコンテンツを表し、任意で `<figcaption>` 要素を使用して表されるキャプションを付けることができます。図、すなわちキャプションとその中身は一つの単位として参照されます。 |
| `<hr>` | 段落レベルの要素間において、テーマの意味的な区切りを表します。例えば、話の場面の切り替えや、節内での話題の転換などです。 |
| `<li>` | リストの項目を表すために用いられます。この要素は、その項目が属する順序付きリスト (`<ol>`)、順序なしリスト (`<ul>`)、メニュー (`<menu>`) のいずれかの子要素として配置する必要があります。メニュー要素および順序なしリスト内においては、リストの項目は通常、行頭文字伴って表示され、順序付きリスト内では、数字や文字による連番のリストマーカーを伴って表示されます。 |
| `<menu>` | `<ul>` とは異なる意味づけですが、ブラウザーでは `<ul>` と同じものとして扱われます（アクセシビリティツリーで公開されます）。（`<li>` 要素で表現される）項目の順不同リストを表します。 |
| `<ol>` | 項目の順序付きリストを表します。ふつうは番号付きのリストとして表示されます。 |
| `<p>` | テキストの段落を表します。視覚メディアにおいて、段落はふつう隣接するブロックと上下の空白や最初の行の字下げによって隔てられたテキストのブロックとして表現されますが、 HTML の段落は画像やフォーム欄などの関連するコンテンツを構造的にまとめることができます。 |
| `<pre>` | 整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して等幅フォントで表示されます。この要素内のホワイトスペース文字はそのまま表示します。 |
| `<ul>` | 項目の順序なしリストを表します。一般的に、行頭記号を伴うリストとして描画されます。 |

インラインテキスト意味付け
-------------

HTML インラインテキスト意味づけ要素は、単語、行、あるいは任意のテキスト範囲の意味、構造、スタイルを定義します。

| 要素 | 説明 |
| --- | --- |
| `<a>` | `href` 属性を用いて、ウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成します。 |
| `<abbr>` | 略語や頭字語を表します。 |
| `<b>` | 要素の内容に読み手の注意を惹きたい場合で、他の特別な重要性が与えられないものに使用します。これは以前は太字要素と呼ばれており、ほとんどのブラウザーでは文字列を太字で描画していました。しかし、 `<b>` を文字列の装飾に使うべきではありません。太字の文字列を作成するには、 CSS の `font-weight` プロパティを使用し、特別な重要性を持つテキストを示すには `<strong>` 要素を使用してください。 |
| `<bdi>` | ブラウザーの書字方向アルゴリズムにこのテキストが周囲のテキストから独立していると扱うよう指示します。これは特に、ウェブサイトがテキストを動的に挿入し、挿入されるテキストの書字方向が不明な場合に便利です。 |
| `<bdo>` | 現在のテキストの書字方向を上書きし、中のテキストが異なる書字方向で描画されるようにします。 |
| `<br>` | 文中に改行（キャリッジリターン）を生成します。詩や住所など、行の分割が重要な場合に有用です。 |
| `<cite>` | 引用された創作物の参照を表し、作品のタイトルを含む必要があります。参照は、引用メタデータに関する利用場面に合わせた慣習に応じて省略形が用いられることがあります。 |
| `<code>` | コンピューターコードの短い断片の文字列であると識別できるような外見のコンテンツを表示します。既定では、中の文字列がユーザーエージェントの既定の等幅フォントを使用して表示されます。 |
| `<data>` | 与えられたコンテンツの断片を機械可読な翻訳にリンクします。コンテンツが時刻または日付に関連するものであれば、time 要素を使用する必要があります。 |
| `<dfn>` | 定義句や文の文脈の中で定義している用語を示すために用いられます。 `<dfn>` の直近の祖先である `<p>` 要素、 `<dt>`/`<dd>` の組み合わせ、 `<section>` 要素が用語の定義とみなされます。 |
| `<em>` | 強調されたテキストを示します。`<em>` 要素は入れ子にすることができ、入れ子の段階に応じてより強い程度の強調を表すことができます。 |
| `<i>` | 何らかの理由で他のテキストと区別されるテキストの範囲を表します。例えば、慣用句、技術用語、分類学上の呼称、などです。英文においてはよくイタリック体で表現されてきたものであり、それがこの要素の `<i>` という名前の元になっています。 |
| `<kbd>` | キーボード、音声入力、その他の入力端末からのユーザーによる文字入力を表すインラインの文字列の区間を表します。慣習的に、ユーザーエージェントは既定で `<kbd>` 要素の中身を等幅フォントで表示しますが、 HTML 標準で規定されているものではありません。 |
| `<mark>` | 周囲の文脈の中でマークを付けた部分の関連性や重要性のために、参照や記述の目的で目立たせたり強調したりする文字列を表します。 |
| `<q>` | その内容がインラインの引用であることを表します。最近の多くのブラウザーでは、文字列を引用符で囲むように実装しています。この要素は、段落区切りをまたがない短い引用のためのものです。長文の引用には、 `<blockquote>` 要素を使用してください。 |
| `<rp>` | `<ruby>` 要素によるルビの表示に対応していないブラウザー向けの代替表示用括弧を提供するために使用します。`<rp>` 要素は、注釈の文字列を `<rt>` 要素を囲む開き括弧と閉じ括弧をそれぞれ囲む必要があります。 |
| `<rt>` | ルビによる注釈（振り仮名）のルビ文字列の部分を定義し、東アジアの組版において発音、翻訳、音写などの情報を提供するために使用します。 `<rt>` 要素は常に `<ruby>` 要素の中で使用されます。 |
| `<ruby>` | ベーステキストの上、下、隣に描画される小さな注釈で、よく東アジアの文字の発音を表すのに使われます。他の種類の注釈にも使われることがありますが、この使い方はあまり一般的ではありません。 |
| `<s>` | 取り消し線を引いた文字列を表示します。 `<s>` 要素はすでに適切または正確ではなくなった事柄を表現します。しかし、文書の修正を示す場合、 `<s>` 要素は適切ではありません。この場合は del と ins の方が適しているので、こちらを使用してください。 |
| `<samp>` | コンピュータープログラムからのサンプル出力を表すインライン文字列を含めるために使用されます。内容は普通、ブラウザーの既定の等幅フォント（Courier や Lucida Console など）を使用して表示されます。 |
| `<small>` | 表示上のスタイルとは関係なく、著作権表示や法的表記のような、注釈や小さく表示される文を表します。既定では、 `small` から `x-small` のように、一段階小さいフォントでテキストが表示されます。 |
| `<span>` | 記述コンテンツの汎用的なインラインコンテナーであり、何かを表すものではありません。スタイル付けのため（`class` または `id` 属性を使用して）、または `lang` のような属性値を共有したりするために要素をグループ化する用途で使用することができます。他に適切な意味的要素がない時にのみ使用してください。 `<span>` は `<div>` 要素ととても似ていますが、`<div>` がブロックレベル要素であるのに対し、 `<span>` はインラインレベル要素です。 |
| `<strong>` | 内容の重要性、重大性、または緊急性が高いテキストを表します。ブラウザーは一般的に太字で描画します。 |
| `<sub>` | 表記上の理由で下付き文字として表示するべきインライン文字列を指定します。下付き文字は普通、小さめのテキストを使用してベースラインよりも低く表示されます。 |
| `<sup>` | 表記上の理由で上付き文字として表示するべきインライン文字列を指定します。上付き文字は普通、小さめのテキストを使用して高いベースラインで表示されます。 |
| `<time>` | 特定の時の区間を表します。 `datetime` 属性を使用して、機械可読な形式の日付を記述することができ、検索エンジンの結果を改善したりリマインダーなどの独自機能に使用したりすることができます。 |
| `<u>` | 非言語的に注釈があることを示す方法で表示するインラインテキストの区間を示します。これは既定で単純な実線の下線として表示されますが、 CSS を使用して変更することもできます。 |
| `<var>` | 数式やプログラムコード内の変数の名前を表します。挙動はブラウザーに依存しますが、通常は現在のフォントのイタリック体を使って表示されます。 |
| `<wbr>` | 改行可能位置 — テキスト内でブラウザーが任意で改行してよい位置を表しますが、この改行規則は必要のない場合は改行を行いません。 |

画像とマルチメディア
----------

HTML は画像、音声、映像といった、さまざまなマルティメディアリソースに対応しています。

| 要素 | 説明 |
| --- | --- |
| `<area>` | イメージマップの中でクリック可能な領域をあらかじめ定義します。*イメージマップ*では、画像上の幾何学的な領域をハイパーテキストリンクと関連付けすることができます。 |
| `<audio>` | 文書内に音声コンテンツを埋め込むために使用します。この要素は、1 つまたは複数の音源を含むことができます。音源は `src` 属性または source 要素を使用して表し、ブラウザーがもっとも適切な音源を選択します。また、 `MediaStream` を使用してストリーミングメディアを指し示すこともできます。 |
| `<img>` | 文書に画像を埋め込みます。 |
| `<map>` | `<area>` 要素とともに、イメージマップ（クリック可能なリンク領域）を定義するために使用します。 |
| `<track>` | メディア要素 (audio および video) の子として使用します。この要素は自動的に処理される字幕など、時間指定されたテキストトラック（または時系列データ）を指定することができます。トラックは WebVTT 形式 (`.vtt` ファイル) を用います。 |
| `<video>` | 文書中に動画再生に対応するメディアプレイヤーを埋め込みます。 `<video>` を音声コンテンツのために使用することもできますが、audio 要素の方がユーザーにとって使い勝手が良いかもしれません。 |

埋め込みコンテンツ
---------

HTML は公式に対応しているマルチメディアコンテンツ以外のさまざまなコンテンツを、容易に対話できるとは限らないものであっても埋め込むことができます。

| 要素 | 説明 |
| --- | --- |
| `<embed>` | 外部のコンテンツを文書中の指定された場所に埋め込みます。コンテンツは外部アプリケーションや、対話型コンテンツの他の出所 (ブラウザーのプラグインなど) によって提供されます。 |
| `<iframe>` | 入れ子になった閲覧コンテキストを表現し、現在の HTML ページに他のページを埋め込むことができます。 |
| `<object>` | 画像、内部の閲覧コンテキスト、プラグインによって扱われるリソースなどのように扱われる外部リソースを表します。 |
| `<picture>` | 0 個以上の `<source>` 要素と一つの `<img>` 要素を含み、様々な画面や端末の条件に応じた画像を提供します。 |
| `<portal>` | 他の HTML ページを現在のページに埋め込み、新しいページへの移動がスムーズにできるようにします。 |
| `<source>` | picture 要素、audio 要素、video 要素に対し、複数のメディアリソースを指定します。この要素は空要素であり、つまり中身も閉じタグもありません。画像ファイル形式やメディアファイル形式の対応状況が様々であるブラウザーの幅広い互換性を確保するために、同じメディアコンテンツを複数のファイル形式で提供することはよくあることです。 |

SVG と MathML
------------

SVG と MathML のコンテンツを、 `<svg>` および `<math>` 要素を使用して直接 HTML 文書に埋め込むことができます。

| 要素 | 説明 |
| --- | --- |
| `<svg>` | 新しい座標系とビューポートを定義するコンテナーです。これは SVG 文書の最も外側の要素として使用されますが、SVG または HTML 文書の中に SVG フラグメントを埋め込むためにも使用できます。 |
| `<math>` | MathML における最上位の要素です。すべての有効な MathML のインスタンスを囲みます。加えて、 `<math>` 要素を入れ子状に配置してはなりませんが、中にその他の子要素をいくつでも持つことができます。 |

スクリプト
-----

動的なコンテンツやウェブアプリケーションを作成するために、 HTML ではスクリプト言語を使用できます。もっとも有名な言語は、JavaScript です。いくつかの要素がスクリプト機能をサポートします。

| 要素 | 説明 |
| --- | --- |
| `<canvas>` | Canvas スクリプティング API や WebGL API を使用して、グラフィックやアニメーションを描画することができるコンテナー要素です。 |
| `<noscript>` | このページ上のスクリプトの種類に対応していない場合や、スクリプトの実行がブラウザーで無効にされている場合に表示する HTML の部分を定義します。 |
| `<script>` | 実行できるコードやデータを埋め込むために使用します。ふつうは JavaScript のコードの埋め込みや参照に使用されます。 `<script>` 要素は WebGL の GLSL shader プログラミング言語、 JSON 等の他の言語にも使用することができます。 |

編集範囲の特定
-------

これらの要素は、テキストの特定の範囲が変更されたことを示します。

| 要素 | 説明 |
| --- | --- |
| `<del>` | 文書から削除された文字列の範囲を表します。これは例えば、「変更の追跡」や、ソースコードの差分情報を描画するときに使用することができます。 `<ins>` 要素は逆の目的に、文書に追加された文字列を示すために用いることができます。 |
| `<ins>` | 文書に追加されたテキストの範囲を表します。同様に、 `<del>` 要素を使用して文書から削除されたテキストの範囲を表すことができます。 |

表コンテンツ
------

以下の要素は、表形式のデータを作成および制御するために使用します。

| 要素 | 説明 |
| --- | --- |
| `<caption>` | 表のキャプション（またはタイトル）を指定します。 |
| `<col>` | 表内の列を定義して、すべての一般セルに共通の意味を定義するために使用します。この要素は通常、 `<colgroup>` 要素内にみられます。 |
| `<colgroup>` | 表内の列のグループを定義します。 |
| `<table>` | 表形式のデータ、つまり、行と列の組み合わせによるセルに含まれたデータによる二次元の表で表現される情報です。 |
| `<tbody>` | 表の一連の行 (`<tr>` 要素) を内包し、その部分が表 (`<table>`) の本体部分を構成することを表します。 |
| `<td>` | 表でデータを包含するセルを定義します。これはモデルに関与します。 |
| `<tfoot>` | 表の一連の列を総括する行のセットを定義します。 |
| `<th>` | 表のセルのグループ用の見出しであるセルを定義します。このグループの正確な性質は、`scope` 属性と `headers` 属性で定義します。 |
| `<thead>` | 表の列の見出しを定義する行のセットを定義します。 |
| `<tr>` | 表内でセルの行を定義します。行のセルには `<td>` （データセル）および `<th>` （見出しセル）要素をを混在させることができます。 |

フォーム
----

HTML では、ユーザーがデータを記入してウェブサイトやアプリケーションに送信することを可能にするフォームを作成するために、組み合わせて使用する要素をいくつか提供します。フォームに関する多くの情報を、 HTML フォームガイドに掲載しています。

| 要素 | 説明 |
| --- | --- |
| `<button>` | ユーザーがマウス、キーボード、指、音声コマンド、または他にも支援技術を使って起動するインタラクティブ要素です。アクティブになると、フォームを送信したり、ダイアログを開いたりするなどのアクションを実行するようになります。 |
| `<datalist>` | 他のコントロールで利用可能な値を表現する一連の `<option>` 要素を含みます。 |
| `<fieldset>` | ウェブフォーム内のラベル (`<label>`) などのようにいくつかのコントロールをグループ化するために使用します。 |
| `<form>` | ウェブサーバーに情報を送信するための対話型コントロールを含む文書の区間を表します。 |
| `<input>` | ユーザーからデータを受け取るための、ウェブベースのフォーム用の操作可能なコントロールを作成するために使用します。端末とユーザーエージェントによりますが、広範に渡る種類のデータ入力やコントロールウィジェットが利用できます。 `<input>` 要素は入力型と属性の組み合わせの数が非常に多いため、 HTML の中で最も強力かつ最も複雑な要素の一つです。 |
| `<label>` | ユーザーインターフェイスの項目のキャプションを表します。 |
| `<legend>` | その親要素である `<fieldset>` の内容のキャプションを表します。 |
| `<meter>` | 既知の範囲内のスカラー値、または小数値を表します。 |
| `<optgroup>` | `<select>` 要素内の選択肢 (`<option>`) のグループを作成します。 |
| `<option>` | `<select>` 要素、`<optgroup>` 要素、`<datalist>` 要素内で項目を定義するために使われます。したがって、`<option>` は HTML 文書でポップアップメニューのメニュー項目や、その他の項目の一覧を表すことができます。 |
| `<output>` | サイトやアプリが計算結果やユーザー操作の結果を挿入することができるコンテナー要素です。 |
| `<progress>` | タスクの進捗状況を表示します。プログレスバーとしてよく表示されます。 |
| `<select>` | 選択式のメニューを提供するコントロールを表します。 |
| `<textarea>` | 複数行のプレーンテキスト編集コントロールを表し、レビューのコメントやお問い合わせフォーム等のように、ユーザーが大量の自由記述テキストを入力できるようにするときに便利です。 |

インタラクティブ要素
----------

HTML には、インタラクティブなユーザーインターフェイスを作成するための要素があります。

| 要素 | 説明 |
| --- | --- |
| `<details>` | ウィジェットが「開いた」状態になった時のみ情報が表示される折りたたみウィジェットを作成します。概要やラベルは `<summary>` 要素を使用して提供する必要があります。 |
| `<dialog>` | ダイアログボックスや、消すことができるアラート、インスペクター、サブウィンドウ等のような対話的コンポーネントを表します。 |
| `<summary>` | details 要素の折り畳みボックスの要約、キャプション、説明、凡例を表します。 `<summary>` 要素をクリックすると、親の `<details>` 要素の開閉状態を切り替えることができます。 |

ウェブコンポーネント
----------

ウェブコンポーネントは要するに、独自の要素を作成して通常の HTML 要素であるかのように使用できる、HTML 関連技術です。加えて、独自版の標準 HTML 要素を作成することもできます。

| 要素 | 説明 |
| --- | --- |
| `<slot>` | ウェブコンポーネント 技術群の一部であるこの要素は、ウェブコンポーネント内のプレースホルダーで、自分自身でマークアップを埋めることができ、別個の DOM ツリーを作成して一緒に表示することができる。 |
| `<template>` | ページが読み込まれたときにすぐにレンダリングされるのではなく、実行時に JavaScript を使って後からインスタンス化することができる HTML を保持するためのメカニズムです。 |

廃止または非推奨の要素
-----------

**警告:** 以下は非推奨の古い HTML 要素であり、使用するべきものではありません。 **新たなプロジェクトではこれらを使用せず、また既存のプロジェクトでも可能な限りこれらを置き換えてください。** この一覧は、情報提供のために記載しています。

| 要素 | 説明 |
| --- | --- |
| `<acronym>` | 頭字語または略語の単語を構成する文字の並びを明示することができます。 |
| `<big>` | 内包するテキストを周りの文字列よりも1段階大きいフォントの大きさで描画します（例えば `medium` が `large` になります）。大きさはブラウザーの最大フォントの大きさに制限されます。 |
| `<center>` | 中に含まれるブロックレベルまたはインラインコンテンツを中央揃えして表示します。 |
| `<content>` | ウェブコンポーネント技術群の廃止された部分であり、シャドウ DOM の中で挿入ポイントとして使われていましたが、通常の HTML で利用することは意図されていませんでした。現在では DOM の中でシャドウ DOM を挿入することができる場所を作成する `<slot>` 要素に置き換えられました。 |
| `<dir>` | ユーザーエージェントが適用するスタイルやアイコンを用いて表示する、ファイルやフォルダーのディレクトリーのコンテナーとして使われます。この要素は廃止されたので使わないで下さい。代わりに、ファイル一覧を含め、一覧には `<ul>` 要素を使用してください。 |
| `<font>` | その内容のフォントサイズ、文字色、使用フォントを定義します。 |
| `<frame>` | 別の HTML 文書を表示できる個々の領域を定義します。frame 要素は `<frameset>` の内部で使用します。 |
| `<frameset>` | `<frame>` 要素を包含するために使用する HTML 要素です。 |
| `<image>` | `<img>` 要素の古く、対応が不十分な前身です。 |
| `<marquee>` | テキストがスクロールする領域を挿入します。要素の属性を使用して、テキストがコンテンツ領域の端に達したときにどうするかを制御できます。 |
| `<menuitem>` | ユーザーがポップアップメニューから呼び出すことができるコマンドを表します。メニューボタンに割り当てるメニューはもちろん、コンテキストメニューも含みます。 |
| `<nobr>` | その内包する文字列の自動改行を無効化します。インラインに収まらない文字列は、領域からはみ出てレンダリングされるか、スクロールバーを伴って表示されます。 |
| `<noembed>` | 廃止された、標準外の方法であり、 `<embed>` 要素に対応していないブラウザーや、ユーザーが仕様とした種類の埋め込みコンテンツに対応していないブラウザーで代替または「フォールバック」コンテンツを提供するものです。これは HTML 4.01 で非推奨となり、代替コンテンツは `<object>` 要素の開始タグと終了タグの間に配置されるようになりました。 |
| `<noframes>` | `<frame>` 要素に対応していない（または対応を無効化した）ブラウザーのためのコンテンツを提供します。よく使われるほとんどのブラウザーがフレームに対応していますが、一部のモバイルブラウザーやテキストモードブラウザーなどの例外もあります。 |
| `<param>` | `<object>` 要素の引数を定義します。 |
| `<plaintext>` | 開始タグ以降のすべてを生のテキストとして表示し、それ以降の HTML を無視します。開始タグ以降は全て生のテキスト扱いになるので、終了タグはありません。 |
| `<rb>` | ルビ表記のベースとなるテキストの部分を区切るために使用されます。つまり、修飾される文字列です。一つの `<rb>` 要素がベーステキストの不可分な区間を隔てるように囲みます。 |
| `<rtc>` | `<ruby>` 要素内で使用する `<rb>` 要素にルビで与える文字列の、意味を表す注釈を包含します。`<rb>` 要素は発音の注釈 (`<rt>`) と意味の注釈 (`<rtc>`) の両方を持つことができます。 |
| `<shadow>` | ウェブコンポーネント技術スイートの廃止された部分で、シャドウ DOM の挿入ポイントとして使用するものでした。シャドウホスト配下に複数のシャドウルートを生成する場合に使用しました。 |
| `<strike>` | テキストの上に取り消し線（水平線）を引きます。 |
| `<tt>` | ユーザーエージェントの既定の等幅フォントで表示されるインライン文字列を生成します。この要素は、テレタイプ、テキスト専用画面、ラインプリンターのような等幅の表示装置で表示されるテキストとしてスタイルを設定しようとするものです。 |
| `<xmp>` | 開始タグと終了タグの間の HTML を解釈せず、等幅フォントを使用してテキストをレンダリングします。HTML2 の仕様では、1 行に 80 文字が入るだけの広さでレンダリングすることが推奨されていました。 |


HTML リファレンス - HTML: ハイパーテキストマークアップ言語

HTML リファレンス
===========

この HTML リファレンスは、 HTML のすべての**要素**と**属性**、およびすべての要素に適用される**グローバル属性**について書かれています。

HTML 要素リファレンス

このページでは、タグを使用して作成されるすべての HTML 要素を一覧表示しています。

HTML 属性リファレンス

HTML の要素は属性を持ちます。ユーザーが望む基準を満たすために、さまざまな方法で要素を構成したり、動作を調整したりする追加の値です。

グローバル属性

グローバル属性は、すべての HTML 要素で共通の属性です。すべての要素で使用できますが、要素によっては効果がないこともあります。

リンク種別

HTML では、以下のようなリンク種別で `<a>`, `<area>`, `<link>` 要素を使用して他へリンクするときに二つの文書間の関係を示します。

コンテンツカテゴリ

すべての HTML 要素は一つ以上のコンテンツカテゴリのメンバです。 — これらのカテゴリは共通の特徴を持つ要素をグループ化します。

HTML で使われる日付と時刻の形式

一部の HTML 要素では、日付や時刻を値や属性の値として指定することができます。これには様々な種類の日付や時刻を扱う `<input>` 要素や、 `<ins>` および `<del>` 要素があります。


後方互換モードと標準準拠モード - HTML: ハイパーテキストマークアップ言語

後方互換モードと標準準拠モード
===============

かつてウェブでは、よく 2 つのバージョンのページを作成していました。ひとつは Netscape Navigator 向け、もうひとつは Microsoft Internet Explorer 向けです。W3C がウェブ標準を作成したとき、ウェブ上のほとんどの既存サイトの表示が壊れるため、ブラウザーはウェブ標準を採用し始めることができませんでした。そのためブラウザーは、標準に準拠した新しいサイトと以前の古いサイトを区別して扱うために、2 つのモードを導入しました。

ウェブブラウザーのレイアウトエンジンが利用するモードは、後方互換 (Quirks) モード、準標準 (Almost Standards) モード、完全標準準拠 (Full Standards) モードの 3 種類になりました。**後方互換モード**では、レイアウトは Navigator 4 や Internet Explorer 5 のような非標準の動作をエミュレートします。これは、ウェブ標準が広く採用される前に作られたウェブサイトをサポートするために必要です。**完全標準準拠モード**では、HTML や CSS の仕様書で書かれている通りに動作します (そのように期待されています)。**準標準モード**では、準標準モードのトリガーとなる DOCTYPE を利用している実際のページについて表示を損なう可能性を考慮した、ごく少数の互換動作が実装されています。

完全標準準拠モードは、単に標準準拠モードとも呼ばれます。ただし、古いブラウザーは後方互換モードと準標準モードしか持たないものがあります。その場合は準標準モードのことを（後方互換モードに対して）標準準拠モードと呼ぶことがあります。

ブラウザーが利用するモードを決定する方法
--------------------

HTML 文書については、ブラウザーは文書の先頭にある DOCTYPE を使用して、後方互換モードで処理するか、標準準拠モードで処理するかを決定します。ページで確実に完全標準準拠モードが使用されるようにするには、以下のサンプルのような DOCTYPE を使用するようにしてください。

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body></body>
</html>
```

この例にある DOCTYPE の `<!DOCTYPE html>` はもっともシンプルな形式であり、HTML5 で推奨されているもののひとつです。以前のバージョンの HTML 標準では他の形式を推奨していましたが、現行のブラウザーはすべて（旧式の Internet Explorer 6 でさえ）、この DOCTYPE に対して完全標準準拠モードを使用します。より複雑な DOCTYPE を使用すべき理由はありません。他の DOCTYPE を使用する場合は、準標準モードや後方互換モードが適用されるおそれがあります。

DOCTYPE は HTML 文書の先頭に置くようにしてください。Internet Explorer 9 以前ではコメントや XML 宣言などが DOCTYPE の前に存在すると、後方互換モードが適用されます。

HTML5 では、DOCTYPE の用途は完全標準準拠モードを適用させることだけです。古いバージョンの HTML 標準では DOCTYPE に他の意味を与えていましたが、後方互換モードと標準準拠モードの切り替え以外の目的で DOCTYPE を使用するブラウザーはありませんでした。

さまざまなブラウザーのモード選択の詳細な説明もご覧ください。

### XHTML

`Content-Type` HTTP ヘッダーで `application/xhtml+xml` を使用して、ページを XHTML として提供する場合は、文書で常に完全標準準拠モードを使用しますので、標準準拠モードを有効化するための DOCTYPE は不要です。ただし Internet Explorer 8 は `application/xhtml+xml` でページを提供すると、ページを表示せずに未知の形式のファイルをダウンロードするダイアログボックスを表示します。これは、最初に XHTML をサポートした Internet Explorer がバージョン 9 であるためです。

`text/html` の MIME タイプを使用して XHTML 形式のコンテンツを提供する場合は、ブラウザーが HTML として読み込みますので、標準準拠モードを使用するために DOCTYPE が必要です。

どのモードが使われているかを確認するには
--------------------

Firefox では、コンテキストメニューで*ページの情報を表示*を選択して、*描画モード*を確認してください。（Firefox のページ情報ウィンドウ）

Internet Explorer では、*F12* を押下して、*ドキュメントモード*を確認してください。


HTML 属性リファレンス - HTML: ハイパーテキストマークアップ言語

HTML 属性リファレンス
=============

HTML の要素は**属性**を持ちます。ユーザーが望む条件を満たすために、さまざまな方法で要素を構成したり、動作を調整したりする追加の値です。

属性一覧
----

| 属性名 | 要素 | 説明 |
| --- | --- | --- |
| `accept` | `<form>`, `<input>` | サーバーの受容する型のリストです。ふつうはファイル形式です。 |
| `accept-charset` | `<form>` | 対応している文字集合のリストです。 |
| `accesskey` | グローバル属性 | 要素をアクティブ化したり、フォーカスを与えたりするためのショートカットキーです。 |
| `action` | `<form>` | フォーム経由で送信される情報を処理するプログラムの URI です。 |
| `align` | `<applet>`,
 `<caption>`, `<col>`,
 `<colgroup>`,
 `<hr>`, `<iframe>`,
 `<img>`, `<table>`,
 `<tbody>`, `<td>`,
 `<tfoot>`, `<th>`,
 `<thead>`, `<tr>` | 要素の水平方向の配置を指定します。 |
| `allow` | `<iframe>` | iframe の機能ポリシーを指定します。 |
| `alt` | `<applet>`, `<area>`,
 `<img>`, `<input>` | 画像が表示できない場合の代替テキストです。 |
| `async` | `<script>` | スクリプトを非同期で実行します。 |
| `autocapitalize` | グローバル属性 | ユーザーによる入力が入力欄で自動的に大文字化されるかどうかを設定します。 |
| `autocomplete` | `<form>`, `<input>`,
 `<select>`,
 `<textarea>` | このフォーム内のコントロールが、ブラウザーによる値の自動補完を既定で許容するかを示します。 |
| `autofocus` | `<button>`,
 `<input>`,
 `<select>`,
 `<textarea>` | ページ読込後に、対象要素に自動的にフォーカスを当てるようにします。 |
| `autoplay` | `<audio>`,
 `<video>` | オーディオやビデオが再生可能になった時点で自動再生を開始します。 |
| `background` | `<body>`, `<table>`,
 `<td>`, `<th>` | 画像ファイルの URL を指定します。

**メモ:** ブラウザーや電子メールクライアントはまだこの属性に対応していますが、廃止済みです。代わりに CSS の `background-image` を使用してください。
 |
| `bgcolor` | `<body>`, `<col>`,
 `<colgroup>`,
 `<marquee>`,
 `<table>`,
 `<tbody>`,
 `<tfoot>`, `<td>`,
 `<th>`, `<tr>` | 要素の背景色です。

**メモ:** これは古い属性です。代わりに CSS の `background-color` プロパティを使用してください。
 |
| `border` | `<img>`, `<object>`,
 `<table>` | 境界線の幅です。

**メモ:** これは古い属性です。代わりに CSS の `border` プロパティを使用してください。
 |
| `buffered` | `<audio>`,
 `<video>` | すでにバッファリングされたメディアの時間の範囲を示します。 |
| `capture` | `<input>` | Media Capture 仕様書から、キャプチャできる新しいファイルを指定します。 |
| `charset` | `<meta>`, `<script>` | ページまたはスクリプトの文字エンコーディングを宣言します。 |
| `checked` | `<input>` | ページ読み込み時に要素にチェックを入れておくかどうかを指定します。 |
| `cite` | `<blockquote>`,
 `<del>`, `<ins>`,
 `<q>` | 引用元または変更点の情報源を指す URI を格納します。 |
| `class` | グローバル属性 | よく使われるプロパティで要素にスタイルを適用するために CSS と共によく用いられます。 |
| `code` | `<applet>` | 読み込んで実行するアプレットのクラスファイルの URL を指定します。 |
| `codebase` | `<applet>` | code 属性で参照するアプレットの .class ファイルを配置しているディレクトリの絶対 URL または相対 URL を指定します。 |
| `color` | `<font>`, `<hr>` | この属性は色名または16進数の #RRGGBB 形式を用いて文字色を設定します。

**メモ:** これは古い属性です。代わりに CSS の `color` プロパティを使用して下さい。
 |
| `cols` | `<textarea>` | テキストエリアの桁数 (水平方向の文字数) を定義します。 |
| `colspan` | `<td>`, `<th>` | colspan 属性はテーブルのセルを結合する列数を定義します。 |
| `content` | `<meta>` | 状況に応じて、 `http-equiv` または `name` に関連した値です。 |
| `contenteditable` | グローバル属性 | 要素の内容が編集可能であるかどうかを示します。 |
| `contextmenu` | グローバル属性 | 要素のコンテキストメニューとして機能する `<menu>` 要素の ID を定義します。 |
| `controls` | `<audio>`,
 `<video>` | 再生コントロールをユーザーに表示すべきかどうかを示します。 |
| `coords` | `<area>` | ホットスポット領域の座標を指定するための値のセットです。 |
| `crossorigin` | `<audio>`, `<img>`,
 `<link>`, `<script>`,
 `<video>` | 要素がオリジン間リクエストをどう扱うか |
| `csp`

Experimental
 | `<iframe>` | 埋め込まれた文書が管理されるためのコンテンツセキュリティポリシーを指定します。 |
| `data` | `<object>` | リソースの URL を指定します。 |
| `data-\*` | グローバル属性 | HTML 要素にカスタム属性が添付できるようにします。 |
| `datetime` | `<del>`, `<ins>`,
 `<time>` | 要素に関連付けられた日時を示します。 |
| `decoding` | `<img>` | 画像をデコードする推奨の方法を示します。 |
| `default` | `<track>` | ユーザー設定によって異なることが示されていない限り、トラックが有効であることを示します。 |
| `defer` | `<script>` | ページの解釈が完了した後に実行するスクリプトであることを示します。 |
| `dir` | グローバル属性 | テキストの書字方向を定義します。使用できる値は ltr (Left-To-Right) または rtl (Right-To-Left) です。 |
| `dirname` | `<input>`,
 `<textarea>` |  |
| `disabled` | `<button>`,
 `<fieldset>`,
 `<input>`,
 `<optgroup>`,
 `<option>`,
 `<select>`,
 `<textarea>` | 閲覧者によるによるコントロールの操作を無効にするかどうかを示します。 |
| `download` | `<a>`, `<area>` | リソースをダウンロードするためのハイパーリンクであるかどうかを示します。 |
| `draggable` | グローバル属性 | 要素がドラッグ可能であるかどうかを示します。 |
| `enctype` | `<form>` | `method` 属性が POST である場合に、フォームデータのコンテンツ型を定義します。 |
| `enterkeyhint`

Experimental
 | `<textarea>`,
 `contenteditable` | `enterkeyhint` は、仮想キーボードの Enter キーにあるアクションラベル (またはアイコン) が何であるかを指定します。この属性はフォームコントロール (`textarea` 要素の値など) と共に、または編集対象となっている要素 (例えば `contenteditable` 属性の使用など) の中で使用することができます。 |
| `for` | `<label>`,
 `<output>` | この要素が属する要素を指定します。 |
| `form` | `<button>`,
 `<fieldset>`,
 `<input>`,
 `<label>`,
 `<meter>`,
 `<object>`,
 `<output>`,
 `<progress>`,
 `<select>`,
 `<textarea>` | その要素が所属するフォームを示します。 |
| `formaction` | `<input>`,
 `<button>` | その要素のアクションを示します。 `<form>` で定義されたアクションを上書きします。 |
| `formenctype` | `<button>`,
 `<input>` | button や input が送信ボタンである場合 (`type="submit"`)、この属性はフォーム送信で使用するエンコーディング型を設定します。この属性が指定された場合、ボタンを所有するフォームの `enctype` 属性より優先されます。 |
| `formmethod` | `<button>`,
 `<input>` | button や input が送信ボタンである場合 (`type="submit"`)、この属性はフォーム送信で使用する送信メソッド (`GET`, `POST`, など) を設定します。この属性が指定された場合、ボタンを所有するフォームの `method` 属性より優先されます。 |
| `formnovalidate` | `<button>`,
 `<input>` | button や input が送信ボタンである場合 (`type="submit"`)、この論理属性はフォームが送信時に検証されないことを指定します。この属性が指定された場合、ボタンを所有するフォームの `novalidate` 属性より優先されます。 |
| `formtarget` | `<button>`,
 `<input>` | button や input が送信ボタンである場合 (`type="submit"`)、この属性はフォームを送信した後で受け取るレスポンスを表示する閲覧コンテキスト (例えば、タブ、ウィンドウ、インラインフレーム) を指定します。この属性が指定された場合、ボタンを所有するフォームの `target` 属性より優先されます。 |
| `headers` | `<td>`, `<th>` | この要素に適用する `<th>` 要素の ID。 |
| `height` | `<canvas>`,
 `<embed>`,
 `<iframe>`, `<img>`,
 `<input>`,
 `<object>`,
 `<video>` | ここに挙げた要素の高さを指定します。他の要素では、 `height` プロパティを使用してください。

**メモ:** `<div>` など一部の要素では、これは古い属性であり、代わりに CSS の `height` プロパティを使用してください。
 |
| `hidden` | グローバル属性 | この要素のレンダリングを抑制しますが、 script 要素などの子要素は有効なままにします。 |
| `high` | `<meter>` | 最大値の下限を示します。 |
| `href` | `<a>`, `<area>`,
 `<base>`, `<link>` | リンクされたリソースの URL です。 |
| `hreflang` | `<a>`, `<area>`,
 `<link>` | リンクされたリソースの言語を指定します。 |
| `http-equiv` | `<meta>` | プラグマディレクティブを定義します。 |
| `id` | グローバル属性 | 特定の要素へスタイルを設定するために CSS と共によく使われます。この属性の値は一意でなければなりません。 |
| `integrity` | `<link>`, `<script>` | ブラウザーが読み込むものを検証できるようにするためのサブリソース完全性の値を指定します。 |
| `intrinsicsize`

非推奨
 | `<img>` | この属性はブラウザーに、画像に固有の実際の寸法を無視して、属性で指定された寸法を割り当てるように指示します。 |
| `inputmode` | `<textarea>`,
 `contenteditable` | 要素やその内容を編集する際に、ユーザーが入力する可能性のあるデータの種類のヒントを提供します。この属性はフォームコントロール (`textarea` 要素の値など) と共に、または編集対象となっている要素 (例えば `contenteditable` 属性の使用など) の中で使用することができます。 |
| `ismap` | `<img>` | 画像がサーバーサイドイメージマップの一部であることを示します。 |
| `itemprop` | グローバル属性 |  |
| `kind` | `<track>` | テキストトラックの種類を指定します。 |
| `label` | `<optgroup>`,
 `<option>`,
 `<track>` | ユーザーが読める形の要素のタイトルを指定します。 |
| `lang` | グローバル属性 | 要素内で用いられている言語を定義します。 |
| `language`

非推奨
 | `<script>` | 要素で使用しているスクリプト言語を定義します。 |
| `loading`
Experimental
 | `<img>`, `<iframe>` | 要素を遅延読み込みさせたいか (`loading="lazy"`) または直ちに読み込ませたいか (`loading="eager"`) を示します。 |
| `list` | `<input>` | ユーザに提案するため、事前に定義した選択肢のリストを示す。 |
| `loop` | `<audio>`,
 `<bgsound>`,
 `<marquee>`,
 `<video>` | メディアの再生が完了した後、始めから再生を開始するかを示します。 |
| `low` | `<meter>` | 最小値の上限を示します。 |
| `manifest`

非推奨
 | `<html>` | この文書のキャッシュマニフェストの URL を指定します。

**メモ:** この属性は廃止されており、代わりに `<link rel="manifest">` を使用してください。
 |
| `max` | `<input>`,
 `<meter>`,
 `<progress>` | 許容される最大の値を示します。 |
| `maxlength` | `<input>`,
 `<textarea>` | 要素が許容する最大文字数を定義します。 |
| `minlength` | `<input>`,
 `<textarea>` | 要素が許容する最小文字数を定義します。 |
| `media` | `<a>`, `<area>`,
 `<link>`, `<source>`,
 `<style>` | リンクされたリソースがどのメディアに対して設計されたかを指定します。 |
| `method` | `<form>` | フォームを送信する際に使用する HTTP メソッドを定義します。 `GET` (既定値) または `POST` が指定可能です。 |
| `min` | `<input>`,
 `<meter>` | 許容される最小の値を示します。 |
| `multiple` | `<input>`,
 `<select>` | input で type が `email` または `file` の input ものでは、複数の値を入力可能かどうかを示します。 |
| `muted` | `<audio>`,
 `<video>` | ページ読み込み時に音声を無音にするかどうかを示します。 |
| `name` | `<button>`, `<form>`,
 `<fieldset>`,
 `<iframe>`,
 `<input>`,
 `<object>`,
 `<output>`,
 `<select>`,
 `<textarea>`,
 `<map>`, `<meta>`,
 `<param>` | 要素の名前です。例えば、送信されたフォームでサーバーがフィールドを識別するために使用します。 |
| `novalidate` | `<form>` | 送信時にフォームが検証しないことを示す属性です。 |
| `open` | `<details>`,
 `<dialog>` | コンテンツが現在表示されているか（`<details>` 要素の場合）、ダイアログがアクティブで対話可能か（`<dialog>` 要素の場合）を示します。 |
| `optimum` | `<meter>` | 最適な値を示します。 |
| `pattern` | `<input>` | 要素の値を検証するための正規表現を定義します。 |
| `ping` | `<a>`, `<area>` | `ping` 属性は、ユーザーがハイパーリンクをたどる場合に通知される URL のリストを空白区切りで指定します。 |
| `placeholder` | `<input>`,
 `<textarea>` | フィールドが何を入力するものであるかのヒントを閲覧者に対し提供します。 |
| `playsinline` | `<video>` | 論理属性で、動画が「インライン」で再生されること、つまり、要素の再生領域内で再生されることを示します。この属性がないからといって、動画が常に全画面で再生されるわけではないことに注意してください。 |
| `poster` | `<video>` | ユーザが再生やシークを行うまでの間に表示するポスターフレームの URL です。 |
| `preload` | `<audio>`,
 `<video>` | リソースの全体または一部の先読みを行う、あるいは先読みを行わないことを示す。 |
| `readonly` | `<input>`,
 `<textarea>` | 要素が編集できるかどうかを示す。 |
| `referrerpolicy` | `<a>`, `<area>`,
 `<iframe>`, `<img>`,
 `<link>`, `<script>` | リソースにアクセスする際にどのリファラーが送信されるかを指定します。 |
| `rel` | `<a>`, `<area>`,
 `<link>` | リンク先オブジェクトとリンク元オブジェクトとの関係を指定します。 |
| `required` | `<input>`,
 `<select>`,
 `<textarea>` | 入力が必須の要素であるかを示します。 |
| `reversed` | `<ol>` | リストを昇順ではなく降順に表示することを示します。 |
| `role` | グローバル属性 | 支援技術が使用するための要素の明示的な役割を定義します。 |
| `rows` | `<textarea>` | テキストエリアの行数を定義します。 |
| `rowspan` | `<td>`, `<th>` | テーブルセルがまたがる行数を定義します。 |
| `sandbox` | `<iframe>` | iframe に読み込まれた文書で特定の機能 (フォームの投稿や新しいウィンドウを開くなど) を使用するのを阻止します。 |
| `scope` | `<th>` | (`th` 要素で定義される) ヘッダーが関連するセルを定義します。 |
| `scoped`

Non-standard

非推奨
 | `<style>` |  |
| `selected` | `<option>` | ページ読込時に、対象要素を選択状態にします。 |
| `shape` | `<a>`, `<area>` |  |
| `size` | `<input>`,
 `<select>` | 要素の幅を（ピクセル数で）定義します。要素の `type` 属性が `text` または `password` である場合は文字数になります。 |
| `sizes` | `<link>`, `<img>`,
 `<source>` |  |
| `slot` | グローバル属性 | 要素にシャドウ DOM のシャドウツリーのスロットを割り当てます。 |
| `span` | `<col>`,
 `<colgroup>` |  |
| `spellcheck` | グローバル属性 | 要素のスペルチェックを有効にするかどうかを示します。 |
| `src` | `<audio>`,
 `<embed>`,
 `<iframe>`, `<img>`,
 `<input>`,
 `<script>`,
 `<source>`,
 `<track>`,
 `<video>` | 埋め込みコンテンツの URL です。 |
| `srcdoc` | `<iframe>` |  |
| `srclang` | `<track>` |  |
| `srcset` | `<img>`, `<source>` | 一つ以上のレスポンシブ画像の候補です。 |
| `start` | `<ol>` | 1以外から始まる場合の最初の値を定義します。 |
| `step` | `<input>` |  |
| `style` | グローバル属性 | 外部スタイルシートや style 要素内に記述されたものより優先度の高いスタイル情報を記述します。 |
| `summary`

非推奨
 | `<table>` |  |
| `tabindex` | グローバル属性 | ブラウザーによる既定のタブ順を無効化して、指定した順序に従うようにします。 |
| `target` | `<a>`, `<area>`,
 `<base>`, `<form>` | リンク先の文書を開く場所（`<a>` 要素の場合）、または受信したレスポンスを表示する場所（`<form>`要素の場合）を指定します。 |
| `title` | グローバル属性 | この要素にポインターを当てたときに表示されるツールチップのテキストです。 |
| `translate` | グローバル属性 | ページが翻訳版である場合、要素の属性値と子の `Text` ノードが翻訳されているか、変更せずにそのままであるかを指定します。 |
| `type` | `<button>`,
 `<input>`,
 `<embed>`,
 `<object>`,
 `<ol>`,
 `<script>`,
 `<source>`,
 `<style>`, `<menu>`,
 `<link>` | 要素の型を定義します。 |
| `usemap` | `<img>`, `<input>`,
 `<object>` |  |
| `value` | `<button>`, `<data>`,
 `<input>`, `<li>`,
 `<meter>`,
 `<option>`,
 `<progress>`,
 `<param>` | ページ読み込み時に要素で表示する既定値を定義します。 |
| `width` | `<canvas>`,
 `<embed>`,
 `<iframe>`, `<img>`,
 `<input>`,
 `<object>`,
 `<video>` | ここに挙げられた要素に対して、要素の幅を指定します。

**メモ:** `<div>` をはじめとする他の要素については、これは古い属性であり、代わりに CSS の `width` プロパティを使用してください。
 |
| `wrap` | `<textarea>` | テキストを折り返すかどうかを示します。 |

コンテンツ属性と IDL 属性
---------------

HTML では、ほとんどの属性に **コンテンツ属性** と **IDL (Interface Definition Language) 属性** の 2 つの側面があります。

コンテンツ属性はコンテンツ (HTML コード) から設定する属性であり、 `element.setAttribute()` や `element.getAttribute()` を使用して設定または取得できます。 コンテンツ属性は値として数値を想定するものであっても、常に文字列です。例えば コンテンツ属性を使用して `<input>` 要素の `maxlength` 属性に 42 を設定するには、その要素で `setAttribute("maxlength", "42")` を呼び出さなければなりません。

IDL 属性は JavaScript プロパティとしても知られています。これらは JavaScript プロパティを使用して、 `element.foo` のように読み書きします。IDL 属性は読み取り時に値を返すため基になるコンテンツ属性を使用したり（ただし、）、書き込み時に コンテンツ属性へ何らかの値を保存したりします。言い換えると、IDL 属性は コンテンツ属性を映し出します。

ほとんどの場合、IDL 属性は実際に使用する値として自身の値を返します。例えば `<input>` 要素の `type` 属性のデフォルト値は "text" であるので、`input.type="foobar"` を設定すると `<input>` 要素は (外見と動作が) text タイプになりますが、"type" コンテンツ属性の値は "foobar" になります。しかし、`type` IDL 属性は文字列 "text" を返します。

IDL 属性は常に文字列とは限りません。例えば `input.maxlength` は数値 (符号付き long) です。IDL 属性を使用するときは望ましい型の値を読み書きするので、`input.maxlength` は常に数値を返し、また `input.maxlength` を設定するときは数値を要求します。他の型で渡すと、標準的な JavaScript の型変換規則に従って自動的に数値へ変換されます。

 IDL 属性は符号なし long、URL、論理値など他の型を反映することが可能です。残念ながら、 IDL 属性がコンテンツ属性と
 属性に応じて IDL 属性が対応するコンテンツ属性と一体化して動作するための明確な規則や方法はありません。ほとんどの場合は仕様書にあるレイアウトルールに従いますが、そうでない場合もあります。 HTML 仕様では可能な限り開発者にやさしいものにしようとしていますが、さまざまな理由 (たいていは歴史的な理由) により奇妙な動作になる属性 (例えば `select.size`) があり、実際どのように動作するかを理解するために仕様書を読むようにしましょう。

論理属性
----

一部のコンテンツ属性 (例えば `required`, `readonly`, `disabled`) は論理属性 (boolean attributes) と呼ばれています。論理属性は存在すれば、その値が **true** となり、存在しなければ、その値が **false** となります。

HTML では、論理属性に許されている値の制約を定義しています。属性が存在する場合は、値は空文字列 (属性の値が割り当てられないことがあります) または属性の正式名に ASCII で大文字・小文字まで一致する値のどちらかで、前後にホワイトスペースを含んではいけません。以下の例は論理属性をマークアップする正しい方法です。

```html
<div itemscope>This is valid HTML but invalid XML.</div>
<div itemscope=itemscope>This is also valid HTML but invalid XML.</div>
<div itemscope="">This is valid HTML and also valid XML.</div>
<div itemscope="itemscope">
  This is also valid HTML and XML, but perhaps a bit verbose.
</div>
```

明確にするために、 "`true`" および "`false`" という値は論理属性では許可されていません。偽の値を表すには、属性ごと省略する必要があります。この制約により、いくつかのよくある誤解が明確になります。例えば `checked="false"` は、属性が存在するため、その要素の `checked` 属性が **true** であると解釈されます。

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

**警告:** イベントハンドラーコンテンツ属性を使用することは推奨されません。HTML と JavaScript が混在すると保守性の低いコードになることが多く、またイベントハンドラー属性の実行はコンテンツセキュリティポリシーによってブロックされることがあります。

上の表に掲載されている属性の他に、グローバルイベントハンドラー（`onclick` など）も、すべての要素のコンテンツ属性として指定することができます。

すべてのイベントハンドラー属性は文字列を受け入れます。この文字列は、JavaScript関数、たとえば `function name(/*args*/) {body}` などを生成するために使用され、`name` は属性の名前、`body` は属性の値となります。ハンドラーは、対応する JavaScript イベントハンドラーと同じ引数を受け取ります。ほとんどのハンドラーは `event` 引数 1 つだけを受け取りますが、`onerror` は5つの引数 (`event`, `source`, `lineno`, `colno`, `error`) を受け取ります。これは、一般的に、属性内で変数 `event` を使用することができることを意味しています。

```html
<div onclick="console.log(event)">Click me!</div>
<!-- The synthesized handler has a name; you can reference itself -->
<div onclick="console.log(onclick)">Click me!</div>
```

関連情報
----

* HTML 要素


画像とキャンバスをオリジン間で利用できるようにする - HTML: ハイパーテキストマークアップ言語

画像とキャンバスをオリジン間で利用できるようにする
=========================

HTML では画像に `crossorigin` 属性を提供し、適切な CORS ヘッダーと組み合わせることで、 `<img>` 要素で定義されている他のオリジンから読み込まれた画像を、 `<canvas>` の中で現在のオリジンから読み込まれた画像であるかのように扱うことができます。

`crossorigin` 属性の使い方については CORS 設定属性をご覧ください。

セキュリティと汚染されたキャンバス
-----------------

キャンバスのビットマップ内のピクセルは様々なソース、例えば他のホストから受け取った画像や動画などから来ることもありますが、セキュリティの問題が発生することが避けられません。

CORS による許可なしに他のオリジンから読み込んだ何らかのデータをキャンバスに描画すると、キャンバスは**汚染** (taint) されてしまいます。汚染されたキャンバスは安全とみなされなくなり、そのキャンバスから画像データを取得しようとすると、例外が発生するでしょう。

外部コンテンツの元が HTML の `<img>` または SVG の `<svg>` 要素であった場合、キャンバスの内容を取得しようとすることは許可されていません。

`HTMLCanvasElement` または `ImageBitMap` のどちらかとして取得した、元が同一オリジン規則に合わない画像から取得した外部のコンテンツは、キャンバスの内容を読み取ろうとするとブロックされます。

汚染されたキャンバスで以下の呼び出しを行うと、エラーが発生します。

* キャンバスのコンテキストに対する `getImageData()` の呼び出し
* `toBlob()`、`toDataURL()`、`captureStream()` の `<canvas>` 要素自身に対する呼び出し

キャンバスが汚染されていた場合にこれらの何れかを行うと、 `SecurityError` が発生します。これによって、外部のウェブサイトが許可なしに情報を引き出すために、画像を使用して個人的なデータを暴露することからユーザーを守ります。

異なるオリジンからの画像の保存
---------------

この例では、外部のオリジンから画像を受け取り、ローカルストレージに保存することを許可します。これを実装するには、コードを書くだけでなくそのウェブサイトのサーバーを構成する必要があります。

### ウェブサーバーの構成

最初に必要なものは、画像をホスティングし、画像ファイルに対するオリジン間のアクセスを許可するために、 `Access-Control-Allow-Origin` ヘッダーが構成されたサーバーが必要です。

Apache を使用してサイトを提供してみましょう。 HTML5 Boilerplate の CORS 画像のための Apache サーバー構成ファイルを考えてみましょう。

```xml
<IfModule mod\_setenvif.c>
  <IfModule mod\_headers.c>
    <FilesMatch "\.(avifs?|bmp|cur|gif|ico|jpe?g|jxl|a?png|svgz?|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>
```

つまり、この構成はサーバーにグラフィックのファイル（拡張子が ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", ".webp" であるもの）を、インターネットのどこからでもオリジン間のアクセスができるようにします。

### 保存機能の実装

サーバーをオリジン間の画像の取得ができるように構成したので、画像がコードを実行しているところと同じドメインから提供されたものであるかのように、ユーザーが画像をローカルストレージに保存することができるようにするコードを書くことができます。

鍵となるのは、 `crossOrigin` を画像が読み込まれる `HTMLImageElement` に設定することで、`crossorigin` 属性を使用することです。これでブラウザーに画像データをダウンロードしようとするときにオリジン間のリクエストを命じます。

#### ダウンロードの開始

ダウンロードを始める (つまり、ユーザーが「ダウンロード」ボタンをクリックした時の) コードは次にようになります。

```js
function startDownload() {
  let imageURL =
    "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn\_logo-only\_color.svg?1535749917189";
  let imageDescription = "The Mozilla logo";

  downloadedImg = new Image();
  downloadedImg.crossOrigin = "Anonymous";
  downloadedImg.addEventListener("load", imageReceived, false);
  downloadedImg.alt = imageDescription;
  downloadedImg.src = imageURL;
}
```

ここではハードコーディングされた URL (`imageURL`) を使用していますが、どこからでも持ってくるのは簡単でしょう。画像のダウンロードを始めるために、新しい `HTMLImageElement` を `Image()` コンストラクターを使用して生成します。それから画像は `crossOrigin` 属性を `"Anonymous"` (つまり、認証のないオリジン間の画像のダウンロード) に設定することで、オリジン間のダウンロードができるように構成します。画像要素で `load` イベントが発生した場合、つまり画像データが受信された場合のイベントリスナーを追加します。

最後に、画像の `src` 属性をダウンロードする画像に設定します。これがダウンロードを始める引き金になります。

#### 画像の受信と保存

新規の画像のダウンロードを扱うコードは、 `imageReceived()` メソッドに見られます。

```js
function imageReceived() {
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");

  canvas.width = downloadedImg.width;
  canvas.height = downloadedImg.height;
  canvas.innerText = downloadedImg.alt;

  context.drawImage(downloadedImg, 0, 0);
  imageBox.appendChild(canvas);

  try {
    localStorage.setItem("saved-image-example", canvas.toDataURL("image/png"));
  } catch (err) {
    console.error(`Error: ${err}`);
  }
}
```

`imageReceived()` は `HTMLImageElement` 上でダウンロードした画像を受け取ったことを表す `"load"` イベントを扱うために呼び出されます。このイベントは、ダウンロードしたデータがすべて利用可能になったら一度呼び出されます。新しい `<canvas>` 要素を作成することから始まり、画像をデータ URL に変換して、キャンバスの二次元描画コンテキスト (`CanvasRenderingContext2D`) がある変数 `context` へのアクセスを取得します。

キャンバスの寸法は受信した画像に合うよう調整され、それから `drawImage()` を使って画像をキャンバスに描画します。それからキャンバスが文書に挿入され、画像が見えるようになります。

実際に画像をローカルに保存する時になりました。このためにはウェブストレージ API のローカルストレージの仕組みを使用し、 `localStorage` グローバル変数を通してアクセスします。キャンバスのメソッド `toDataURL()` を使用して画像を data:// URL が表す PNG 画像に変換し、それから `setItem()` を用いてローカルストレージに保存します。

関連情報
----

* Using Cross-domain images in WebGL and Chrome 13
* HTML Specification - the `crossorigin` attribute
* ウェブストレージ API


コンテンツカテゴリー - HTML: ハイパーテキストマークアップ言語

コンテンツカテゴリー
==========

ほとんどの HTML 要素は 1 つ以上の**コンテンツカテゴリー**に属していて、カテゴリーごとに共通した特徴を持つ要素を分類しています。これは緩やかなグループ分けです（実際にはこれらのカテゴリーの要素間の関係を作成していません）。しかし、これらは、特にその複雑な詳細に遭遇したときに、カテゴリーの共有動作とその関連ルールを定義し記述するのに役立ちます。*どの*カテゴリーにも属さない要素も存在します。

コンテンツカテゴリーは 3 種類あります。

* 主要コンテンツカテゴリー。これは多くの要素で共通のルールを定義します。
* フォーム関連コンテンツカテゴリー。これはフォーム関連の要素に共通のルールを定義します。
* 固有のコンテンツカテゴリー。これはいくつかの要素だけ、場合によっては特定の文脈でだけ使われる、稀なカテゴリーです。

**メモ:** コンテンツカテゴリーとその機能比較についての詳細な説明は、この記事の範囲外です。詳しく知りたければ、 HTML 仕様書の関連部分を読みましょう。

![様々なコンテンツカテゴリーの相互関係を示すベン図。以下の節では、これらの関係をテキストで説明します。](/ja/docs/Web/HTML/Content_categories/content_categories_venn.png)

主要コンテンツカテゴリー
------------

### メタデータコンテンツ

*メタデータコンテンツ*のカテゴリーに属する要素は、表示方法や文書のその他の部分の挙動を変化させたり、他の文書へのリンクを確立させたり、その他の*本文外*の情報を伝えたりします。

このカテゴリーに属する要素は、`<base>`, `<command>`
非推奨
, `<link>`, `<meta>`, `<noscript>`, `<script>`, `<style>`, `<title>` です。

### フローコンテンツ

フローコンテンツは、 `<body>` 要素の中に入ることができるほとんどの要素を含む広いカテゴリーで、見出し要素、区分要素、記述要素、埋め込み要素、対話的要素、フォーム関連要素などが含まれます。また、テキストノードも含まれます（ただし、ホワイトスペースのみで構成されるものは除きます）。

フローコンテンツは、 `<a>`, `<abbr>`, `<address>`, `<article>`, `<aside>`, `<audio>`, `<b>`, `<bdo>`, `<bdi>`, `<blockquote>`, `<br>`, `<button>`, `<canvas>`, `<cite>`, `<code>`, `<command>`
非推奨
, `<data>`, `<datalist>`, `<del>`, `<details>`, `<dfn>`, `<div>`, `<dl>`, `<em>`, `<embed>`, `<fieldset>`, `<figure>`, `<footer>`, `<form>`, `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<header>`, `<hgroup>`, `<hr>`, `<i>`, `<iframe>`, `<img>`, `<input>`, `<ins>`, `<kbd>`, `<label>`, `<main>`, `<map>`, `<mark>`, `<math>`, `<menu>`, `<meter>`, `<nav>`, `<noscript>`, `<object>`, `<ol>`, `<output>`, `<p>`, `<picture>`, `<pre>`, `<progress>`, `<q>`, `<ruby>`, `<s>`, `<samp>`, `<script>`, `<section>`, `<select>`, `<small>`, `<span>`, `<strong>`, `<sub>`, `<sup>`, `<svg>`, `<table>`, `<template>`, `<textarea>`, `<time>`, `<u>`, `<ul>`, `<var>`, `<video>`, `<wbr>` です。

特定の条件が満たされている場合のみ、このカテゴリーに属する要素がいくつか存在します。

* `<area>`: `<map>` 要素の子孫の場合
* `<link>`: itemprop 属性がある場合
* `<meta>`: itemprop 属性がある場合
* `<style>`: `scoped`
非推奨
 属性がある場合
### 区分コンテンツ

区分コンテンツ (sectioning content) のモデルに属する要素は `<header>` 要素、 `<footer>` 要素、そして見出しコンテンツのスコープを定義する現在のアウトライン内のセクションを作成します。

このカテゴリーに属する要素は、 `<article>`, `<aside>`, `<nav>`, `<section>` です。

**メモ:** このコンテンツモデルを区分化ルートカテゴリーと混同しないでください。区分化ルートは、通常のアウトラインからそれ自身のコンテンツを分離させるものです。

### 見出しコンテンツ

見出しコンテンツ (heading content) は明示的に区分コンテンツ要素によってマークアップされたか、もしくは、見出しコンテンツ自身によって明示的に定義されたセクションの見出しを定義します。

このカテゴリーに属する要素は、 `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<hgroup>` です。

**メモ:** `<header>` 要素は見出しを含む可能性がありますが、それ自身は見出しコンテンツではありません。

**メモ:** `<hgroup>` 要素は、支援技術で適切に動作しないため、推奨されません。 HTML 5 が完成する前に W3C の HTML 仕様書から削除されましたが、 WHATWG の仕様書の一部として残っており、ほとんどのブラウザーは最低限部分的に対応しています。

### 記述コンテンツ

記述コンテンツ (phrasing content) は、文章とその中に含まれるマークアップを定義します。記述コンテンツの集まりで段落を構成します。

このカテゴリーに属する要素は、 `<abbr>`, `<audio>`, `<b>`, `<bdo>`, `<br>`, `<button>`, `<canvas>`, `<cite>`, `<code>`, `<command>`
非推奨
, `<data>`, `<datalist>`, `<dfn>`, `<em>`, `<embed>`, `<i>`, `<iframe>`, `<img>`, `<input>`, `<kbd>`, `<label>`, `<mark>`, `<math>`, `<meter>`, `<noscript>`, `<object>`, `<output>`, `<picture>`, `<progress>`, `<q>`, `<ruby>`, `<samp>`, `<script>`, `<select>`, `<small>`, `<span>`, `<strong>`, `<sub>`, `<sup>`, `<svg>`, `<textarea>`, `<time>`, `<u>`, `<var>`, `<video>`, `<wbr>` および通常の文字列です（ホワイトスペースだけで構成されたものを除く）。

他にも特定の条件が満たされたときのみ、このカテゴリーに属する要素がいくつかあります。

* `<a>`: 記述コンテンツだけを含む場合
* `<area>`: `<map>` 要素の子孫である場合
* `<del>`: 記述コンテンツだけを含む場合
* `<ins>`: 記述コンテンツだけを含む場合
* `<link>`: itemprop 属性がある場合
* `<map>`: 記述コンテンツだけを含む場合
* `<meta>`: itemprop 属性がある場合
### 埋め込みコンテンツ

埋め込みコンテンツ (Embedded content) は、文書に他のリソースを取り込んだり、他のマークアップ言語や名前空間を挿入したりするものです。このカテゴリーに属する要素は、 `<audio>`, `<canvas>`, `<embed>`, `<iframe>`, `<img>`, `<math>`, `<object>`, `<svg>`, `<video>` です。

### 対話型コンテンツ

 対話型コンテンツ (interactive content) にはユーザとのやり取りのために固有にデザインされた要素が含まれます。このカテゴリーに属する要素は、 `<a>`, `<button>`, `<details>`, `<embed>`, `<iframe>`, `<label>`, `<select>`, `<textarea>` です。
 要素によっては、特定の条件下にある場合にのみこのカテゴリーに所属します。

* `<audio>`: `controls` 属性がある場合
* `<img>`: `usemap` 属性がある場合
* `<input>`: `type` 属性が hidden 状態ではない場合
* `<menu>`: `type` 属性が toolbar 状態ではない場合
* `<object>`: `usemap` 属性がある場合
* `<video>`: `controls` 属性がある場合
### 知覚可能コンテンツ

コンテンツが空でも非表示でもない時は知覚可能 (palpable) です。これは描画され実在するコンテンツです。フローコンテンツまたは記述コンテンツの要素には、知覚可能なノードが少なくとも 1 つあります。

### フォーム関連コンテンツ

フォーム関連コンテンツ (form-associated content) は **form** 属性によって表される、フォームオーナーを持つ要素を含みます。フォームオーナーは、このカテゴリーの要素を内包する `<form>` 要素か **form** 属性で id が指定された要素です。

* `<button>`
* `<fieldset>`
* `<input>`
* `<label>`
* `<meter>`
* `<object>`
* `<output>`
* `<progress>`
* `<select>`
* `<textarea>`

このカテゴリーにはいくつかのサブカテゴリーが含まれています。

リスト化

IDL コレクションの `form.elements` と fieldset.elements によってリスト化された要素です。 `<button>`, `<fieldset>`, `<input>`, `<object>`, `<output>`, `<select>`, `<textarea>` を含みます。

ラベル付け可能

`<label>` に関連付けできる要素です。 `<button>`, `<input>`, `<meter>`, `<output>`, `<progress>`, `<select>`, `<textarea>` を含みます。

送信可能

フォームが送信 (submit) されるときにフォームデータセットを構築するために用いることができる要素です。 `<button>`, `<input>`, `<object>`, `<select>`, `<textarea>` を含みます。

リセット可能

フォームがリセットされるときに影響を受けることがある要素です。 `<input>`, `<output>`, `<select>` `<textarea>` を含みます。

二次カテゴリー
-------

要素の二次分類がいくつかあり、知っておくと便利です。

### スクリプト対応要素

**スクリプト対応要素 (Script-supporting elements)** は、文書の出力に直接貢献はしない要素です。代わりに、スクリプトコードを直接含んだり、スクリプトで使われるデータを定義したりして、スクリプトへの対応のために働きます。

スクリプト対応要素は以下の通りです。

* `<script>`
* `<template>`
透過的コンテンツモデル
-----------

要素が透過的コンテンツモデル (transparent content model) を持っている場合、透過的な要素が削除されたり、子要素で置き換えられたりしても、それ自身のコンテンツが必ず妥当な HTML 5 として構造化されているものです。

例えば、 `<del>` と `<ins>` 要素は透過的です。

```html
<p>
  私たちはこれらの真実を<del><em>不可侵なものでありかつ否定できない</em></del
 ><ins>自明の</ins>ものであるとし続けた。
</p>
```

これらの要素が削除されたとしても、この断片は（文章としては正しくありませんが）妥当な HTML です。

```html
<p>
  私たちはこれらの真実を<em>不可侵なものでありかつ否定できない</em>自明のものであるとし続けた。
</p>
```

その他のコンテンツモデル
------------

区分化ルート (sectioning root)。


マイクロデータ - HTML: ハイパーテキストマークアップ言語

マイクロデータ
=======

マイクロデータは WHATWG HTML 標準の一部であり、ウェブページ上の既存のコンテンツ内でメタデータをネストするために使用されます。検索エンジンやウェブクローラーは、ウェブページからマイクロデータを抽出して処理し、ユーザーへ高度な閲覧操作を提供するために使用することができます。検索エンジンは、ウェブページ上の情報を理解し、ユーザーにより関連性の高い結果を提供することを可能にするため、この構造化されたデータを直接利用できることから大きな利益を得ます。マイクロデータは、値をプロパティに割り当てるためにアイテムと名前と値の組み合わせを記述するためのサポート語彙を使用します。マイクロデータは、機械可読なタグとともに HTML 要素に注釈する試みで、古い RDFa やマイクロフォーマットの同様のアプローチよりも簡単な方法を提供します。

高い水準では、マイクロデータは名前と値の組み合わせのグループで構成されます。このグループはアイテムと呼ばれ、それぞれの名前と値の組み合わせがプロパティとなります。アイテムとプロパティは標準の要素によって表されます。

* アイテムを作成するために、 **itemscope** 属性を使用します。
* アイテムにプロパティを追加するために、 **itemprop** 属性がアイテムの子孫の 1 つで使用されます。
語彙
--

Google をはじめとする主要な検索エンジンは、構造化されたデータ Schema.org に対応しています。この語彙は、タイプ名やプロパティ名の標準セットを定義しています。たとえば、 Schema.org Music Event はコンサートを表し、 startDate と location プロパティをコンサートの主要な詳細を指定するために併用します。この場合、 Schema.org Music Event は itemtype によって使用される URL となり、 startDate と location は Schema.org Music Event が定義する itemprop になります。

**メモ:** itemtype 属性の詳細は https://schema.org/Thing にあります。

マイクロデータの語彙は、アイテムのセマンティックスや意味を提供します。ウェブ開発者は専用の語彙を設計したり、 schema.org のような広く使用されている語彙を利用したりすることができます。よく使用されるマークアップ語彙のコレクションは、 Schema.org によって提供されます。

よく使用される語彙には、次のようなものがあります。

* 創作物: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries
* 埋め込み非テキストオブジェクト: AudioObject, ImageObject, VideoObject
* Event
* 健康と医療型: MedicalEntity の下の健康と医療型に注目してください
* Organization
* Person
* Place, LocalBusiness, Restaurant
* Product, Offer, AggregateOffer
* Review, AggregateRating
* Action
* Thing
* Intangible

Google、Microsoft、Yahoo! のような主要な検索エンジンの管理者は、検索結果を改良するために schema.org を頼りにしています。目的によってはその場で作成した語彙が適切です。それ以外の目的には、語彙を設計する必要があります。可能であれば、著者は簡単にコンテンツを再利用できるように、既存の語彙を再利用することを勧めます。

ローカライズ
------

ある場合に、特定の領域をカバーする検索エンジンはマイクロデータの地域に固有な拡張を提供するかもしれません。例えば、ロシアのメジャーな検索エンジンである Yandex は、 hCard (会社の連絡先情報)、 hRecipe (料理のレシピ)、 hReview (マーケットのレビュー)、 hProduct (製品データ) のようなマイクロフォーマットに対応しており、用語の定義や百科事典の記事について独自フォーマットを提供しています。この拡張は、キリル文字とラテン文字の間の文字変換の問題を解決するためになされました。スキーマ語彙の追加マーキングパラメータの実装により、ロシア語のウェブページにおける情報のインデックス化は、かなりの成功を収めました。

グローバル属性
-------

itemid – 一意の、アイテムのグローバル識別子。

itemprop – アイテムにプロパティを追加するために用います。すべての HTML 要素は、 itemprop が名前と値のペアから構成する、 itemprop 属性を指定することができます。

itemref – `itemscope` 属性をもつ要素の子孫でないプロパティは、itemref を用いてアイテムと関連付けることができます。 itemref は、要素の id (`itemid` ではなく) のリストに文書の他の場所で追加のプロパティを提供します。

itemscope – itemscope は、ブロックに含まれる HTML が特定のアイテムであることを記述するために itemtype と共に (通常) 動作します。 itemscope はアイテムを作成し、アイテムに関連付けられる itemtype の範囲を定義します。 itemtype は、アイテムとアイテムのプロパティのコンテキストを説明する schema.org のような) 語彙の妥当なURLとなります。

itemtype – データ構造で itemprop の語彙 (アイテムのプロパティ) を定義するために使用される語彙の URL を指定します。itemscope – は、 itemtype によって設定される語彙がアクティブとなるデータ構造の範囲を設定するために使用されます。

例
-

### HTML

```html
<div itemscope itemtype="https://schema.org/SoftwareApplication">
  <span itemprop="name">Angry Birds</span> - REQUIRES
  <span itemprop="operatingSystem">ANDROID</span><br />
  <link
 itemprop="applicationCategory"
 href="https://schema.org/GameApplication" />

  <div
 itemprop="aggregateRating"
 itemscope
 itemtype="https://schema.org/AggregateRating">
    RATING:
    <span itemprop="ratingValue">4.6</span> (
    <span itemprop="ratingCount">8864</span> ratings )
  </div>

  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    Price: $<span itemprop="price">1.00</span>
    <meta itemprop="priceCurrency" content="USD" />
  </div>
</div>
```

### 構造化データ

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype | SoftwareApplication (https://schema.org/SoftwareApplication) |
| itemprop | name | Angry Birds |
| itemprop | operatingSystem | ANDROID |
| itemprop | applicationCategory | GameApplication (https://schema.org/GameApplication) |
| itemscope | itemprop[itemtype] | aggregateRating [AggregateRating] |
| itemprop | ratingValue | 4.6 |
| itemprop | ratingCount | 8864 |
| itemscope | itemprop[itemtype] | offers [Offer] |
| itemprop | price | 1.00 |
| itemprop | priceCurrency | USD |

### 結果

**メモ:** HTML からマイクロデータを抽出するための手軽なツールとして、 Google の構造化データテストツールがあります。上に示した HTML 上で試してみてください。

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

Firefox 16 で対応しました。 Firefox 49 で削除されました。

### 関連情報

* グローバル属性


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

hidden
======

**`hidden`** グローバル属性は 列挙型属性であり、ブラウザーがその要素の中身を表示すべきではないことを示します。例えば、
 要素がまだ、あるいはもはや*関連性*がないことを示す論理型属性です。例えば、ログイン処理が完了するまで使用できないページの要素を非表示にするために使用することができます。

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

解説
--

`hidden` 属性は、要素の中身をユーザーに表示しないことを示すために使用されます。この属性は以下の値のいずれかを取ることができます。

* 空文字列
* キーワード `hidden`
* キーワード `until-found`

hidden` 属性には、 *hidden* 状態と *hidden until found* 状態の2つの状態があります。

* 空文字列、またはキーワード `hidden` は、要素を *hidden* 状態に設定します。さらに、無効な値を指定すると、その要素は *hidden* 状態に設定されます。
* キーワード `until-found` は、要素を *hidden until found* 状態にします。

従って、以下のものはすべて、要素を *hidden* の状態に設定します。

```html
<span hidden>I'm hidden</span>
<span hidden="hidden">I'm also hidden</span>
<span hidden="something else">I'm hidden too!</span>
```

以下のものは、要素を *hidden until found* の状態に設定します。

```html
<span hidden="until-found">I'm hidden until found</span>
```

`hidden` 属性は、 1 つの表現方法からのみコンテンツを隠す目的で使用してはいけません。何かが hidden とマークされている場合、それは、例えばスクリーンリーダーを含むすべての表現方法から隠されます。

隠された要素は隠されていない要素からリンクすべきではありません。隠された要素の子孫である要素はまだアクティブであり、スクリプト要素はまだ実行でき、フォーム要素はまだ送信できることを意味します。しかし、要素とスクリプトは、他の文脈で隠された要素を参照することがあります。

しかし、ARIA の `aria-describedby` 属性を使用して、それ自身が隠されている記述を参照することは問題ないでしょう。記述を隠すことは、それ自身は有用でないことを意味しますが、それらが記述された要素から参照されるという固有の文脈で有用であるように書くことができます。

同様に、`hidden` 属性のついたキャンバス要素はスクリプト化されたグラフィックエンジンによってオフスクリーンバッファーとして使用することができ、フォームコントロールはその form 属性を使用して隠されたフォーム要素を参照することができます。

hidden 要素の子孫である要素はまだ有効であり、スクリプト要素はまだ実行でき、フォーム要素はまだ送信することができることを意味しています。

### hidden 状態

*hidden* 状態は、その要素が現在ページに関連していないこと、または、ページの他の部分で再利用するためのコンテンツを宣言するために使用されており、ユーザーに直接表示すべきではないことを示しています。ブラウザーは *hidden* 状態にある要素を描画しません。

ウェブブラウザーは `display: none` を使用して *hidden* 状態を実装することができ、その場合、その要素はページレイアウトに参加しません。これはまた、*hidden* 状態の要素で CSS の `display` プロパティの値を変更すると、その状態が上書きされるということでもあります。例えば、`display: block` とスタイル設定された要素は、`hidden`属性があるにもかかわらず、表示されることになります。

### hidden until found 状態

*hidden until found* の状態では、要素は非表示になりますが、ブラウザーの「ページ内検索」機能やフラグメントナビゲーションでは、そのコンテンツにアクセスできます。これらの機能によって *hidden until found* サブツリーの要素にスクロールが発生した場合、ブラウザーは次のようになります。

* 非表示の要素に `beforematch` イベントが発生します
* その要素から `hidden` 属性を取り除きます
* 要素までスクロールします

これにより、開発者はコンテンツのセクションを折りたたみながら、フラグメントナビゲーションで検索およびアクセスできるようにすることができます。

ブラウザーは通常 `content-visibility: hidden` を使用して *hidden until found* を実装していることに注意してください。これは、*hidden* 状態の要素とは異なり、*hidden until found* 状態の要素には生成されたボックスがある、ということを意味しています。

* この要素はページレイアウトに参加します
* 要素の margin, borders, padding, background がレンダリングされます

また、その要素を明らかにするためには、レイアウトコンテインメントの影響を受けている必要があります。これは、*hidden until found* 状態の要素の `display` 値が `none`、`contents`、`inline` の何れかである場合、その要素はページまたはフラグメントナビゲーションでの検索によって明らかにされないことを意味しています。

例
-

### until-found の使用

この例には次のものがあります。

* 3 つの `<div>` 要素があります。最初のものと 3 つ目は非表示になっていませんが、2 つ目には `hidden="until-found"` と `id="until-found-box"` 属性があります。
* ターゲットが `"until-found-box"` フラグメントであるリンクです。

hidden until found 要素には、赤の点線枠と灰色の背景があります。

また、hidden until found 要素で発行される `beforematch` イベントを待ち受けるいくらかの JavaScript もあります。このイベントハンドラーはボックスのテキストコンテンツを変更します。

#### HTML

```html
<a href="#until-found-box">非表示コンテンツへ移動</a>

<div>隠されていません</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>
<div>隠されていません</div>
```

```
<button id="reset">リセット</button>
```

#### CSS

```css
div {
  height: 40px;
  width: 300px;
  border: 5px dashed black;
  margin: 1rem 0;
  padding: 1rem;
  font-size: 2rem;
}

div#until-found-box {
  color: red;
  border: 5px dotted red;
  background-color: lightgray;
}
```

```
#until-found-box {
  scroll-margin-top: 200px;
}
```

#### JavaScript

```js
const untilFound = document.querySelector("#until-found-box");
untilFound.addEventListener(
  "beforematch",
  () => (untilFound.textContent = "正体がバレた!"),
);
```

```
document.querySelector("#reset").addEventListener("click", () => {
  document.location.hash = "";
  document.location.reload();
});
```

#### 結果

要素のコンテンツは非表示ですが、要素にはボックスが生成され、レイアウト内の空間を占め、背景と境界が描画されていることに注意してください。

［非表示コンテンツへ移動］ボタンをクリックすると、hidden until found の要素へ移動します。`beforematch` イベントが発行され、テキストコンテンツが更新され、要素のコンテンツが表示されます。

この例を再度実行するには、［リセット］をクリックしてください。

仕様書
---

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

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

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

関連情報
----

* `HTMLElement.hidden`
* すべての グローバル属性。
* `aria-hidden` (en-US) 属性
* `beforematch` イベント


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

translate
=========

**`translate`** グローバル属性 は列挙型属性で、要素の*翻訳可能な属性*の値や `Text` 子ノードを、ページをローカライズする際に翻訳するべきか、あるいは変更せずにおくかを指定します。

以下の値を使用することができます。

* 空文字列または `yes`: ページをローカライズする際に翻訳すべきであることを示します。
* `no`: 要素を翻訳してはならないことを示します。

すべてのブラウザーがこの属性を認識しているわけではありませんが、 Google 翻訳のような自動翻訳システムがこれを尊重しており、人間の翻訳者によって使用されるツールによっても尊重される可能性があります。そのため、ウェブ制作者がこの属性を使用して、翻訳されるべきではないコンテンツをマークすることが重要です。

例
-

この例では `translate` 属性を使用して、翻訳ツールにフッターの企業ブランド名を翻訳しないように依頼しています。

```html
<footer>
  <small>© 2020 <span translate="no">BrandName</span></small>
</footer>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-translate |

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

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

関連情報
----

* すべてのグローバル属性。
* `HTMLElement.translate` (en-US) プロパティは、この属性を反映します。
* Using HTML's translate attribute.
* HTML の `lang` 属性


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

class
=====

**`class`** グローバル属性 は、要素のクラスを空白区切りで並べたリストで、大文字小文字を区別します。クラスは CSS の クラスセレクター や JavaScript の DOM メソッド `document.getElementsByClassName` といった関数により、特定の要素を選択したり特定の要素にアクセスしたりすることを可能にします。

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

仕様書ではクラス名の要件を示していませんが、ウェブ開発者は要素の外見ではなく、意味論的な目的を表す名前を使用することが推奨されます。例えば、あるクラスの要素が *イタリック体* で表示されるとしても、クラス名は *attribute* の方が *italics* よりも属性を説明します。意味論的な名前は、ページの外見を変更した場合でも論理的であり続けます。

仕様書
---

| Specification |
| --- |
| HTML Standard # global-attributes:classes-2 |

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

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

関連情報
----

* すべてのグローバル属性
* `element.className`
* `element.classList`
* CSS 入門


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

lang
====

**`lang`** グローバル属性は、要素に言語を定義するのに役立ちます。 編集不可能な要素の場合は書かれている言語、または編集可能な要素の場合はユーザーが書くべき言語です。この属性は、RFC 5646: Tags for Identifying Languages (also known as BCP 47)で定義されている形式で、単一の「言語タグ」を格納しています。

**メモ:** `lang` の既定値は `unknown` であるため、この属性には常に適切な値を指定することが推奨されます。

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

属性値が空文字列 (`lang=""`) の場合、言語は *unknown* に設定されます。言語タグが BCP47 に準拠していない場合は、*invalid* に設定されます。

**lang** 属性が設定されていても、**xml:lang** 属性が優先され、考慮されない場合があります。

CSS の `:lang` 擬似クラスでは、無効な 2 つの言語名は、その名前が異なれば異なるものになります。つまり、`:lang(es)` は `lang="es-ES"` と `lang="es-419"` の両方に一致しますが、 `:lang(xyzzy)` は `lang="xyzzy-Zorp!"` には一致しません。

言語タグと構文
-------

BCP47 の完全な構文は、細かい特定の言語の方言まで示せるようにとても複雑になっていますが、ほとんどの使い方ではずっと単純です。

言語タグはハイフンで区切られた*言語サブタグ*より成り、それぞれのサブタグは言語の特定の特性を示します。３つのサブタグがもっともよく使われます。

言語サブタグ

必須です。基本言語を定義する２～３文字のコードで、ふつうすべて小文字で書かれます。例えば、英語の言語コードは `en` であり、バデシ語のコードは `bdz` です。

文字体系サブタグ

任意です。このサブタグは、言語で使われる文字体系を定義し、常に４文字の長さで、最初の文字は大文字です。例えば、ブライユ（点字）のフランス語は `fr-Brail` であり、 `ja-Kana` はカタカナで書かれた日本語です。言語がとても一般的な方法で記述される場合、例えば英語でアルファベットを使う場合などは、このサブタグを使用する必要はありません。

地域サブタグ

任意です。このサブタグは基本言語の特定の場所における方言を定義し、国コードを示す大文字 2 文字または地域を示す 3 桁の数字です。例えば、`es-ES` はスペインで使われているスペイン語であり、`es-013` は中央アメリカで使われているスペイン語です。「国際スペイン語」は単なる `es` になります。

両方がある場合、文字体系サブタグは地域サブタグよりも先に置きます。 — `ru-Cyrl-BY` はベラルーシで使われているキリル文字によるロシア語です。

言語の正しいサブタグコードを探すには、 the Language Subtag Lookup を見てみてください。

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

WCAG 成功基準 3.1.1 では、ページの言語が「プログラムによって決定される」方法で（つまり、**`lang`** 属性を介して）指定することを**要求しています**。

WCAG 成功基準 3.1.2 は、異なる言語の**部分**があるページには、それらの部分の言語も指定することを要求しています。ここでも、**`lang`** 属性がそのための正しいメカニズムです。

これらの要求の目的は、主にスクリーンリーダーなどの支援技術が正しい発音を呼び出すことができるようにすることです。

例えば、このサイト（MDN）の言語メニューには、各項目に **`lang`** 属性が記載されています。

```html
<div class="dropdown-container language-menu">
  <button
 id="header-language-menu"
 type="button"
 class="dropdown-menu-label"
 aria-haspopup="true"
 aria-owns="language-menu"
 aria-label="Current language is English. Choose your preferred language.">
    English
    <span class="dropdown-arrow-down" aria-hidden="true">▼</span>
  </button>
  <ul
 id="language-menu"
 class="dropdown-menu-items right show"
 aria-expanded="true"
 role="menu">
    <li lang="ca" role="menuitem">
      <a href="/ca/docs/Web/HTML/Global\_attributes/lang" title="Catalan">
        <bdi>Català</bdi>
      </a>
    </li>
    <li lang="de" role="menuitem">
      <a href="/de/docs/Web/HTML/Globale\_Attribute/lang" title="German">
        <bdi>Deutsch</bdi>
      </a>
    </li>
    <li lang="es" role="menuitem">
      <a href="/es/docs/Web/HTML/Atributos\_Globales/lang" title="Spanish">
        <bdi>Español</bdi>
      </a>
    </li>
    <li lang="fr" role="menuitem">
      <a href="/fr/docs/Web/HTML/Attributs\_universels/lang" title="French">
        <bdi>Français</bdi>
      </a>
    </li>
    <li lang="ja" role="menuitem">
      <a href="/ja/docs/Web/HTML/Global\_attributes/lang" title="Japanese">
        <bdi>日本語</bdi>
      </a>
    </li>
    <li lang="ko" role="menuitem">
      <a href="/ko/docs/Web/HTML/Global\_attributes/lang" title="Korean">
        <bdi>한국어</bdi>
      </a>
    </li>
    <li lang="pt-BR" role="menuitem">
      <a
 href="/pt-BR/docs/Web/HTML/Global\_attributes/lang"
 title="Portuguese (Brazilian)">
        <bdi>Português (do Brasil)</bdi>
      </a>
    </li>
    <li lang="ru" role="menuitem">
      <a href="/ru/docs/Web/HTML/Global\_attributes/lang" title="Russian">
        <bdi>Русский</bdi>
      </a>
    </li>
    <li lang="uk" role="menuitem">
      <a
 href="/uk/docs/Web/HTML/%D0%97%D0%B0%D0%B3%D0%B0%D0%BB%D1%8C%D0%BD%D1%96\_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D0%B8/lang"
 title="Ukrainian">
        <bdi>Українська</bdi>
      </a>
    </li>
    <li lang="zh-CN" role="menuitem">
      <a
 href="/zh-CN/docs/Web/HTML/Global\_attributes/lang"
 title="Chinese (Simplified)">
        <bdi>中文 (简体)</bdi>
      </a>
    </li>
    <li>
      <a
 href="/en-US/docs/Web/HTML/Global\_attributes/lang$locales"
 rel="nofollow"
 id="translations-add">
        Add a translation
      </a>
    </li>
  </ul>
</div>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-lang |

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

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

関連情報
----

* すべての グローバル属性
* HTTP の `Content-Language` ヘッダー
* HTML の `translate` 属性


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

style
=====

**`style`** グローバル属性は、要素に適用する CSS スタイル宣言を指定します。なお、スタイルは別のファイルで定義することが推奨されます。この属性と `<style>` 要素の主な用途は、例えばテストのために、すばやくスタイルを適用できるようにすることです。

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

**メモ:** この属性は、意味的な情報を伝えるために使用してはいけません。すべてのスタイルが削除されたとしても、ページは依然として意味的にが正しくあるべきです。特に、無関係な情報を隠すために使用しないようにしてください。これには `hidden` 属性を使用してください。

仕様書
---

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

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

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

関連情報
----

* すべてのグローバル属性


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

enterkeyhint
============

**`enterkeyhint`** はグローバル属性で、属性であり、仮想キーボードの [Enter] キーにどのようなアクションラベル（またはアイコン）を表示するかを定義する列挙型属性です。

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

解説
--

フォームコントロール（`<textarea>` や `<input>` 要素など）や `contenteditable` を使用している要素は、
 `inputmode` 属性を指定して、どのような仮想キーボードを使用するかを制御することができます。さらに使い勝手を向上させるために、 [Enter] キーをどのようにラベル付けするか （またはどのアイコンを表示するか） を示す `enterkeyhint` 属性を指定することで、[Enter] キーを特別にカスタマイズすることができます。[Enter] キーは通常、ユーザーが次に何をすべきかを表します。よくある操作としては、テキストの送信、改行の挿入、検索などがあります。

もし `enterkeyhint` 属性が指定されなければ、ユーザーエージェントは `inputmode`, `type`, `pattern` 属性から文脈に合った情報を得て、適した [Enter] キーのラベル（またはアイコン）を表示するかもしれません。

### 値

`enterkeyhint` 属性は列挙型属性で、以下の値のみを受け入れることができます。

| 値 | 説明 | ラベルの例（ユーザーエージェントとユーザーの言語に依存） |
| --- | --- | --- |
| `enterkeyhint="enter"` | ふつうは改行を挿入します。 | `↵` |
| `enterkeyhint="done"` | 通常、それ以上のことは入力できず、インプットメソッドエディター (IME) が閉じられることを意味します。 | `完了` |
| `enterkeyhint="go"` | 一般的に、ユーザーが入力したテキストのターゲットに移動することを意味しています。 | `開く` |
| `enterkeyhint="next"` | 通常、ユーザーをテキストを受け入れる次のフィールドへ導きます。 | `次へ` |
| `enterkeyhint="previous"` | 通常、ユーザーをテキストを受け入れる前のフィールドへ導きます。 | `前へ` |
| `enterkeyhint="search"` | 通常、ユーザーを入力したテキストを検索した結果へ導きます。 | `検索` |
| `enterkeyhint="send"` | 通常、このテキストをターゲットに配信します。 | `送信` |

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-enterkeyhint |

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

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

関連情報
----

* `HTMLElement.enterKeyHint` プロパティはこの属性を反映します
* `inputmode` グローバル属性
* `contenteditable` グローバル属性
* `type` および
 `pattern` 属性（`<input>` 要素）


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

autofocus
=========

**`autofocus`** グローバル属性は論理属性で、ページ読み込み時、またはその要素が属する `<dialog>` が表示されたときに、その要素にフォーカスを当てるべきことを示す属性です。

```html
<input name="q" autofocus />
```

文書またはダイアログ内の複数の要素に autofocus 属性を設定することはできません。複数の要素に適用された場合、最初のものにフォーカスが当たります。

**メモ:** `autofocus` 属性は、フォームコントロールだけでなく、すべての要素に適用されます。例えば、これは contenteditable の領域で使用されるかもしれません。

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

フォームコントロールに自動的にフォーカスを合わせると、画面読み上げ技術を使用する視覚障碍者や認知障碍者を混乱させる可能性があります。`autofocus` が割り当てられている場合、スクリーンリーダーは事前に警告することなく、ユーザーをフォームコントロールに「テレポート」します。

`autofocus` 属性を使用する際には、アクセシビリティに十分配慮してください。コントロールに自動的にフォーカスが当たると、読み込む際にページのスクロールが発生する可能性があります。また、タッチ端末によっては、フォーカスが動的なキーボードを表示させることもあります。スクリーンリーダーはフォーカスを受けたフォームコントロールのラベルをアナウンスしますが、ラベルの前には何もアナウンスしないので、小さな機器にいる目の見えるユーザーは、前のコンテンツによって作成されたコンテキストを同様に見逃してしまうでしょう。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-fe-autofocus |

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

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


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

popover
=======

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

**`popover`** はグローバル属性で、要素をポップオーバー要素として示すために使われます。

ポップオーバー要素は、呼び出し／制御要素（すなわち `<button>` または `<input type="button">` に `popovertarget` 属性が付いたもの）、または `HTMLElement.showPopover()` の呼び出しによって開かれるまで、`display: none` で非表示になっています。

開かれると、ポップオーバー要素は、最上位レイヤー (en-US)内の他のすべての要素の上に現れ、親要素の `position` や `overflow` のスタイル付けの影響を受けません。

使い方についての詳しい情報は、ポップオーバー API ランディングページを参照してください。

例
-

基本的な例
-----

以下は、ポップオーバー要素を開くためのボタンを描画するものです。

```html
<button popovertarget="my-popover">ポップオーバーを開く</button>

<div popover id="my-popover">私から皆さんへ、こんにちは！</div>
```

**メモ:** MDN にあるポップオーバーの例の完全な例にアクセスするには、ポップオーバー API 例のランディングページを参照してください。

仕様書
---

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

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

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

関連情報
----

* ポップオーバー API


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

nonce
=====

**`nonce`** グローバル属性は、
 これは暗号化ノンス ("number used once") を定義するコンテンツ属性で、コンテンツセキュリティポリシー が指定された要素に対してフェッチの実行を許可するかどうかを決定するために使用することができます。

解説
--

`nonce` 属性は、特定の要素、例えば特定のインラインスクリプトやスタイル要素を許可リスト化するのに有益なものです。
 CSP の `unsafe-inline` ディレクティブの使用を避けることができ、すべてのインラインスクリプトまたはスタイルを許可リスト化することができます。

**メモ:** 安全でないインラインのスクリプトや スタイルのコンテンツを使用しない方法がない場合のみ、 `nonce` を使用してください。もし `nonce` が必要ないのであれば、使用しないでください。スクリプトが静的なものであれば、代わりに CSP ハッシュを使用することもできます。
 （安全でないインラインスクリプトの使用上の注意を参照してください。）
 常に CSP の保護を最大限に活用し、ノンスや安全でないインラインスクリプトを可能な限り避けるようにしてください。

### <script> 要素を許可リスト化するためにノンスを使用

ノンス機構を使用したインラインスクリプトを許可するためには、いくつかの手順があります。

#### 値の生成

ウェブサーバーから、暗号的に安全な乱数発生器を用いて、少なくとも 128 ビットのデータをランダムに Base64 エンコードした文字列を生成します。ノンスはページを読み込むたびに違った形で生成する必要があります（ノンスは 1 回だけ）。例えば node.js で、次のように行います。

```js
const crypto = require("crypto");
crypto.randomBytes(16).toString("base64");
// '8IBTHwOdqNKAWeKl7plt8g=='
```

#### インラインスクリプトの許可リスト化

バックエンドのコードで生成されたノンスは、これで許可リストにしたいインラインスクリプトに使用されます。

```html
<script nonce="8IBTHwOdqNKAWeKl7plt8g==">
 // …
</script>
```

#### ノンス付きの CSP ヘッダーの送信

最後に、ノンスの値を `Content-Security-Policy` ヘッダーで送る必要があります（`nonce-` を前に付ける）。

```http
Content-Security-Policy: script-src 'nonce-8IBTHwOdqNKAWeKl7plt8g=='
```

### ノンスへのアクセスとノンスの隠蔽

セキュリティ上の理由から、コンテンツ属性 `nonce` は隠蔽されます（空文字列が返されます）。

```js
script.getAttribute("nonce"); // 空文字列を返す
```

`nonce` プロパティは、ノンスにアクセスするための唯一の方法です。

```js
script.nonce; // ノンスの値を返す
```

ノンスの隠蔽は、このようにコンテンツ属性からデータを取得するメカニズムによって、攻撃者がノンスデータを流出させることを防ぐのに役立ちます。

```css
script[nonce~="whatever"] {
  background: url("https://evil.com/nonce?whatever");
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-nonce |

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

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

関連情報
----

* `HTMLElement.nonce`
* コンテンツセキュリティポリシー
* CSP: `script-src`


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

accesskey
=========

**`accesskey`** グローバル属性は、現在の要素のショートカットキーを生成するためのヒントを与えます。この属性は空白で区切った表示可能な文字（キーボードから生成できるアクセント付き文字やその他の文字を含む）から成ります。

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

**メモ:** WHATWG の仕様書では、空白区切りの複数の文字を指定することができ、ブラウザーは対応する最初の一つを使用するとしています。しかし、これは多くのブラウザーでは動作しません。 IE や Edge は、他のコマンドと競合がない問題なく使用することができる最初の 1 つを使用します。

アクセスキーを有効にする方法は、ブラウザーやプラットフォームによって異なります。

|  | Windows | Linux | Mac |
| --- | --- | --- | --- |
| Firefox | `Alt` + `Shift` + `*key*` |
 Firefox 57 以降では `Control` + `Option` +
 `*key*` または `Control` + `Alt` +
 `*key*`Firefox 14 以降では `Control` + `Alt` +
 `*key*`Firefox 13 以前では `Control` + `*key*` |
| Edge | N/A | `Control` + `Option` + `*key*``Control` + `Option` + `Shift` +
 `*key*` |
| Google Chrome | `Alt` + `*key*` |
| Safari | N/A |
| Opera 15+ | `Alt` + `*key*` | `Control` + `Alt` + `*key*` |
| Opera 12 | `Shift` + `Esc` で、accesskey
 でアクセスできるコンテンツの一覧を開きます。そして
 `*key*` を押すと、該当項目を選択できます。
  |

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

`accesskey` 属性は、ブラウザーの対応が貧弱であることに加え、数々の考慮事項があります。

* `accesskey` の値はシステムやブラウザーのショートカットキーや支援技術の機能と競合する可能性があります。あるオペレーティングシステム、支援技術、ブラウザーの組み合わせで動作しても、他の組み合わせでは動作しない可能性があります。
* 特に国際化を考慮している場合、特定の `accesskey` の値が特定のキーボードに存在しないことがあります。そのため、特定の言語において更なる問題が発生する可能性があります。
* 数字に依存した `accesskey` の値は、認知障碍を持つ人に混乱を招く可能性があります。数字には、起動する機能と論理的な関連性がありません。
* `accesskey` が存在することをユーザーに通知することで、ユーザーはその機能を認識します。システムがその機能について知らされる方法がない場合は、 `accesskey` が誤って有効になる可能性があります。

これらの問題のため、一般用途のウェブサイトやウェブアプリの多くでは、 `accesskey` を使用しないよう一般的にアドバイスされています。

* WebAIM: Keyboard Accessibility - Accesskey
仕様書
---

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

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

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

関連情報
----

* `HTMLElement.accessKey`
* `HTMLElement.accessKeyLabel`
* すべてのグローバル属性
* `aria-keyshortcuts`


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

itemid
======

**`itemid`** はグローバル属性で、アイテムの固有でグローバルな識別子の形でマイクロデータを提供します。

`itemid` 属性は、`itemscope` と `itemtype` の両属性のある要素にだけ指定することができます。また `itemid` は、グローバル識別子に対応する語彙を参照または定義する `itemtype` に関係した `itemscope` 属性を持つ要素でのみ使用することができます。

`itemtype` のグローバル識別子の正確な意味は、それを特定する語彙の中で識別子の定義が提供されます。語彙は同じグローバル識別子を持つ複数のアイテムが共存できるかどうか、もしそうであれば、同じ識別子を持つアイテムがどのように扱われるかを定義します。

**メモ:** WHATWG の定義では、 `itemid` が URL でなければならないと指定しています。しかし、以下の例では URN も使用されることを明らかに示しています。この矛盾はマイクロデータ仕様の不完全性を反映したものかもしれません。

例
-

### 本のための構造化データの表現

この例では、マイクロ属性を用いて、以下の構造化データを表現しています。

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype: itemid | https://schema.org/Book: urn:isbn:0-374-22848-5 |
| itemprop | title | Owls of the Eastern Ice |
| itemprop | author | Jonathan C Slaght |
| itemprop | datePublished | 2020-08-04 |

#### HTML

```html
<dl
 itemscope
 itemtype="https://schema.org/Book"
 itemid="urn:isbn:0-374-22848-5<">
  <dt>Title</dt>
  <dd itemprop="title">Owls of the Eastern Ice</dd>
  <dt>Author</dt>
  <dd itemprop="author">Jonathan C Slaght</dd>
  <dt>Publication date</dt>
  <dd>
    <time itemprop="datePublished" datetime="2020-08-04">August 4 2020</time>
  </dd>
</dl>
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-itemid |

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

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

関連情報
----

* すべてのグローバル属性
* その他のマイクロデータに関するグローバル属性:
    + `itemprop`
    + `itemref`
    + `itemscope`
    + `itemtype`


data-* - HTML: ハイパーテキストマークアップ言語

data-\*
=======

**`data-*`** グローバル属性 は**カスタムデータ属性**と呼ばれる属性の組を作り、HTML と、スクリプトによる DOM 表現との間で、固有の情報を交換できるようにします。

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

 すべてのカスタムデータは、属性を設定した要素の `HTMLElement` インターフェイスを通して使用できます。 `HTMLElement.dataset` プロパティがそれらへのアクセス手段を提供します。
 `*` は、 XML 名の作成規則に加えて以下の制約に従う名前に置き換えることができます。

* 大文字小文字にかかわらず、名前を `xml` で始めてはならない。
* 名前にコロン (`:`) を含めてはならない。
* 名前に大文字を含めてはならない。

なお、 `HTMLElement.dataset` プロパティは `DOMStringMap` であり、またカスタムデータ属性名のハイフン (`U+002D`) はその次の文字を大文字化したもの（キャメルケース）に変換されるので、 *data-test-value* は `HTMLElement.dataset.testValue` （または `HTMLElement.dataset["testValue"]`）としてアクセスできます。

### 使用方法

`data-*` 属性を追加すると通常の HTML 要素でも、より複雑で強力なプログラムオブジェクトになります。例えばゲームで宇宙船の "スプライト*"* を、単純な `<img>` 要素に `class` 属性といくつかの `data-*` 属性を設定したもので表すことができるでしょう。

```html
<img
 class="spaceship cruiserX3"
 src="shipX3.png"
 data-ship-id="324"
 data-weapons="laserI laserII"
 data-shields="72%"
 data-x="414354"
 data-y="85160"
 data-z="31940"
 onclick="spaceships[this.dataset.shipId].blasted()" />
```

もっと深い HTML のデータ属性の使用については、データ属性の使用を参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-data-\* |

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

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

関連情報
----

* すべてのグローバル属性
* これらの値を読み書きできる `HTMLElement.dataset` プロパティ
* データ属性の使用


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

inputmode
=========

**`inputmode`** はグローバル属性で、ユーザーが要素やその内容を編集する際に入力されるデータの型のヒントとなる列挙型属性です。
 これにより、ブラウザーは適切な仮想キーボードを表示することができます。

これは主に `<input>` 要素で使用されますが、 `contenteditable` モードの任意の要素で使用することができます。

重要なことは、 `inputmode` 属性は入力に対していかなる有効性の要求も発生させないということです。入力が特定のデータ型に適合することを要求するには、適切な `<input>` 要素型 を選んでください。 `<input>` 型を選ぶ際の特定の指針については、値の節を参照して下さい。

値
-

下記の値が存在します。

`none`

 仮想キーボードなし。
 ページが独自のキーボード入力を実装している場合のためのものです。

`text` (既定値)

ユーザーの現在のロケールにおける標準的な入力キーボードです。

`decimal`

 実数を入力するキーボードで、数字とユーザーのロケール上で適切な区切り文字 (ふつうは `.` または `,`) を含みます。
 負号キー (`-`) を表示するかどうかは端末によります。

`numeric`

 数字を入力するキーボードですが、数字の 0 から 9 までのみを必要とするものです。
 負号キーを表示するかどうかは端末によります。

`tel`

 電話番号を入力するテンキーで、 0 から 9 までの数字と、アスタリスク (`\*`)、ナンバー (`#`) キーがあります。
 電話番号を要求する入力欄は、ふつうは代わりに `<input type="tel">` を使用してください。

`search`

 検索入力に最適化された仮想キーボードです。
 例えば、 return/submit キーのラベルが「検索」になっていたり、他の最適化が行われている可能性もあります。
 検索クエリーを要求する入力欄は、ふつうは代わりに `<input type="search">` を使用してください。

`email`

 電子メールアドレスの入力に最適化された仮想キーボードです。
 ふつう `@` の文字を含むなどの他の最適化が行われます。
 メールアドレスの入力を要求する入力欄は、ふつうは代わりに `<input type="email">` を使用してください。

`url`

 URL の入力に最適化された仮想キーボードです。
 例えば `/` キーが目立つ場所に配置されているなどです。
 履歴へのアクセス機能などの拡張機能が含まれている場合もあります。
 URL の入力を要求する入力欄は、ふつうは代わりに `<input type="url">` を使用してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-inputmode |

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

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

関連情報
----

* すべてのグローバル属性
* `enterkeyhint` グローバル属性


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

itemref
=======

`itemscope` 属性を持つ要素の子孫でないプロパティは、グローバル属性 **`itemref`** を使用してアイテムに関連付けることができます。

`itemref` は文書内のどこかにある追加のプロパティがある要素の ID （`itemid` ではない）のリストを提供します。

`itemref` 属性は `itemscope` 属性が指定された要素のみで指定することができます。

**メモ:** `itemref` 属性は、マイクロデータのデータモデルの一部ではありません。注釈づけるデータが扱いやすいツリー構造に従っていないページにおいて、注釈を追加することを助けるための単なる構文構造です。例えば、テーブル内のデータをマークアップするために、セル内のプロパティを維持しながらそれぞれの列に別々なアイテムを定義することができます。

例
-

### バンドの構造化データの表現

この例では、マイクロデータ属性を使用して、次の構造化データを（JSON-LD 形式で）表現しています。

```json
{
  "@id": "amanda",
  "name": "Amanda",
  "band": {
    "@id": "b",
    "name": "Jazz Band",
    "size": 12
  }
}
```

#### HTML

```html
<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
  <p>Band: <span itemprop="name">Jazz Band</span></p>
  <p>Size: <span itemprop="size">12</span> players</p>
</div>
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-itemref |

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

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

関連情報
----

* 他のグローバル属性
* マイクロデータに関連する他のグローバル属性:
    + `itemid`
    + `itemprop`
    + `itemscope`
    + `itemtype`


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

contextmenu
===========

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

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

**`contextmenu`** グローバル属性 は、当該要素のコンテキストメニューとして使用する `<menu>` 要素の **id** です。

*コンテキストメニュー*は、右クリックなどユーザーの操作によって現れます。 HTML ではこのメニューをカスタマイズできます。以下は入れ子のメニューを含む実装例です。

例
-

### HTML

```html
<body contextmenu="share">
  <menu type="context" id="share">
    <menu label="share">
      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
    </menu>
  </menu>
  <ol>
    <li>
      この例のどこででも、コンテキストメニューの "share" メニューを使用して
      Twitter や Facebook に、このページを共有できます。
    </li>
    <li contextmenu="changeFont" id="fontSizing">
      このリスト項目で、コンテキストメニューの "Increase/Decrease font"
      を使用してテキストのサイズを変更できます。
    </li>
    <menu type="context" id="changeFont">
      <menuitem label="Increase Font" onclick="incFont()"></menuitem>
      <menuitem label="Decrease Font" onclick="decFont()"></menuitem>
    </menu>
    <li contextmenu="ChangeImage" id="changeImage">
      以下の画像で、コンテキストメニューから "Change Image" の
      アクションを実行できます。<br />
      <img
 src="promobutton\_mdn5.png"
 contextmenu="ChangeImage"
 id="promoButton"
 alt="Better CSS Docs for a better web" />
      <menu type="context" id="ChangeImage">
        <menuitem label="Change Image" onclick="changeImage()"></menuitem>
      </menu>
    </li>
  </ol>
</body>
```

### JavaScript

```js
function shareViaTwitter() {
  window.open(
    "https://twitter.com/intent/tweet?text=" +
      "Hurray! I am learning ContextMenu from MDN via Mozilla",
  );
}

function shareViaFacebook() {
  window.open(
    "https://facebook.com/sharer/sharer.php?u=" +
      "https://developer.mozilla.org/en/HTML/Element/Using\_HTML\_context\_menus",
  );
}

function incFont() {
  document.getElementById("fontSizing").style.fontSize = "larger";
}

function decFont() {
  document.getElementById("fontSizing").style.fontSize = "smaller";
}

function changeImage() {
  const index = Math.ceil(Math.random() \* 39 + 1);
  document.images[0].src = `${index}.png`;
}
```

### 結果

仕様書
---

contextmenu 属性は廃止され、すべてのブラウザーから削除される予定です。

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

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

関連情報
----

* すべての グローバル属性
* `HTMLElement.contextMenu`


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

title
=====

**`title`** グローバル属性は、要素に関するアドバイザリー情報を表すテキストを含みます。

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

`title` 属性の主な用途は、 `<iframe>` 要素の支援技術のためのラベル付けです。

`title` 属性は、データ表内のコントロールのラベル付けに使用することもできます。

`title` 属性は、`<link rel="stylesheet">` に追加すると、代替のスタイルシートを作成することができます。代替スタイルシートを `<link rel="alternate">` で定義する場合、この属性は必須であり、空でない文字列を設定する必要があります。

`<abbr>` の開始タグに `title` を記述する場合は、略語や頭字語の完全な展開形である必要があります。可能であれば、`title` を使用するのではなく、略語や頭字語を最初に使用する際に、 `<abbr>` を使用して略語をマークアップし、プレーンテキストで略語の展開形を提供してください。こうすることで、すべてのユーザーがその略語や頭字語が、どのような名前や用語を短縮しているのかを知ることができ、同時にユーザーエージェントには、コンテンツをどのように告知すればよいかのヒントを提供することができます。

`<input>` 要素にプログラム的に関連付けられたラベルを提供するために `title` を使用することができますが、これは良い習慣ではありません。代わりに `<label>` を使用してください。

複数行のタイトル
--------

`title` 属性は複数の行を含むことができます。それぞれの `U+000A LINE FEED` (`LF`) 文字が改行を表します。いくつか注意しなければならないのは、これが次のように 2 行にわたって描画されることです。

### HTML

```html
<p>
  Newlines in <code>title</code> should be taken into account, like
  <span
 title="This is a
multiline title"
 >example</span
 >.
</p>
```

### 結果

title 属性の継承
-----------

要素に `title` 属性がない場合、属性値は親ノードから継承され、さらにそれはその親ノードから継承されるというようになります。

この属性が空文字列に設定されると、その祖先の `title` が関係なく、この要素のツールチップとして使用するべきではないことを意味します。

### HTML

```html
<div title="CoolTip">
  <p>Hovering here will show "CoolTip".</p>
  <p title="">Hovering here will show nothing.</p>
</div>
```

### 結果

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

`title` 属性を使用することは、次のような人々にとって大きな問題になります。

* タッチのみの機器を使用している人々
* キーボードで操作している人々
* 読み上げソフトや拡大鏡などの支援技術で操作している人々
* 細かい運動制御障碍を経験している人々
* 認知障碍のある人

これは、ブラウザーが表示するページを追加支援技術が解釈することによる複合性について、ブラウザーの互換性に一貫性がないためです。ツールチップ効果が必要であれば、上記の閲覧方法でもアクセスできるもっとアクセシブルな技術を使用する方が効果的です。

* 3.2.5.1. The title attribute | W3C HTML 5.2: 3. Semantics, structure, and APIs of HTML documents
* Using the HTML title attribute – updated | The Paciello Group
* Tooltips & Toggletips - Inclusive Components
* The Trials and Tribulations of the Title Attribute - 24 Accessibility
仕様書
---

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

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

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

関連情報
----

* すべてのグローバル属性。
* `HTMLElement.title` は、この属性を反映します。


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

itemtype
========

グローバル属性 の **`itemtype`** は、データ構造の中で `itemprop` （アイテムのプロパティ）を定義するのに使われる語彙の URL を指定します。

`itemscope` は `itemtype` が有効になるデータ構造の語彙の対象範囲を設定するために使用します。

Google などの主要な検索エンジンは、構造化データのために schema.org の語彙に対応しています。この語彙は標準の型名とプロパティ名の組み合わせを定義しています。例えば、 `MusicEvent` はコンサートを示し、 `startDate` および `location` プロパティでコンサートの主要な詳細を示します。この場合、 `MusicEvent` の URL を `itemtype` に使用し、 `startDate` や `location` は `MusicEvent` が定義する `itemprop` となります。

**メモ:** `itemtype` 属性についての詳細は、 https://schema.org/Thing をご覧ください

* **itemtype** 属性には値が必要で、値は大文字小文字を区別する一意のトークンを順不同で並べたもので、それぞれが妥当な絶対 URL であり、すべてが同じ語彙を使用して定義する必要があります。属性の値は 1 つ以上のトークンを含む必要があります。
* アイテム型はすべて、（schema.org などの）適用可能な仕様書で定義された型であり、すべて同じ語彙を使用して定義する必要があります。
* itemtype 属性は itemscope 属性が指定されている要素の中でのみ指定できます。
* itemid 属性は、 itemscope 属性と itemtype 属性の両方を指定された要素でのみ指定することができます。これらは itemscope 属性を持つ要素で、語彙の仕様によって定められるとおり、その itemtype がアイテムのグローバル識別子に対応しない語彙を指定している場合にのみ指定する必要があります。
* グローバル識別子の正確な意味は、語彙の仕様によって決定されます。これは、同じグローバル識別子をもつ複数のアイテムが存在することが許可されるかどうか（同じページか異なるページ上かどうか）、そしてその語彙に対する処理規則が同じ ID をもつ複数のアイテムの場合の取り扱いに関するものを定義するのはそのような仕様次第です。
例
-

### 製品の構造化データの表現

この例では、以下のようにマイクロデータ属性を使用して、製品の構造化データを表現しています。

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype | Product (http://schema.org/Product) |
| itemprop | name | Executive Anvil |
| itemprop | image | https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605\_960\_720.png |
| itemprop | description |
 Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for
 the business traveler looking for something to drop from a height.
  |
| itemprop | mpn | 925872 |
| itemprop | brand [Thing] |  |
| itemprop | name | ACME |
| itemscope | itemprop[itemtype] | aggregateRating[AggregateRating] |  |
| itemprop | ratingValue | 4.4 |
| itemprop | reviewCount | 89 |
| itemprop | offers [Offer] | http://schema.org/Offer |
| itemprop | priceCurrency | USD |
| itemprop | price | 119.99 |
| itemprop | priceValidUntil | 2020-11-05 |
| itemprop | itemCondition | http://schema.org/UsedCondition |
| itemprop | availability | http://schema.org/InStock |
| itemscope | itemprop[itemtype] | seller [Organization] | http://schema.org/Organization |
| itemprop | name | Executive Objects |

**メモ:** HTML からマイクロデータを抽出するのに手軽なツールとして、 Google の構造化データテストツールがあります。こちらの HTML で試してみてください。

#### HTML

```html
<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="brand">ACME<br /></span>
  <span itemprop="name">Executive Anvil<br /></span>
  <img
 itemprop="image"
 src="https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605\_960\_720.png"
 width="50"
 height="50"
 alt="Executive Anvil logo" /><br />

  <span itemprop="description">
    Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the
    business traveler looking for something to drop from a height.
    <br />
  </span>

  Product #: <span itemprop="mpn">925872<br /></span>
  <span
 itemprop="aggregateRating"
 itemscope
 itemtype="http://schema.org/AggregateRating">
    Rating: <span itemprop="ratingValue">4.4</span> stars, based on
    <span itemprop="reviewCount">89 </span> reviews
  </span>
  <p>
    <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
      Regular price: $179.99<br />
      <meta itemprop="priceCurrency" content="USD" />
      <span itemprop="price">Sale price: $119.99<br /></span>
      (Sale ends
      <time itemprop="priceValidUntil" datetime="2020-11-05"> 5 November!</time
 >)<br />
      Available from:
      <span
 itemprop="seller"
 itemscope
 itemtype="http://schema.org/Organization">
        <span itemprop="name">Executive Objects<br /></span>
      </span>
      Condition:
      <link
 itemprop="itemCondition"
 href="http://schema.org/UsedCondition" />Previously owned, in excellent
      condition<br />
      <link itemprop="availability" href="http://schema.org/InStock" />In stock!
      Order now!
    </span>
  </p>
</div>
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-itemtype |

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

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

関連情報
----

* 他のグローバル属性
* マイクロデータに関連する他のグローバル属性:
    + `itemid`
    + `itemprop`
    + `itemref`
    + `itemscope`


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

part
====

**`part`** グローバル属性は、要素の部品名の空白区切りのリストを指定します。 CSS は部品名を使用して、 `::part` 擬似要素を介してシャドウツリー内の特定の要素の選択およびスタイルの設定を行うことができます。

使用例については Shadow part example をご覧ください。

仕様書
---

| Specification |
| --- |
| CSS Shadow Parts # part-attr |

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

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

関連情報
----

* すべてのグローバル属性


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

is
==

**`is`** グローバル属性で、標準の HTML 要素が定義されたカスタム組み込み要素のように振る舞うよう指定することができます（詳しくはカスタム要素の使用を参照してください）。

この属性は、指定されたカスタム要素名が現在の文書で正常に定義され、適用されている要素型が拡張されている場合にのみ使用します。

例
-

次のコードは、 word-count-web-component の例から取得されたものです（ライブで参照）。

```js
// 要素のクラスを作成
class WordCount extends HTMLParagraphElement {
  constructor() {
    // コンストラクターでは常に最初に super を呼び出すこと
    super();

    // コンストラクターの内容は簡略化のため除外しています
    // …
  }
}

// 新しい要素を定義
customElements.define("word-count", WordCount, { extends: "p" });
```

```html
<p is="word-count"></p>
```

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-is |

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

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

関連情報
----

* すべてのグローバル属性。


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

slot
====

**`slot`** はグローバル属性で、シャドウ DOM のシャドウツリー内にあるスロットを、ある要素に割り当てます。 `slot` 属性をもつ要素には、 `<slot>` 要素に `name` 属性の値を指定することで生成されたスロット
 の値がその `slot` 属性の値と一致する生成されたスロットに割り当てられます。

例については、テンプレートとスロットの使用ガイドを参照してください。

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-slot |
| DOM Standard # ref-for-dom-element-slot① |

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

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

関連情報
----

* すべてのグローバル属性


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

spellcheck
==========

**`spellcheck`** グローバル属性は、要素でスペルミスのチェックを行うかを定義する列挙型属性です。

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

以下の値を使用できます。

* 空文字列または `true`: 可能であればその要素でスペルチェックを行うことを示す
* `false`: その要素でスペルチェックを行わないことを示す

この属性が設定されていない場合、既定では要素型およびブラウザーで定義された値となります。この既定値は継承も可能です。これは、最も近い祖先の *spellcheck* の状態が `true` である場合にのみ、要素のコンテンツがスペルミスをチェックすることを意味します。

この属性は単にブラウザーのためのヒントです。ブラウザーはスペルミスを調べることを要求されているわけではありません。通常、編集不可能な要素は、たとえ `spellcheck` 属性が `true` に設定され、ブラウザーがスペルチェックに対応していても、スペルチェックは行われません。

セキュリティとプライバシーの考慮事項
------------------

 スペルチェックを使用すると、ユーザーのセキュリティやプライバシーに影響を与えることがあります。
 この仕様はスペルチェックの方法を規制しておらず、要素のコンテンツはスペルチェックの結果を第三者に送る可能性があります（enhanced spellchecking and "spell-jacking" を参照してください）。

機密情報を格納する可能性がある要素には、 `spellcheck` を `false` に設定することを考えるべきです。

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-spellcheck |

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

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

関連情報
----

* すべての グローバル属性


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

dir
===

**`dir`** グローバル属性は列挙型属性で、要素のテキストの書字方向を示します。

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

次の値を使用することができます。

* `ltr`: *left to right* を表し、左書きの言語（英語など）に対して使用します。
* `rtl`: *right to left* を表し、右書きの言語（アラビア語など）に対して使用します。
* `auto`: ユーザーエージェントに決定させます。書字方向が明確な文字が見つかるまで要素内の文字を解釈して、その方向を要素全体に適用する基本的なアルゴリズムを使用します。

**メモ:** この属性は、意味論的な位置づけが異なる場所を示す `<bdo>` 要素で必須です。

* この属性は `<bdi>` 要素に継承され**ません**。属性を設定しない場合の値は `auto` になります。
* この属性は、 CSS の `direction` プロパティや `unicode-bidi` プロパティで上書きできます。ただし、 CSS が有効かつ要素がこれらのプロパティに対応する場合に限ります。
* テキストの書字方向はその表示ではなく、内容に対して意味論的な関係がありますので、ウェブ開発者には、可能であれば関連する CSS プロパティの代わりにこの属性を使用することを推奨します。これにより、 CSS に対応しないブラウザーや CSS を無効化したブラウザーでもテキストが正しく表示されます。
* 値 `auto` は、ユーザーが入力して最終的にデータベースへ保存するデータなど、書字方向が不定のデータに対して使用してください。

**メモ:** ブラウザーではユーザーが `<input>` や `<textarea>` の書字方向を変更することを許可して、コンテンツの執筆を支援していることがあります。 Chrome と Safari は入力フィールドのコンテキストメニューに書字方向のオプションを提供している一方、 Internet Explorer と Edge はキーバインド `Ctrl` + `Left Shift` および `Ctrl` + `Right Shift` を使用します。 Firefox は `Ctrl`/`Cmd` + `Shift` + `X` を使用しますが、 **`dir`** 属性の値は変更しません。

仕様書
---

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

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

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

関連情報
----

* すべてグローバル属性
* `HTMLElement.dir` は、この属性を反映します。


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

id
==

**`id`** グローバル属性は、文書全体で一意でなければならない識別子 (ID) を定義します。この属性の用途は、リンク（フラグメント識別子を使用）、スクリプト、スタイル（CSS を使用）で要素を特定することです。

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

**警告:** この属性の値は不伝導性の文字列です。つまり、ウェブ作者は人間が理解するための情報を伝えるためにこの情報を使用するべきではありません（ただし、 ID を人間が理解できるようにすることは、コードを理解するために有用です。例えば、 `ticket-18659` と `r45tgfe-freds&$@` を比べてみてください）。

`id` の値にホワイトスペース文字 (空白やタブなど) を含めてはいけません。ブラウザーはホワイトスペース文字を含む不適合な ID を、ホワイトスペース文字が ID の一部であるかのように扱います。空白区切りで並べた値を受け入れる `class` 属性とは対照的に、要素は ID の値をひとつだけ持つことができます。

**メモ:** 技術的には、`id` 属性の値にはホワイトスペース文字を除いて、どんな文字でも入れることができます。しかし、不注意によるエラーを避けるためには、ASCII 文字、数字、`'_'`、`'-'` のみを使用し、`id` 属性の値は文字から始める必要があります。例えば、`.` は CSS では特別な意味を持ちます（クラスセレクターとして動作します）。CSS の中でそれをエスケープするように注意しない限り、`id` 属性の値の一部として認識されることはありません。この処理を忘れると、コードにバグが発生し、発見が困難になることがあります。

仕様書
---

| Specification |
| --- |
| HTML Standard # global-attributes:the-id-attribute-2 |

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

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

関連情報
----

* すべてのグローバル属性
* `Element.id` はこの属性を反映します
* `Document.getElementById` メソッド
* CSS の ID セレクター


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

tabindex
========

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

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

* Learn more
* See full compatibility
* Report feedback
**`tabindex`** グローバル属性は、開発者が HTML要素をフォーカス可能にし、（ふつうは名前の由来である `Tab` キーによる）順番にフォーカスすることを許可または防止し、順番にフォーカスするための相対順序を決定することができるようにします。

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

値としては整数値を受け付け、値によって次のような様々な結果になります。

**メモ:** HTML 要素がレンダリングされ、その `tabindex` 属性が有効な整数値である場合、その要素は JavaScript で（`focus()` メソッドを呼び出すことで）フォーカスしたり、マウスクリックで視覚的にフォーカスしたりすることができます。特定の `tabindex` 値は、その要素が `tabbable` （キーボードによる連続したナビゲーション、通常は `Tab` キーで到達可能）であるかどうかを制御します。

* *負の数* （正確な値は重要ではありませんが、ふつうは `tabindex="-1"`）は、その要素がキーボードの順次ナビゲーションでは到達できないことを意味します。

**メモ:** tabindex="-1"` は、`Tab` キーで直接ナビゲートされるべきではないが、キーボードフォーカスを設定する必要のある要素に有益な場合があります。例としては、表示されたときにフォーカスされるべき画面外のモーダルウィンドウや、誤ったフォームを送信したときに直ちにフォーカスされるべきフォーム送信エラーメッセージなどが挙げられます。
* `tabindex="0"` は、要素がキーボードの順次ナビゲーションで、`tabindex` が正の値の要素の後にフォーカスを持つことが可能であることを意味します。これらの要素のフォーカスナビゲーション順は、文書のソース内の順序で定義されます。
* 正の数は、要素がキーボードの順次ナビゲーションでフォーカスを持つことが可能であり、その順序は数値で定義されることを表します。つまり、 `tabindex="4"` は `tabindex="5"` よりも前にフォーカスが来ますが、 `tabindex="3"` よりも後だということです。複数の要素に同じ正の数の `tabindex` が指定された場合は、文書のソース内の互いの位置に従った順序になります。 `tabindex` の最大値は 32767 です。
* もし `tabindex` 属性が値なしで記述された場合、その要素をフォーカス可能にするかどうかは、ユーザーエージェントが決定します。

**警告:** `tabindex` の値として、`0` と `-1` のみを使用することをお勧めします。`tabindex` の値を `0` より大きくしたり、フォーカス可能な HTML 要素の順序を変更できる CSS プロパティ（フレックスアイテムの順序）を使用したりしないようにしましょう。これは、キーボードによるナビゲーションや支援技術を使用している人にとって、ページのコンテンツを操作することが難しくなります。代わりに、論理的な順序で要素を記述してください。

フォーカス可能な HTML 要素の中には、ユーザーエージェントによって、`tabindex` に `0` の既定値が与えられるものがあります。これらの要素は `href` 属性を持つ `<a>` または `<area>`、`<button>`、`<frame>`
非推奨
、`<iframe>`、`<input>`、`<object>`、`<select>`、`<textarea>`、SVG の `<a>` 要素、あるいは `<details>` 要素の概要を提供する `<summary>` 要素があります。開発者は既定の動作を変更しない限り、これらの要素に `tabindex` 属性を追加しないでください（例えば、負の値を記載すると、フォーカスされたナビゲーション順序から要素が削除されます）。

**警告:** tabindex 属性は `<dialog>` 要素に使用してはいけません。

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

キーボード入力で対話的にフォーカスを設定できるようにするために、 対話型コンテンツではないものに `tabindex` 属性を組み合わせて使用することは避けてください。例えば、 `<button>` 要素を使用する代わりに `<div>` 要素を使用してボタンを記述する場合などです。

対話的要素でないものを使用して対話的コンポーネントを記述すると、アクセシビリティツリーに掲載されません。これは、支援技術によって移動や操作を行うことを阻害します。このようなコンテンツは、代わりに（`<a>`、`<button>`、`<details>`、`<input>`、`<select>`、`<textarea>` などの）対話型要素を使用して意味的に記述するべきです。これらの要素には、 ARIA によって管理しなければならないアクセシビリティにステータスを伝える、組み込みのロールと状態があります。

* Using the tabindex attribute | The Paciello Group
仕様書
---

| Specification |
| --- |
| HTML Standard # attr-tabindex |

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

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

関連情報
----

* すべてのグローバル属性。
* `HTMLElement.tabIndex` は、この属性を反映します。
* `tabindex` に関するアクセシビリティの問題について、 Adrian Roselli による Don't Use Tabindex Greater than 0 を参照。


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

exportparts
===========

**`exportparts`** グローバル属性 では、ネストしたシャドウツリー内に存在する要素を部品 (`part`) 名でエクスポートして、そのスタイルを選択できるようにすることができます。

 シャドウツリーは、識別子、クラス、スタイルが、通常の DOM に属するセレクターやクエリーによって到達することができない孤立した構造体です。
 シャドウツリーに存在する要素に、その外部で作成された CSS ルールによってスタイルを適用するには、`part` グローバル属性を使用する必要があります。これは、シャドウツリーに表示される要素に割り当てる必要があり、その値は何らかの識別子である必要があります。
 シャドウツリーの外部にあるルールは、引数と同じ識別子を持つ `::part` 擬似要素を使用しなければなりません。

グローバル属性 `part` は、その要素を単一の深さのレベルでだけ見えるようにします。シャドウツリーが入れ子になっている場合、パートはシャドウツリーの親にのみ表示され、その祖先には表示されません。さらに下の階層にパーツをエクスポートするには、まさに `exportparts` 属性が必要です。

`exportparts` 属性は *シャドウホスト*、すなわち *シャドウツリー* が装着されている要素に配置しなければなりません。値はシャドウツリーに存在している部品名のカンマ区切りのリストで、これらが現在の構造体の外側の DOM から利用できるようになります。

仕様書
---

| Specification |
| --- |
| CSS Shadow Parts # element-attrdef-html-global-exportparts |

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

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

関連情報
----

* すべてのグローバル属性


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

draggable
=========

**draggable** グローバル属性 は列挙型属性で、要素がブラウザーの既定の動作と HTML ドラッグ＆ドロップ APIのどちらの動作でドラッグできるかを示します。

`draggable` 属性は、厳密には HTML 名前空間に属する要素に適用することができ、これは SVG には適用できないことを意味します。
 名前空間宣言がどのようなもので、何をするのかについては、名前空間の速修講座を参照してください。

`draggable` は以下の値を取ることができます。

* `true`: 要素がドラッグ可能であることを示す
* `false`: 要素はドラッグ不可であることを示す

**警告:** この属性は *列挙型* であり、*論理属性* ではありません。 `true` または `false` の値が必須であり、 `<img draggable>` のような省略形は認められません。正しい使用法は `<img draggable="false">` です。

この属性が設定されなかった場合の既定値は `auto` であり、ブラウザーの既定のドラッグ動作であることを意味します。テキストの選択範囲、画像、リンクのみがドラッグ可能です。他の要素でドラッグ＆ドロップできるようにするためには `ondragstart` イベントを設定する必要があります（こちらの包括的なサンプルにあるように）。

仕様書
---

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

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

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

関連情報
----

* すべての グローバル属性。


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

inert
=====

**`inert`** グローバル属性は論理属性で、これは論理属性で、ブラウザーがその要素を無視することを示します。`inert` 属性を使うと、要素のフラットツリーの子孫（モーダルの `<dialog>` など）のうち、不活性化を免れないものはすべて無視されます。`inert` 属性は、フォーカス関連のイベントや支援技術からのイベントなど、ユーザーから送られる入力イベントもブラウザーが無視するようにします。

具体的には、`inert`は以下のことを行います。

* ユーザーが要素をクリックしたときに `click` イベントが発行されないようにします。
* 要素にフォーカスが当たらないようにして、 `focus` イベントが発生することを防ぎます。
* 要素およびそのコンテンツをアクセシビリティツリーから除外することで、支援技術から隠します。

```html
<body inert>
  <!-- content -->
</body>
```

`inert` 属性は、インタラクティブであってはならないコンテンツのセクションに追加することができます。要素が不活性化されると、リンクやボタン、フォームコントロールのような通常インタラクティブな要素を含む、その要素のすべての子孫は、フォーカスを得たりクリックしたりすることができないため、無効となります。

`inert` 属性は、オフスクリーンや非表示にすべき要素にも追加することができます。不活性な要素は、その子孫とともに、タブ順序とアクセシビリティツリーから取り除かれます。

**メモ:** `inert` はグローバルな属性であり、どんな要素にも使用することができますが、一般的にはコンテンツのセクションに使用されます。個々のコントロールを「不活性」にするには、代わりに `disabled` 属性と CSS の `:disabled` スタイルを使用することを考えてみてください。

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

inert` 属性を使用する際には、アクセシビリティに十分配慮してください。既定では、要素やそのサブツリーが不活性であるかどうかを視覚的に指示する方法はありません。ウェブ開発者として、アクティブなコンテンツ部分と不活性なコンテンツ部分を明確に示すことは、あなたの責任です。

コンテンツの不活性化について視覚的・非視覚的な手がかりを提供する一方で、視覚ビューポートにはコンテンツの一部しか格納されていない可能性があることも覚えておいてください。ユーザーはコンテンツの小さなセクションにズームインされるかもしれませんし、コンテンツをまったく見ることができないかもしれません。不活性な節が不活性に見えない場合、不満や使い勝手の悪さにつながる可能性があります。

仕様書
---

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

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

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

関連情報
----

* HTML の `<dialog>` 要素
* Introducing inert
* The "inert" attribute is finally coming to the web


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

virtualkeyboardpolicy
=====================

**`virtualkeyboardpolicy`** はグローバル属性で、列挙型の属性です。`contenteditable` 属性を使用している要素に指定すると、タブレットや携帯電話など、ハードウェアキーボードが利用できないような端末での画面の仮想キーボードの動作を制御することができます。

この属性は、以下の値のいずれかを取る必要があります。

* `auto` または空文字列の場合は、この要素がフォーカスまたはタップされた際に、自動的に仮想キーボードを表示します。
* `manual` の場合は、要素へのフォーカスやタップを仮想キーボードの状態から切り離します。
仕様書
---

| Specification |
| --- |
| VirtualKeyboard API # dom-elementcontenteditable-virtualkeyboardpolicy |

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

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

関連情報
----

* すべてのグローバル属性
* `HTMLElement.contentEditable` および `HTMLElement.isContentEditable`
* 仮想キーボード API (en-US)


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

itemscope
=========

**`itemscope`** は論理グローバル属性で、関連付けられたメタデータのスコープを定義します。 **`itemscope`** 属性を要素に指定すると、要素に関連付けられた数々の名前と値の組み合わせを持つ新しいアイテムを作成します。

関連する属性である `itemtype` は、アイテムおよびそのプロパティのコンテキストを記述する語彙（schema.org など）の有効な URL を指定するために使用されます。以下のそれぞれの例では、 schema.org からの語彙を使用しています。

あらゆる HTML 要素に `itemscope` 属性を設定することができます。 `itemscope` 要素が `itemtype` を持たない場合は、関連付けられた `itemref` を持つ必要があります。

**メモ:** `itemtype` 属性についての詳細は、 https://schema.org/Thing をご覧ください

### itemscope の id 属性

ある要素に `itemscope` 属性を指定すると、新しいアイテムが作成されます。アイテムは名前と値の組のグループから構成されます。 `itemscope` 属性と `itemtype` 属性を持つ要素では、 `id` 属性も指定することができます。 `id` 属性を使用すると、新しいアイテムにグローバルな識別子を設定することができます。グローバルな識別子によって、そのアイテムはウェブ上のページで見られる他のアイテムに関連付けることができます。

例
-

### 映画の構造化データの表現

以下の例では、 `itemscope` 属性を指定しています。この例では `itemtype` を "http://schema.org/Movie" に設定し、 3 つの関連する `itemprop` 属性を定義します。

|  |  |  |
| --- | --- | --- |
| itemscope | Itemtype | Movie |
| itemprop | (itemprop name) | (itemprop value) |
| itemprop | director | James Cameron |
| itemprop | genre | Science Fiction |
| itemprop | name | Avatar |
| itemprop | https://youtu.be/0AY1XIkX7bY | Trailer |

```html
<div itemscope itemtype="https://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span
 >Director: <span itemprop="director">James Cameron</span> (born August 16,
    1954)</span
 >
  <span itemprop="genre">Science fiction</span>
  <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a>
</div>
```

### レシピの構造化データの表現

以下の例には 4 つの `itemscope` 属性があります。それぞれの `itemscope` 属性は、対応する `itemtype` 属性のスコープを設定しています。以下の例にある `Recipe`, `AggregateRating`, `NutritionInformation` の `itemtype` は、レシピのための schema.org 構造化データの一部であり、最初の `itemtype`, `http://schema.org/Recipe` として定義されています。

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype | Recipe |
| itemprop | name | Grandma's Holiday Apple Pie |
| itemprop | image | https://c1.staticflickr.com/1/30/42759561\_8631e2f905\_n.jpg |
| itemprop | datePublished | 2022-11-05 |
| itemprop | description |
 This is my grandmother's apple pie recipe. I like to add a dash of
 nutmeg.
  |
| itemprop | prepTime | PT30M |
| itemprop | cookTime | PT1H |
| itemprop | totalTime | PT1H30M |
| itemprop | recipeYield | 1 9" pie (8 servings) |
| itemprop | recipeIngredient | Thinly-sliced apples: 6 cups |
| itemprop | recipeIngredient | White sugar: 3/4 cup |
| itemprop | recipeInstructions |
 1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar
 for tart apples .
  |
| itemprop | author [Person] |
| itemprop | name | Carol Smith |
| itemscope | itemprop[itemtype] | aggregateRating [AggregateRating] |
| itemprop | ratingValue | 4.0 |
| itemprop | reviewCount | 35 |
| itemscope | itemprop[itemtype] | nutrition [NutritionInformation] |
| itemprop | servingSize | 1 medium slice |
| itemprop | calories | 250 cal |
| itemprop | fatContent | 12 g |

**メモ:** 手軽に HTML からマイクロデータを抽出するには、 Google のリッチリザルトテストツールが便利です。上の HTML で試してみてください。

#### HTML

```html
<div itemscope itemtype="https://schema.org/Recipe">
  <h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
  <img
 itemprop="image"
 src="https://c1.staticflickr.com/1/30/42759561\_8631e2f905\_n.jpg"
 width="50"
 height="50" />
  <p>
    By
    <span itemprop="author" itemscope itemtype="https://schema.org/Person">
      <span itemprop="name">Carol Smith</span>
    </span>
  </p>
  <p>
    Published:
    <time datetime="2022-11-05" itemprop="datePublished"
 >November 5, 20022</time
 >
  </p>
  <span itemprop="description"
 >This is my grandmother's apple pie recipe. I like to add a dash of
    nutmeg.</span
 >
  <br />
  <span
 itemprop="aggregateRating"
 itemscope
 itemtype="https://schema.org/AggregateRating">
    <span itemprop="ratingValue">4.0</span> stars based on
    <span itemprop="reviewCount">35</span> reviews
  </span>
  <br />
  Prep time: <time datetime="PT30M" itemprop="prepTime">30 min</time>
  <br />
  Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour</time>
  <br />
  Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time>
  <br />
  Yield: <span itemprop="recipeYield">1 9" pie (8 servings)</span>
  <br />
  <span
 itemprop="nutrition"
 itemscope
 itemtype="https://schema.org/NutritionInformation">
    Serving size: <span itemprop="servingSize">1 medium slice</span><br />
    Calories per serving: <span itemprop="calories">250 cal</span><br />
    Fat per serving: <span itemprop="fatContent">12 g</span><br />
  </span>
  <p>
    Ingredients:<br />
    <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br /></span>
    <span itemprop="recipeIngredient">White sugar: 3/4 cup<br /></span>
    …
  </p>
  Directions: <br />
  <div itemprop="recipeInstructions">
    1. Cut and peel apples<br />
    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br />
    …
  </div>
</div>
```

#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # attr-itemscope |

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

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

関連情報
----

* 他のグローバル属性
* マイクロデータに関連する他のグローバル属性:
    + `itemid`
    + `itemprop`
    + `itemref`
    + `itemtype`