グローバル属性は、すべての HTML 要素で共通の属性です。これらはすべての HTML 要素で使用できますが、一部の要素では効果がない属性もあるでしょう。
グローバル属性は、標準仕様で明示されていないものを含むすべての HTML 要素に定められるでしょう。これはあらゆる非標準の要素が、それを使用することで文書が HTML5 に準拠しなくなるとしても、グローバル属性を受け入れなければならないということです。例えば <foo> は正当な HTML 要素ではありませんが、HTML5 準拠のブラウザは <foo hidden>...<foo> とマークアップされたコンテンツを隠します。
基本的な HTML グローバル属性に加えて、以下のグローバル属性も存在します:
xml:langおよびxml:base— これらは XHTML 仕様から継承したもので非推奨ですが、互換性のために維持されています。- アクセシビリティを向上するために使用する、複数の
aria-*属性。 - イベントハンドラ属性:
onabort,onautocomplete,onautocompleteerror,onblur,oncancel,oncanplay,oncanplaythrough,onchange,onclick,onclose,oncontextmenu,oncuechange,ondblclick,ondrag,ondragend,ondragenter,ondragexit,ondragleave,ondragover,ondragstart,ondrop,ondurationchange,onemptied,onended,onerror,onfocus,oninput,oninvalid,onkeydown,onkeypress,onkeyup,onload,onloadeddata,onloadedmetadata,onloadstart,onmousedown,onmouseenter,onmouseleave,onmousemove,onmouseout,onmouseover,onmouseup,onmousewheel,onpause,onplay,onplaying,onprogress,onratechange,onreset,onresize,onscroll,onseeked,onseeking,onselect,onshow,onsort,onstalled,onsubmit,onsuspend,ontimeupdate,ontoggle,onvolumechange,onwaiting。
説明
accesskey- カレント要素用のキーボードショートカットを生成するためのヒントを与えます。この属性は文字を空白区切りで並べたリストで構成されます。ブラウザは、コンピュータのキーボードレイアウトに存在する最初の文字を使用します。
class- 要素のクラスを空白区切りで並べたリストです。クラスは CSS のクラスセレクタや JavaScript の DOM メソッド
Document.getElementsByClassName()といった関数により、特定の要素を選択したり特定の要素にアクセスしたりすることを可能にします。 contenteditable- ユーザによる要素の編集が可能かを示す列挙型属性です。可能である場合、ブラウザは要素のウィジェットを編集可能なものに変更します。この属性では、以下の値のひとつを使用しなければなりません:
trueまたは 空文字列: 要素が編集可能であることを示すfalse: 要素は編集不可であることを示す
- 当該要素のコンテキストメニューとして使用する
<menu>のidを指定します。 data-*- カスタムデータ属性と呼ばれるこれらの属性は、HTML とスクリプトによって使用されるであろう HTML の DOM 表現との間で、固有の情報を交換できるようにします。すべてのカスタムデータは、属性を設定した要素の
HTMLElementインターフェイスを通して使用できます。HTMLElement.datasetプロパティでデータにアクセスできます。 dir- 要素のテキストの書字方向を示す列挙型属性です。以下の値を持つことができます。
ltr: left to right を表し、左から右へ記述する言語 (日本語、英語など) に対して使用します。rtl: right to left を表し、右から左へ記述する言語 (アラビア語など) に対して使用します。auto: ユーザエージェントに決定させます。書字方向が明確な文字が見つかるまで要素内の文字をパースして、その方向を要素全体に適用する初歩的なアルゴリズムを使用します。
draggable- Drag and Drop API を使用して要素をドラッグすることができるかを示す列挙型属性です。以下の値を持つことができます。
true: 要素がドラッグ可能であることを示すfalse: 要素はドラッグ不可であることを示す
dropzone- Drag and Drop API を使用して要素上にどのようなコンテンツをドロップできるかを示す列挙型属性です。以下の値を持つことができます。
copy: ドロップにより、ドロップした要素のコピーを生成することを示すmove: ドロップされた要素は新しい場所に移動されることを示すlink: ドラッグしたデータへのリンクを生成する
- 要素はまだ、あるいはもはや関連性がないことを示す論理属性です。例えば、ログインのプロセスが完了するまで使えない要素を隠すために使用できます。ブラウザはこのような要素を表示しません。この属性は、表示することが正当であるはずのコンテンツを隠すために使用してはいけません。
id- この属性は、文書全体で一意でなければならない識別子 (ID) を定義します。この属性の用途は、リンク (フラグメント識別子を使用)、スクリプト、スタイル (CSS を使用) で要素を特定することです。
注記: 以下 5 つの属性は、WHATWG HTML Microdata 機能の一部です。
itemid- アイテムの、一位でグローバルな識別子です。
itemprop- アイテムにプロパティを追加するために使用します。すべての HTML 要素は指定された itemprop 属性を持つことができ、この itemprop は名前と値のペアで構成されます。
itemrefitemscope属性を持つ要素の子孫ではないプロパティは、itemref を使用してアイテムに関連付けることができます。itemref はドキュメント内のほかの場所にプロパティを追加することなく、要素の id (itemidではありません) のリストを提供します。itemscope- itemscope は (通常)、ブロックに含まれている HTML が特定のアイテムに関するものであることを指定するために itemtype とともに機能します。itemscope はアイテムを作成して、アイテムに関連付けられる itemtype のスコープを定義します。itemtype は、アイテムやアイテムのプロパティの文脈を説明するボキャブラリー (schema.org など) の有効な URL です。
itemtype- データ構造内の itemprop (アイテムのプロパティ) を定義するために使用する、ボキャブラリーの URL を指定します。itemscope は、itemtype で設定したボキャブラリーがデータ構造内でアクティブになるスコープを設定するために使用します。
lang- この属性は要素の言語の定義に関係するもので、編集不可能な要素が記述されている言語、あるいは編集可能な言語に記述されるであろう言語を定義します。タグは、IETF の文書である Tags for Identifying Languages (BCP47) で定義されている形式の値を 1 個持ちます。xml:lang はこの要素より優先します。
spellcheck- 要素でスペルミスのチェックを行うかを定義する列挙型属性です。以下の値を指定できます:
true: 可能であればその要素でスペルチェックを行うことを示すfalse: その要素でスペルチェックを行わないことを示す
style- この属性は、要素に適用する CSS スタイル宣言を包含します。スタイルは別のファイルで定義することが推奨される点に注意してください。この属性と
<style>要素の主な用途は、例えばテストのために、すばやくスタイルを適用できるようにすることです。 tabindex- 要素が入力フォーカスを持てる (focusable) 場合に、シーケンシャルなキーボードナビゲーションに参加するか、また参加する場合はどの位置に入るかを示す整数値属性です。さまざまな値をとることができます:
- 負数は、要素はフォーカスを持つことが可能であるがシーケンシャルなキーボードナビゲーションでは到達できないことを表します。
0は、要素はフォーカスを持つことが可能でありシーケンシャルなキーボードナビゲーションで到達できるが、その相対的な順序はプラットフォームの慣習により定められることを表します。- 正数は、要素はフォーカスを持つことが可能でありシーケンシャルなキーボードナビゲーションで到達できることを表します。またその相対的な順序は属性の値で定義され、tabindex の数値の昇順に従います。複数の要素が同じ tabindex を共有する場合は、その相対的な順序は文書内における要素の相対的な位置に従います。
title- 要素に関するアドバイザリー情報を表すテキストを包含します。このような情報は一般的にツールチップとしてユーザに表示されますが、必ず表示されるとは限りません。
translate- 要素の属性値や子孫
Textノードの値が、ページをローカライズする際に翻訳されるか、あるいは変更せずにおくかを指定する列挙型属性です。以下の値を持つことができます。- 空文字列または "
yes": ページをローカライズする際に翻訳すべきであることを示します。 - "
no": 要素を翻訳しないことを示します。
- 空文字列または "
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WHATWG HTML Living Standard Global attributes の定義 |
現行の標準 | 最新のスナップショット以降、HTML5.1 に itemid、itemprop、itemref、itemscope、itemtype を追加しました。 |
| HTML5.1 Global attributes の定義 |
草案 | WHATWG HTML Living Standard のスナップショット。HTML5 に spellcheck、draggable、dropzone を追加しました。 |
| HTML5 Global attributes の定義 |
勧告 | WHATWG HTML Living Standard のスナップショット。HTML 4.01 Specification との違いは、グローバル属性という概念を導入して dir、lang、style、id、class、tabindex、accesskey、title を真にグローバルな属性にしたことです。当初は XHTML の一部であった xml:lang を、HTML に組み込みました。hidden、data-*、contextmenu、contenteditable、translate を追加しました。 |
| HTML 4.01 Specification | 勧告 | グローバル属性は定義していません。後の仕様書でグローバル属性になるいくつかの属性を、要素のサブセットで定義しています。class および style は <base>、<basefont>、<head>、<html>、<meta>、<param>、<script>、<style>、<title> を除くすべての要素でサポートします。dir は <applet>、<base>、<basefont>、<bdo>、<br>、<frame>、<frameset>、<iframe>、<param>、 <script> を除くすべての要素でサポートします。id は <base>、<head>、<html>、<meta>、<script>、<style>、<title> を除くすべての要素でサポートします。lang は <applet>、<base>、<basefont>、<br>、<frame>、<frameset>、<iframe>、<param>、<script> を除くすべての要素でサポートします。tabindex は <a>、<area>、<button>、<object>、<select>、<textarea> のみサポートします。accesskey は <a>、<area>、<button>、<input>、<label>、<legend>、<textarea> のみサポートします。title は <base>、<basefont>、<head>、<html>、<meta>、<param>、<script>、<title> を除くすべての要素でサポートします。 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
accesskey |
(有) | (有) | (有) | (有) | (有) |
class |
(有) | (有) | (有) | (有) | (有) |
contenteditable |
(有) | 3.0 (1.9) | (有) | (有) | (有) |
contextmenu |
未サポート | 9 (9) | 未サポート | 未サポート | 未サポート |
data-* |
(有) | 6 (6) | (有) | (有) | (有) |
dir |
(有) | (有) | (有) | (有) | (有) |
draggable |
(有) | 2.0 (1.8.1) | (有) | (有) | (有) |
dropzone |
? | 未サポート | ? | ? | ? |
hidden |
(有) | 4.0 (2) | (有) | (有) | (有) |
id |
(有) | (有) | (有) | (有) | (有) |
itemid, itemprop, itemref, itemscope, itemtype |
? | (有) | ? | ? | ? |
lang |
(有) | (有) | (有) | (有) | (有) |
spellcheck |
(有) | 2.0 (1.8.1) | (有) | (有) | (有) |
style |
(有) | (有) | (有) | (有) | (有) |
tabindex |
(有) | (有) | (有) | (有) | (有) |
title |
(有) | (有) | (有) | (有) | (有) |
| 機能 | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
accesskey |
(有) | (有) | (有) | (有) | (有) | (有) |
class |
(有) | (有) | (有) | (有) | (有) | (有) |
contenteditable |
(有) | (有) | 1.0 (1.9) | (有) | (有) | ? |
contextmenu |
未サポート | 未サポート | 未サポート | 未サポート | 未サポート | 未サポート |
data-* |
(有) | (有) | 6.0 (6) | (有) | (有) | ? |
dir |
(有) | (有) | (有) | (有) | (有) | ? |
draggable |
(有) | (有) | 1.0 (1.8.1) | (有) | (有) | ? |
dropzone |
? | ? | 未サポート | ? | ? | ? |
hidden |
(有) | (有) | 4.0 (2) | (有) | (有) | (有) |
id |
(有) | (有) | (有) | (有) | (有) | (有) |
itemid, itemprop, itemref, itemscope, itemtype |
? | ? | (有) | ? | ? | ? |
lang |
(有) | (有) | (有) | (有) | (有) | (有) |
spellcheck |
(有) | (有) | 1.0 (1.8.1) | (有) | (有) | ? |
style |
(有) | (有) | (有) | (有) | (有) | (有) |
tabindex |
(有) | (有) | (有) | (有) | (有) | (有) |
title |
(有) | (有) | (有) | (有) | (有) | (有) |
関連情報
ElementおよびGlobalEventHandlersインターフェイスで、ほとんどのグローバル属性を調べることができます。