要素の属性

概要

ウェブページ要素の属性（attribute）は要素の動作をカスタマイズでき、異なる属性によって要素が異なる動作を示します。要素の属性はHTMLタグの内部に「キーと値のペア」として記述されます。

<html lang="en">

上記のコードでは、<html>タグの内部にlang="en"というキーと値のペアがあり、これがhtml要素の属性と呼ばれます。属性名はlangで、属性値はenです。

属性名はタグ名と同様に、大文字小文字を区別しないため、langとLANGは同じ属性です。

属性名と属性値は等号=で結ばれます。属性値はシングルクォートまたはダブルクォートで囲むことができ、統一してダブルクォートを使うことが推奨されます。一部の属性値はクォートを使用せずに記述できますが、そうしない方が良いです。

一部の属性はブール属性であり、属性値は「オン」と「オフ」の2つの状態しかありません。この場合、属性値を省略することができ、属性名を追加するだけでその属性が有効になります。

<input type="text" required>

上記のコードでは、requiredは<input>タグのブール属性です。この属性が追加されると有効になり、追加されない場合は無効となります。

全体属性

全体属性（global attributes）はすべての要素で使用できる属性です。つまり、次の属性を任意のウェブページ要素に追加できますが、特定の要素に対しては意味を持たない場合もあります。

以下は一般的な全体属性の一覧です。

id

id属性は、ウェブページ内の要素の一意識別子です。例えば、ページには複数のタグが含まれることがありますが、id属性によって各タグにユニークな識別子を指定できます。

<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>

上記のコードでは、3つのタグが異なるid属性を持っているため、それぞれを区別できます。

id属性の値はページ全体でユニークでなければなりません。同じページ内に同一のidを持つ要素が2つ存在してはいけません。また、id属性の値には空白を含めることはできません。

さらに、id属性の値はURLの先頭に#を追加して、ページ内リンクのアンカーとして使用できます。例えば、ユーザーがhttps://foo.com/index.html#barというURLにアクセスすると、ブラウザは自動的にbarというIDを持つ要素にページをスクロールし、その部分を最初に表示します。

class

class属性は、ウェブページ要素を分類するために使用されます。異なる要素のclass属性の値が同じであれば、それらは同じカテゴリに属していることを意味します。

<p class="para"></p>
<p></p>
<p class="para"></p>

上記のコードでは、最初のタグと3つ目のタグは同じカテゴリに属しているため、class属性が同じです。

要素は複数のclassを同時に持つことができ、それらは空白で区切られます。

<p class="p1 p2 p3"></p>

上記の要素は、p1、p2、p3の3つのclassを同時に持っています。

title

title属性は要素に追加の説明を付与するために使用されます。多くのブラウザでは、要素の上にマウスをホバーするとtitle属性の値がツールチップとして表示されます。

<div title="著作権の説明">
  <p>当サイトのコンテンツはクリエイティブ・コモンズライセンスのもとで使用できます。</p>
</div>

上記のコードでは、title属性がこのコンテンツの目的を説明しています。マウスをホバーすると、ブラウザは浮動ツールチップを表示し、マウスを離すとツールチップは消えます。

tabindex

ウェブページは通常マウスで操作しますが、特定の状況ではキーボードを使いたい、あるいはキーボードしか使えない場合があります。ブラウザはTabキーを使用して、ウェブページ要素を移動する機能を提供しています。つまり、Tabキーを押し続けることで、ページのフォーカスがある要素から別の要素に移動し、フォーカスが当たった要素に対して次のアクションを行えます（例えば、リンクをクリックしたり、テキストボックスに文字を入力したりします）。

ここで問題となるのが、Tabキーを押したときに、ブラウザがどの要素にフォーカスを移すべきかです。HTMLでは、これを解決するためにtabindex属性が提供されています。この属性の名前が示すように、Tabの順序（index）を指定するものです。

tabindex属性の値は整数で、Tabキーを押した際にページフォーカスが移動する順序を表します。異なる値は異なる意味を持ちます。

負の整数：要素はフォーカスを受け取ることができます（例えば、JavaScriptのfocus()メソッドを使用）ただし、Tabキーによるフォーカス移動には含まれません。通常、この値は-1です。
0：要素はTabキーの移動に参加し、その順序はブラウザによって決定され、通常はページ内の出現順に従います。
正の整数：要素はTabキーの移動に参加し、小さい値から順に移動します。複数の要素が同じtabindex値を持つ場合は、HTMLソース内の出現順に従います。

<p tabindex="0">この段落はフォーカスを受け取ることができます。</p>

上記のコードでは、タグのtabindexが0に設定されており、この要素はフォーカスを受け取ることができ、Tabキーで移動する際の順序はソース内の位置に基づいて決まります。

一般的に、tabindex属性は0に設定して自然な順序で移動する方が、ユーザーの予想に合致します。特殊なレイアウトがある場合を除き、Tabキーによる移動順序はページ内の自然な順序が理想的です。もし、ページ内のすべての要素にtabindexが設定されていない場合、デフォルトで移動できる要素（リンクやテキストボックスなど）のみがTabキーの移動に参加し、その順序はソース内の位置に基づいて決まります。したがって、フォーカスを受け取る必要がある要素にのみtabindexを設定することが推奨されます。

accesskey

accesskey属性は、ウェブページ要素にフォーカスを与えるショートカットキーを指定します。この属性の値は1つの印刷可能な文字でなければなりません。ショートカットキーを押すと、その要素がフォーカスを受け取ります。

