HTML学習初心者のつまずきポイント第1位がname, id, class属性の使い分けと言われています（どこで）。
というわけで、これらの属性の違いと使い方をわかりやすく解説したいと思います。
HTMLの歴史から見るname, id, class属性
いきなり歴史のお勉強です。退屈そうですね〜。でも、name,id,class属性の使い分けの分かりにくさの理由を知るには、HTMLの歴史を知る必要があるのです。
昔はname属性しかなかった
1993年にいわゆるHTML 1.0がリリースされました。このときすでにname属性は存在していました。そしてname属性は要素に名前をつける唯一の方法でした。
主に、formの要素に名前をつけるときや、ページ内リンク<a>のターゲットに名前をつけるときに使われていました。
JavaScriptの誕生が1995年、CSSの誕生が1996年です。それより前に誕生していたname属性は、JavaScriptやCSSから要素を参照するための属性としては不十分な仕様でした。そして、より柔軟な要素の識別方法が求められるようになります。
id, class属性の登場
1999年、HTML 4.01でidおよびclass属性が導入されます。
この時点から、name属性は主にformの要素に名前をつけるときに使用され、それ以外はidまたはclass属性の使用が推奨されるようになりました。
ただし、name属性の使用が禁止されたわけではありません。昔と同じように使うことも可能です。ただ非推奨となっただけです。
以上のような経緯があるので、 id, class属性と比べてname属性の使い方はぼんやりしているのです。
name, id, class属性の違い
| 属性 | 特徴 | 主な用途 | |
|---|---|---|---|
| 一意性 | 複数指定 | ||
| name | form関連要素の名前 meta要素の名前 | ||
| id | CSSやJavaScriptからの参照名 ページ内リンクのターゲット名 | ||
| class | CSSやJavaScriptからの参照名 | ||
一意性とは、1つのページ内で複数の要素に同じ名前をつけることができるかどうかです。idはできません（一意性あり）。nameとclassはできます（一意性なし）。
複数指定とは、1つの要素に複数の名前をつけることができるかどうかです。nameとidはできません。classはできます。
name属性
nameはHTMLの要素に名前をつけるための昔からある属性です。
現在は、formの要素に名前をつけるときとmeta要素に名前をつけるときに使われます。
form要素での利用
name属性はformの要素（input,textarea,selectなど）に名前をつけるときに使います。
<form action="submit.php" method="post">
<input type="text" name="username">
<textarea name="body"></textarea>
<input type="submit" value="送信">
</form>上記のフォームを送信すると、サーバにusername=値, body=値という形でデータが送信されます。つまり、name属性はフォームの入力欄の項目名を指定するために使われます。
meta要素での利用
<meta>タグはHTML文書のメタデータを設定するときに使われます。
例えば、HTMLヘッダに次のように記述します。
<head>
<meta name="author" content="勘解由小路まさを">
<meta name="description" content="「WAKUWAKUネット」は人を幸せにするサイトです。">
<meta name="keywords" content="壺, 印鑑, お布施, 合同結婚式, 開運セミナー">
</head>id属性
idはHTMLの要素に一意な名前をつけるための属性です。
1つのページ内で異なる要素に同じid名を設定することはできません。また、1つの要素には1つのid名のみを設定することができます。
CSSやJavaScriptから要素を参照するときの識別名やページ内リンクのターゲット名を指定するときに使われます。
CSSでの利用
id属性で名前をつけた要素をCSSでスタイリングするには次のようにします。
<p id="myElement">このテキストにスタイルを適用します</p>
<style>
#myElement {
color: red;
font-weight: bold;
}
</style>JavaScriptでの利用
id属性で名前をつけた要素をJavaScriptで操作するには次のようにします。
<p id="myElement">このテキストを変更します</p>
<button onclick="changeText()">テキストを変更</button>
<script>
function changeText() {
const element = document.getElementById('myElement');
element.innerHTML = '新しいテキスト';
}
</script>ページ内リンクでの利用
id属性で名前をつけた要素にページ内リンクで移動するには次のようにします。
<h1 id="section1">セクション1</h1>
<p>あ〜あ、大金持ちの家に生まれたかったなぁ。</p>
<a href="#section1">セクション1に移動</a>class属性
classは複数のHTMLの要素に名前をつけてグループ化するための属性です。別の言い方をすると、同じ性質を持っている要素にタグをつけるような感じで使います。
1つのページ内で異なる要素に同じclass名を設定することができます。また、1つの要素に複数のclass名を設定することもできます。
CSSやJavaScriptから要素を参照するときの識別名を指定するときに使われます。
CSSでの利用
class属性で名前をつけた要素をCSSでスタイリングするには次のようにします。
<p>
<span class="highlight">スタイルが適用されます。</span>
適用されません。
<span class="highlight">適用されます。</span>
</p>
<style>
.highlight {
background-color: yellow;
}
</style>JavaScriptでの利用
class属性で名前をつけた要素をJavaScriptで操作するには次のようにします。
<p class="myElement">このテキストを変更します</p>
<button onclick="changeText()">テキストを変更</button>
<script>
function changeText() {
const element = document.getElementsByClassName('myElement')[0];
element.innerHTML = '新しいテキスト';
}
</script>複数のclass名の指定
1つの要素に複数のclass名を指定する場合は、スペースで区切ります。
<p><span class="highlight important">このテキストにスタイルを適用します。</span></p>
<style>
.highlight {
background-color: yellow;
}
.important {
color: red;
}
</style>name, id, class属性の使い分け
以上を踏まえて、用途別の使用すべき属性は次のとおりになります。
| 用途 | 使用する属性 | 説明 |
|---|---|---|
| form関連要素の名前 | name | nameしか使えません。 |
| meta要素の名前 | name | nameしか使えません。 |
| ページ内リンクのターゲット名 | id | nameも使えますが非推奨です。 |
| CSSからの参照名 | id,class | どちらかというとclassのほうがよく使われます。 nameも使えますが非推奨です。 |
| JavaScriptからの参照名 | id,class | どちらかというとidのほうがよく使われます。 nameも使えますが非推奨です。 |
まず、form関連要素とmeta要素の名前をつけるときはname属性一択です。迷う必要はありません。逆にこれ以外の用途でname属性を使うことはありません。
ページ内リンクのターゲット名を指定するときはid属性一択です。昔はname属性が使われていましたが、今は非推奨です。
CSSからの参照名をつけるときはidまたはclass属性を使いますが、class属性を使うことのほうが多いです。なぜなら、複数の要素に対してまとめてスタイルを適用するのが効率的なコードだからです。
JavaScriptからの参照名をつけるときはidまたはclass属性を使いますが、id属性を使うことのほうが多いです。なぜなら、JavaScriptで要素を操作するときは特定の1つの要素を扱うことが多いからです。
1つの要素にid属性とclass属性の両方を指定することもできます。また、id名をつけた要素の子孫要素にclass名をつけるというように、idとclassを組み合わせて使うこともあります。
さいごに
なんだかんだと言ってきましたが、
- ページ内に1つしかないものには
id属性を使う - 複数あるものには
class属性を使う
でいいと思います。
でわでわ
コメント