HTMLのidとclassの違い【初心者の勉強メモ】

HTMLを勉強中のプログラミング初心者です(現職は編集・ライティング)。

HTMLを書いていく際、要素に付与する属性である、idとclassの違いについてまとめました。

サクッと検索したところだと、最も理解しやすかった解説は『All About』の、スタイルシートの class と id の違いと使い分け

こちらの解説を引用しつつ、自分なりの解釈も添えていきます。

idは要素の識別子

idは要素の識別子という風に捉えるとわかりやすい。

「固有の名前を割り当てる」
→ 同じid名は、1ページ中に1度しか使えない。

class属性が対象の「種類・部類」を表しているに過ぎないのに対して、id属性は対象に「固有の名前」を付けて一意に表すために使われます。ですから、1ページ中に同じid名は1度しか使えません。

スタイルシートの class と id の違いと使い分け [ホームページ作成] All Aboutより

この要素は他のものとは違うものですよ、と開発者が区別したい。
またブラウザ(やクローラーか)にも、ページの構造を理解してほしい。
そのために添えるものが「id」。

classは、idより上位の概念

上位の概念というと難しいが、
idを豚肉、classを肉とすると理解できるのではないか。

肉は豚肉を内包する上位概念である。
順番としては、食材>肉>豚肉 という感じ。

class「肉」に、id「豚肉・牛肉・鶏肉」が属すというような。

今回参考にしたスタイルシートの class と id の違いと使い分け [ホームページ作成] All Aboutにもidは学籍番号、classは学級名という例えが用いられている。

学籍番号は一意のものでなければ生徒の識別はできず、A組・B組のように同じ学級名(クラス)に属する生徒はいくらいても問題ないという解説がある。

classはidの上位概念という風に理解すると腑に落ちた。

まとめ

他者に見せる前提でコーディングをしていく意識をもつと、idの使いどころがわかってくるように思う。

「この要素はこんな意味があるんですよ」という説明を、コードを見た人やブラウザや検索エンジンのクローラーに伝えられるため。

この考え方を用いれば、属性の使い分けもスムーズにできそう。
将来的に複数人で開発したり、他者に依頼したりする際にも役立つかなと。

ABOUTこの記事をかいた人

編集者。メディアづくり・チームづくり・コーチング(編集の)が得意。生きづらさを市場化すべく試行錯誤中。薬を飲むの苦手、手数の多い単純作業苦手、声の大きい人苦手、飲み会苦手。根性叩き直し中。目標はリオネル・滅私。