<button accesskey="s">送信</button>

上記のコードでは、<button>のショートカットキーはsであり、ショートカットキーを押すとその要素がフォーカスを受け取ります。

accesskey属性の文字キーは、機能キーと組み合わせて押す必要があります。つまり、ショートカットキーは「機能キー + 文字キー」の組み合わせです。ブラウザやオペレーティングシステムによって、機能キーは異なります。例えば、WindowsやLinux上のChromeブラウザではAlt + 文字キーがショートカットキーとなり、MacではCtrl + Alt + 文字キーが使用されます。

注意：accesskeyがオペレーティングシステムやブラウザのショートカットキーと衝突する場合、そのショートカットキーは機能しません。

style

style属性は、現在の要素にCSSスタイルを指定するために使用されます。具体的な設定方法については、CSSのチュートリアルを参照してください。

<p style="color: red;">こんにちは</p>

上記のコードでは、テキストの色が赤に指定されています。

hidden

hiddenはブール属性であり、現在の要素がページに関連しないことを示します。そのため、ブラウザはこの要素をレンダリングせず、ページ上に表示されません。

<p hidden>この段落はページに表示されません。</p>

上記のコードでは、このp要素はページ上には表示されません。

注意：CSSの可視性設定は、hidden属性よりも優先されます。もしCSSで要素が可視に設定されている場合、hidden属性は無効になります。

lang, dir

lang属性は要素が使用する言語を指定します。

<p lang="en">hello</p>
<p lang="zh">你好</p>

上記のコードでは、最初のタグのlang属性は英語を指定し、2つ目のタグは中国語を指定しています。

lang属性の値は、BCP47標準に準拠する必要があります。以下は一般的な言語コードです。

zh：中国語
zh-Hans：簡体中国語
zh-Hant：繁体中国語
en：英語
en-US：アメリカ英語
en-GB：イギリス英語
es：スペイン語
fr：フランス語

dir属性はテキストの読み取り方向を指定します。値には以下の3つの選択肢があります。

ltr：左から右に読む言語（例：英語）。
rtl：右から左に読む言語（例：アラビア語、ペルシャ語、ヘブライ語）。
auto：ブラウザが内容を解析し、適切な読み取り方向を自動的に決定します。

translate

translate属性はテキスト要素にのみ使用され、翻訳ソフトウェアがそのテキストを翻訳しないように指示します。

<p>
  <span translate="no">Wien<span>
  named world's most liveable city (again)!
</p>

上記の例では、translate="no"は翻訳ソフトウェアに対して、要素内のテキストを翻訳しないように指示しています。

もしtranslateがyesに設定されている場合は、そのテキストを翻訳するよう指示しています。

contenteditable

HTMLページの内容はデフォルトではユーザーが編集できませんが、contenteditable属性を使用すると、ユーザーがその内容を変更できるようになります。この属性には次の2つの値があります。

trueまたは空の文字列：内容を編集可能にします。
false：内容は編集できません。

<p contenteditable="true">
マウスをクリックして、この文章を編集できます。
</p>

上記のコードでは、マウスでクリックすることで、この文章が編集可能になります。ただし、サーバーに送信しない限り、ページをリフレッシュすると元の内容に戻ります。

この属性は列挙属性であり、ブール属性ではありませんので、値を指定することが推奨されます。

spellcheck

多くのブラウザはデフォルトでスペルチェック機能を持っており、入力時に誤った単語の下に赤い波線が表示されます。spellcheck属性は、スペルチェック機能をオンにするかオフにするかを指定します。

この属性には2つの可能な値があります。

true：スペルチェック機能をオンにします。
false：スペルチェック機能をオフにします。

<p contenteditable="true" spellcheck="true">
英単語 "separate" は "seperate" と間違えやすい。
</p>

上記のコードでは、誤ったスペル "seperate" の下に波線が表示され、誤りを示します。

この属性は編集時にのみ有効なので、contenteditable属性も設定する必要があります。マウスでクリックして編集状態にした場合にのみ、スペルチェックが有効になります。編集不可の要素では、この属性は無効です。

この属性はブール属性のように見えますが、実際には列挙属性ですので、値を省略せずに指定することが推奨されます。もしこの属性が指定されていない場合、ブラウザは自動的にスペルチェックのオン・オフを決定します。

`data-`属性

data-属性はカスタムデータを保存するために使用されます。他の属性や要素にデータを保存する場所がない場合、data-属性を使うことができます。

<a href="#" class="tooltip" data-tip="this is the tip!">リンク</a>

上記のコードでは、data-tip属性がリンクのヒント文字を保存しています。

data-属性はCSSやJavaScriptを使用して操作するため、ここでは詳細は扱いません。以下にCSSの例を示します。

/* HTML のコード
<div data-role="mobile">
モバイル専用のコンテンツ
</div>
*/
div[data-role="mobile"] {
  display:none;
}

/* HTML のコード
<div class="test" data-content="This is the div content">test</div>
*/
.test {
  display: inline-block;
}
.test:after {
  content: attr(data-content);
}

イベントハンドラ属性

上記の全ての属性に加え、グローバル属性にはイベントハンドラ属性（event handler）が含まれています。これらはユーザーのアクションに応答するための属性です。これらの属性の値は全てJavaScriptコードです。JavaScriptのチュートリアルを参照してください。ここでは、これらの属性のリストを示します。

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