HTML: id と class の違い

id

HTML内で一意に識別可能な識別子である。そのため、同一のHTMLファイル内では、"id"は重複してはならない。また、"name"属性とも名前が重複してはならない。

"id" は、スタイルシートで定義したスタイルを適用する際にも使用するが、他にも、<a> タグやJavaScriptでも使用する。JavaScriptで使用する場合には、"id" を指定して、色などのスタイルを動的に変更することができる。

class

スタイルシートで定義されたスタイルを適用するのに使用する。"class"名は、"id" と違って、同一のHTML内で名前が重複しても良い。

使い分け

スタイルシートを適用する場合における使い分けとしては、"id" は、ページの中で１つしかない要素、例えば、ヘッダ部、フッタ部、メニュー部などで使用し、"class" はその他の部分で使用するというのが一般的でしょう。もちろん、"class" だけでスタイルシートを定義するのは全く問題ない。逆に"id"だけで構成するのは、少々苦しいかと思う。