HTMLを勉強中のプログラミング初心者です(現職は編集・ライティング)。
HTMLを書いていく際、要素に付与する属性である、idとclassの違いについてまとめました。
サクッと検索したところだと、最も理解しやすかった解説は『All About』の、スタイルシートの class と id の違いと使い分け 。
こちらの解説を引用しつつ、自分なりの解釈も添えていきます。
idは要素の識別子
idは要素の識別子という風に捉えるとわかりやすい。
「固有の名前を割り当てる」
→ 同じid名は、1ページ中に1度しか使えない。class属性が対象の「種類・部類」を表しているに過ぎないのに対して、id属性は対象に「固有の名前」を付けて一意に表すために使われます。ですから、1ページ中に同じid名は1度しか使えません。
この要素は他のものとは違うものですよ、と開発者が区別したい。
またブラウザ(やクローラーか)にも、ページの構造を理解してほしい。
そのために添えるものが「id」。
classは、idより上位の概念
上位の概念というと難しいが、
idを豚肉、classを肉とすると理解できるのではないか。
肉は豚肉を内包する上位概念である。
順番としては、食材>肉>豚肉 という感じ。
class「肉」に、id「豚肉・牛肉・鶏肉」が属すというような。
今回参考にしたスタイルシートの class と id の違いと使い分け [ホームページ作成] All Aboutにもidは学籍番号、classは学級名という例えが用いられている。
学籍番号は一意のものでなければ生徒の識別はできず、A組・B組のように同じ学級名(クラス)に属する生徒はいくらいても問題ないという解説がある。
classはidの上位概念という風に理解すると腑に落ちた。
まとめ
他者に見せる前提でコーディングをしていく意識をもつと、idの使いどころがわかってくるように思う。
「この要素はこんな意味があるんですよ」という説明を、コードを見た人やブラウザや検索エンジンのクローラーに伝えられるため。
この考え方を用いれば、属性の使い分けもスムーズにできそう。
将来的に複数人で開発したり、他者に依頼したりする際にも役立つかなと。