HTML属性のidとclassの使い分け

すごい単純なことなんですけど、使い分けを知らなかったのでメモnote。

HTMLでidをつける場合

そもそもidってのがなんの略なのかを知らないという無知っぷりでした。

id：idinfication(身分証明)の略

つまり、HTMLではユニークで重複しないものにid属性を付与します。JavaScriptなんかでは、よくidのvalueをもとに要素にアクセスしますが、idはユニークなので一つの要素しか取得しません。HTMLでは、「id属性値は他と被ってはダメ！」と覚えておけば問題ありませんね。

HTMLでclassをつける場合

classは学校のクラスと同じように、そのクラスには多くの生徒(要素)を伴います。よって、「このクラスに所属している要素には共通の処理を行う」時のように、複数で使う場合はclassを付与します。

英語の知識があればこんなの考えればわかることなのですが、今まで知らなかった恥ずかしい...

id, classの属性値の区切り文字について

id, classの属性値の区切り文字には慣習があるそうです。idの区切り文字にはアンダーバー("_")、classの区切り文字にはハイフン("-")を使うのが一般的のようです。

<div id="notification_lists">
    <div class="notice-wrap"></div>
    <div class="notice-wrap"></div>
</div>

こんな感じですかね？idにはアンダーバーを使うとか、classにはハイフンを使うとか、これらは明確に決まっているルールではないので、色々と論争があるようですよ(笑)

htmlのid属性とclass属性の命名はハイフンかcamelかsnakeか - Qiita

上の記事が面白かったのでリンクを載せておきました。