HTML の属性とは
属性は要素に情報を追加します。開始タグの中に、名前、イコール記号、引用符で囲んだ値の順で name="value" と書きます。1 つの要素にいくつでも属性を付けられ、スペースで区切ります。
href はリンクの行き先、src と alt は画像の説明、type、placeholder、required は入力欄の設定です。要素ごとに使える属性が決まっていて、一部の属性 (下で紹介するグローバル属性) はどの要素でも使えます。
書き方のルール
<input type="text" name="city" value="Paris" disabled>
- 名前、イコール記号、引用符で囲んだ値。 ダブルクォートが一般的ですが、シングルクォートも使えます (値の中にダブルクォートを入れるには
title='Say "hi"'と書きます)。 - 名前は大文字と小文字を区別しない。
CLASSとclassは同じ属性です。値は区別されます。class="Box"とclass="box"は別のクラスです。 - スペースがなければ引用符は省略できるが、付けておく。
class=big boxと書くと、要素にはクラスbigと、意味のないboxという 2 つ目の属性が付きます。 - 順番は関係ない。
<img alt="" src="a.png">は<img src="a.png" alt="">と同じです。 - 1 つの要素に同じ名前は 1 回だけ。 同じ属性が 2 回あると、ブラウザは最初のものを残し、2 つ目は何も言わずに捨てます。
真偽属性
オンかオフかだけを表す属性があります。これらは属性があれば true で、値は無視されます。disabled、checked、required、readonly、hidden、multiple、autofocus、open がこの仕組みです。
3 つ目のボタンは値が false なのに無効になっています。ブラウザは属性があるかどうかしか見ないからです。真偽属性をオフにするには、属性を削除します。JavaScript の button.disabled = false はまさにそれをしています。
class 属性
class は要素に 1 つ以上の名前を付け、CSS や JavaScript がその名前で要素を見つけます。複数の要素で同じクラスを共有でき、1 つの要素にスペース区切りで複数のクラスを付けられます。
クラスを追加するたびに、そのルールが上に重なります。CSS ではドットでクラスを選択し (.card)、JavaScript では element.classList.add('featured') や classList.remove で変更します。スタイルを付けるときは通常クラスを使い、CSS の大半はクラスを対象にします。
id 属性
id は要素にページ内で一意の名前を付けます。リンク先、<label for>、document.getElementById など、ちょうど 1 つの要素が必要なときに使います。
for="email" が id="email" を指しているので、ラベルをクリックすると入力欄にフォーカスが移ります。リンクは href のフラグメントが id と一致するので、#pricing までスクロールします。
class | id | |
|---|---|---|
| 共有できる要素の数 | いくつでも | 1 つ (一意) |
| 1 つの要素に付けられる値 | 複数 (スペース区切り) | 1 つ |
| CSS セレクタ | .name | #name |
| 主な用途 | 要素のグループにスタイルを付ける | リンク先、ラベル、JavaScript で扱う特定の要素 |
id にスペースは使えません。CSS で扱いやすいように英字で始めましょう。#2col はエスケープしないと有効な CSS セレクタになりません。
グローバル属性
次の属性はどの要素でも使えます。
| 属性 | 働き |
|---|---|
id | 要素の一意な名前 |
class | スペース区切りのクラス名のリスト |
style | インライン CSS (style="color: red" など) |
title | マウスを重ねたときに表示されるツールチップ |
lang | 内容の言語 (lang="fr" など) |
dir | 文字の方向: ltr、rtl、auto |
hidden | 要素を非表示にする (真偽属性) |
tabindex | Tab キーでフォーカスできるようにする、または順番を決める |
contenteditable | ユーザーが要素のテキストを編集できるようにする |
data-* | JavaScript で読み取る独自のデータ |
lang 属性 はスクリーンリーダー、翻訳、検索に影響するので専用のページがあります。
data-* 属性
要素に独自の値を持たせたいときは、名前の先頭に data- を付けます。接頭辞の後はどんな名前でも使え、JavaScript からは element.dataset で読み取れます。ハイフンはキャメルケースに変換されます。
data-product-id は dataset.productId になります。値は常に文字列で返るので、計算する前に Number() で変換しましょう。CSS からも選択できます: [data-price="4.50"]。
よくある間違い
classを 2 回書く。<div class="a" class="b">ではaしか残りません。1 つの属性にまとめます:class="a b"。- id を使い回す。 同じ id の要素が 2 つあると、
#links、ラベル、getElementById(最初の 1 つしか返さない) が正しく動きません。繰り返すものにはクラスを使いましょう。 disabled="false"やchecked="false"。 属性が残っているので、オンのままです。属性を削除しましょう。- スペースを含む値を引用符で囲まない。
alt=My photoではaltがMyになります。値はすべて引用符で囲みましょう。 data-なしで属性を作る。<div price="4">は無効な HTML で、将来の標準の属性と衝突するおそれがあります。data-priceを使いましょう。
よくある質問
HTML の属性とは何ですか？
属性は開始タグの中に name="value" の形で書く追加情報です。要素の設定を決めます。href はリンクの行き先、src と alt は画像の説明、class と id は CSS や JavaScript が要素を見つけるための名前です。
HTML の class と id の違いは何ですか？
id はページ内で一意でなければならず、1 つの要素を特定します。#fragment リンク、<label for>、getElementById で使います。class は複数の要素で共有でき、1 つの要素にスペース区切りで複数のクラスを付けられます。スタイルにはクラスを使いましょう。
HTML 要素に複数の class を付けるには？
1 つの class 属性にスペースで区切って書きます: <div class="card featured dark">。class を 2 回書いても効きません。ブラウザは最初の 1 つだけを残します。
HTML の属性値に引用符は必要ですか？
値にスペースや特殊文字がなければ省略できますが、常に引用符で囲むのが安全です。class=big box と書くと、要素にはクラス big と、box という別の属性が付きます。
disabled="false" と書いてもボタンが無効のままなのはなぜですか？
disabled は真偽属性で、値に関係なく属性があるだけで true になります。要素を有効にするには属性を削除するか、JavaScript で button.disabled = false とします。これで属性が削除されます。
HTML の属性を自分で作れますか？
data- を先頭に付けます。data-price="12" や data-user-id="7" はどの要素でも有効で、JavaScript から element.dataset で読み取れます。接頭辞のない独自の名前は無効な HTML です。
