5.グローバル属性

HTML4.01では、ほぼすべての要素で利用できるclass、dir、id、lang、style、tabindex、titleという属性が定義されていました。
HTML5では、これらの属性にいくつかの属性を加えた以下の属性を「グローバル属性」として定義しています。
グローバル属性はすへての要素で共通して利用できます。

■accesskey=”ショートカットキー”
要素にキーボード・ショートカット用のキーを割り当てます。半角スペースで区切って複数のキーを指定することもできます。この場合は指定した順に優先順位が付けられ、その環境で利用可能な最初のキーがショートカットキーとして採用されます。

■class=”クラス名”
要素に対してクラス名を指定します。半角スペースで区切って複数のクラス名を指定することもできます。class属性では同一の文書内の複数の要素に対して同じ名前を指定でき、スタイルシートを適用する場合のセレクタなどに利用されます。

■contenteditable=”編集可能かどうか”
要素を編集可能にするかどうかを指定します。編集可能にする場合は「true」または空文字(“”)、編集不可にする場合は「false」を値に指定します。

■contextmenu=”menu要素のid性値”
menu要素で定義したメニューを当該要素のコンテキスト・メニューとして表示します。値には、menu要素のid属性の値を指定します。

■div=”テキストの表記方向”
要素内容のテキストの表記方向を指定します。左から右の場合は「ltr」、右から左の場合は「rtl」を値に指定します。




■draggable=”ドラッグ可能かどうか”
要素をドラック可能にするかどうかを指定します。ドラッグ可能にする場合は「true」、ドラッグ不可にする場合は「false」を値に指定します。dropzone属性とdraggable属性は、ドラッグ&ドロップAPIと組み合わせて利用します。

■dropzone=”ドロップしたアイテムの処理方法”
要素をドロップ可能な場所とし、この場所が受け入れられるアイテムを、どのように処理するのかを指定します。値に「copy」を指定するとドラッグされたデータがこの場所にコピーされ、「move」を指定するとドラッグされたテータが移動されます。「link」を指定した場合は、オリジナルのデータとドロップ先との間に何らかの関連付けや繋がりが作られます。dropzone属性とdraggable属性は、ドラッグ&ドロップAPIと組み合わせて利用します。

■hidden=”hidden”
指定した要素が、他の部分とは無関係であることを表します。この属性が指定された要素はブラウザにも表示されません。この属性は、当該の要素が無関係の状態を表す場合にのみ「hidden=”hidden”」「hidden=””」「hidden」のいずれかの書式で指定します。

■id=”名前”
要素の名前(識別子)を指定します。同一の文書内で同し名前を重複して使うことはできません。スタイルシートのセレクタ、リンクの対象、スクリプトからの参照などで利用されます。

■lang=”言語コード”
要素内容の言語を表す言語コード指定します。日本語はja、英語はen、米国英語はen-US、フランス語はfrのように指定します。このlang属性が指定されていない要素の言語は、lang属性が指定されている親要素の言語と同じになります。

■spellcheck=”スペルチェックを有効にするかどうか”
テキストが入力可能な要素において、スペルチェックや文法チェックを有効にするかどうかを指定します。チェックを有効にする場合は「true」または空文字(“”)、無効にする場合は「false」を値に指定します。フォームのテキスト入力欄(input要素やtextarea要素)、contenteditable属性が指定され編集可能になっている要素に対して利用できます。




■style=”CSS宣言”
要素に指定するCSSの宣言を直接記述します。「;(セミコロン)」で区切って複数のCSS宣言を指定することができます。

■tabindex=”移動の順番”
[Tab]キーを使ってフォーカスを移動させる際の順番を指定します。ただし、実際に[Tab]キーを利用するかとうかは環境によって異なります。値には整数を指定し、値の小さなものから大きなものへ移動します。値に0が指定されている要素と、tabindex属性が指定されていない要素は、この属性に1以上の値が指定されている要素のあとにフォーカスが移動します。また、マイナスの値を指定した場合は、フォーカスは可能になりますが、[Tab]キーによる移動の対象にはなりません。

■title=”補足情報”
要素の補足情報を表します。当該の要素がリンク場合はリンク先のタイトルや説明、画像の場合はその画像のタイトルや著作権表示、引用の場合は引用元に関する情報の記載などに利用できます。title属性に指定された内容は、一般的にはマウスカーソルを当てたときにツールチップとして表示されます。

■translate=”翻訳するかどうか”
ページが機械翻訳されるときに、その要素の属性値や要素内のテキストを翻訳対象にするかどうかを指定します。翻訳する場合は「yes」または空文字(“”)、翻訳せずにそのままにする場合は「no」を値に指定します。固有名詞やコンピュータプログラムなど、翻訳されることを防ぎたい箇所に利用します。

■data=”任意の値”
この属性はカスタムデータ属性と呼ばれ、「data-」につづく「*」の部分に独自の名前を指定することで要素に独自の属性を追加します。この属性によりユーザーは、任意の情報をHTML内に埋め込むことができ、JavaScriptから取得するなどして利用できます。