HTMLの基礎知識

グローバル属性とイベントハンドラ属性

HTMLでは要素ごとに指定できる属性とすべての要素に指定できる「グローバル属性」、スクリプトを実行する「イベントハンドラ属性」があります。また、マイクロデータなどの関連仕様の属性もグローバル属性として扱う場合があります。

グローバル属性

グローバル属性は、HTMLのすべての要素で指定できる属性です。HTML5で定義されているグローバル属性には、以下の13個があります。

acccesskey 【 アクセス・キー 】

ショートカットキーを割り当てます。値にはキーに当たる半角英数字（大文字、小文字は区別される）を1文字指定します。半角スペースで区切って複数の値を指定できます。

class 【 クラス 】

要素にclass名を付与します。半角スペースで区切って複数のclass名を指定できます。半角英数字、かつ英字から始まる値を指定すると、CSSのセレクタとして利用できます。

contenteditable 【 コンテント・エディタブル 】

閲覧者による要素の編集の許可・不許可を以下のキーワードで指定します。値を指定しない場合は、上位要素の指定を継承します。

true 閲覧者による編集を許可します。
false 閲覧者による編集を許可しません。

dir 【 ディレクショナリティ 】

要素内のテキストの書字方向を以下のキーワードで指定します。

ltr 書字方向を左から右にします（left to right）。
rtl 書字方向を右から左にします（right to left）。

hidden 【 ヒドゥン 】

要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。ただし、要素を隠す目的の属性ではありません。hidden属性は論理属性です。

id 【 アイディー 】

要素に固有の識別名を指定します。id属性の値は文書内で一意であり、同じ値を複数の要素に指定できません。また、最低でも1文字が必要で、空白文字は含めません。CSSのセレクタとして利用できるほか、リンクのフラグメント識別子としても利用できます。

lang 【 ランゲージ 】

要素の内容がどのような言語で記述されているかを表します。html要素に対して指定し、文書全体の言語を指定したり、一部の要素に対して言語を指定したりできます。

spellcheck 【 スペルチェック 】

要素の内容についてスペルチェックを実行するかどうかを以下のキーワードで指定します。

true スペルチェックを実行します。
false スペルチェックを実行しません。

style 【 スタイル 】

属性値にCSSのプロパティと値を記述して、要素のスタイルを指定できます。ただし、この属性が削除されたときに内容を閲覧できなくなるような指定は避けましょう。

tabindex 【 タブ・インデックス 】

［Tab］キーを押したときのフォーカスの優先順位を整数で指定します。正の値が指定された要素は昇順に、0を指定した要素は最後にフォーカスします。負の値を指定した要素はフォーカスされません。

title 【 タイトル 】

要素の補足情報を付与します。値には任意のテキストを記述します。

translate 【 トランスレート 】

要素の内容について翻訳を実行するか否かを以下のキーワードで指定します。

yes 翻訳を許可します。
no 翻訳を許可しません。

カスタムデータ 【 】

「data-*****=" "」のような形式で制作者が自由に指定できる属性です。JavaScriptを利用してデータを処理したり、独自のデータを入力したりするために使います。

イベントハンドラ属性

イベントハンドラ属性は、属性値に記述したJavaScriptのコードを閲覧者の操作に合わせて実行する属性です。例えば、以下のような属性があります。

onclick 【 オン・クリック 】

閲覧者が対象となる要素をクリックしたときに、スクリプトを実行します。

oninput 【 オン・インプット 】

閲覧者が入力コントロールにデータを入力したときに、スクリプトを実行します。

onsubmit 【 オン・サブミット 】

閲覧者が入力コントロールからデータを送信するときに、スクリプトを実行します。

関連まとめ記事