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の使いどころがわかってくるように思う。

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

移動型のライター・編集者。3ヶ月〜1年スパンで拠点が変わる。得意ジャンルは旅・ライフスタイル・テクノロジー。インタビューが好き。 趣味は旅・読書・ランニング・喫茶店巡り。旅は、現地に紛れ込んでその土地の空気感を肌で感じ取るスタイル。