HTMLの要素には、それぞれの要素ごとで指定できる属性と、どの要素でも指定できる属性の2種類があります。
後者のどの要素でも指定できる属性のことを「グローバル属性」といいます。
classやidなどがわかりやすいかと思います。<div class=”” id=””>のように、HTMLを書くなかで、何回も色んな要素に対して指定しますよね。
HTML5のグローバル属性
classやidも含め、HTML5で定義されているグローバル属性にはどのようなものがあるかみていきましょう。
title
要素の補足情報をつけるときにtitle属性を使います。
ツールチップでの表示内容を記述しておいたり、値に任意のテキストを入れることができます。
また、音声ブラウザの環境では、title属性の値が読み上げられます。
以下の”KUBOGEN”というリンクにカーソルを合わせると、少し遅れて、「トップページに戻る」というツールチップが表示されます。
KUBOGEN
accesskey
ショートカットキーを割り当てることができる属性です。
アクセスキーとはそもそも、マウスが使えない環境などでキーボードのショートカットキーを使って、リンクで移動したり、ボタンを押したり、入力フォームに入力できるようにしたりすることができるもの。
そのショートカットキーをaccesskeyを使って決めることができます。
値には半角英数字（大文字・小文字は区別）を1文字だけ指定します。
<タグ名 accesskey=”a b”></タグ名>
※半角スペースで区切り、複数の値を指定することも可能。
tabindex
[Tab]キーを押したときに、フォーカスの優先順位を決めることができる属性です。値には数字を入れるのですが、正の値を指定すると昇順（小さい数字から大きい数字の順番）に、-1など負の値を指定すると要素はフォーカスされません。
0を指定した場合は、最後にフォーカスされます。
| 正の値 | 昇順でフォーカス |
|---|---|
| 負の値 | フォーカスされない |
| 0 | 最後にフォーカス |
contenteditable
contenteditableは、Webページを見ているユーザー（閲覧者）によるブラウザ上でのコンテンツの編集を許可するか許可しないかを指定する属性。
値にはtrueもしくはfalseを記述します。
<タグ名 contenteditable=”true”></タグ名>
| true | 閲覧者にコンテンツ編集を許可 |
|---|---|
| false | 閲覧者にコンテンツ編集を許可しない |
下記の枠にはcontenteditable=”true”を指定しているので、クリックしてみると自由に編集することができます。
spellcheck
スペルチェックを行える属性で、値にはtrueかfalseを指定します。
| true | スペルチェックをする |
|---|---|
| false | スペルチェックをしない |
スペルチェックを有効にしていると、スペルミスの単語には赤い下線が表示されます。
translate
要素の内容を翻訳するか翻訳しないかを指定する属性です。
| yes | 翻訳する |
|---|---|
| no | 翻訳しない |
デフォルトではhtml要素にtranslate=”yes”が指定されているので、ページ全体が翻訳対象となっています。
lang
どの言語で記述しているのかを表す属性。
langはよく、<html lang=”ja”>というような感じで、html要素に指定することが多い属性ですが、これもグローバル属性のため、他の要素に対しても指定することができます。
ちなみに<html lang=”ja”>は、htmlの文書全体に日本語で記述することを指定しているという意味です。
dir
テキストの書字方向を指定する属性。
左から右（left to right）、右から左（right to left）で指定することができます。
| ltr | 左から右 |
|---|---|
| rtl | 右から左 |
hidden
要素が現時点において、ページに関連性がない場合にhiddenをつけることで、非表示にできる属性です。
hiddenは論理属性といって、値を指定する必要がない属性です。その属性が存在しているかいないかに意味があります。
<タグ名 hidden></タグ名>
hiddenは単に要素を隠すために使うものではなく、一定の条件を満たしたときに表示させたりするときに、最初は非表示にするために使います。
カスタムデータ
情報を格納したり、JavaScriptやjQueryでその情報にアクセスしたりするときに使います。
カスタムデータ属性は任意で決めることができ、data-◯◯=”△△”といった形で独自のデータを入れます。
style
style属性を使うと、css同様のスタイルを指定することができます。
値にはcssのプロパティと値を記述します。
style属性を使って文字の色を赤くしています。
class
最初に少し紹介した、よく使うグローバル属性ですね。
class=””という形で要素にクラス名をつけ、cssでスタイル情報を割り当てるために使います。
半角スペースを入れて、1つの要素に複数のクラス名をつけることが可能です。
id
classと似たようなグローバル属性です。
要素に固有の識別名をしていするもので、classと違うのは、1つの要素に複数の値を指定することができないという点。
id=””という形で記述します。
[…] 関連記事 『グローバル属性はHTMLの全ての要素に使うことができる』 […]