HTML要素の属性でidとclassがあります。コードを見てると一番よく見る属性だと思いますが、違いや用途をよくわからずに使ってる人も多いと思います。

idとclassってなに？

HTMLやWebアプリの勉強をしてるとふと思う事があるかと思います。このidとかclassは何の意味があるんだろうと。HTML要素を書いてく中で必要な属性を調べても特にidとかclassは含まれてない。でも参考書とかのサンプルには書かれている。これは…何？という感じですね。

idとclassはグローバル属性と呼ばれるもので、書いても書かなくても基本的にHTML要素自体には何の影響も与えません。じゃあ何のためにというとスクリプト（js）やスタイル（css）で要素を指定するために使用します。

グローバル属性について

グローバル属性とはHTML 要素で共通の属性であり、これらの属性はすべての要素で使用できます。WebでHTML要素の属性を調べてもidとかclassが書かれてないのはそのためです。idとclass以外にもグローバル属性はありますので興味がある方は以下のリンク先を参照して下さい。
Global attributes - MDN

idの定義

文書全体で一意（ユニーク）でなければならない識別子です。同じ文書内で一度しか使えません。

classの定義

文書全体で同じクラス名を複数を割り当てる事ができます。一つの要素に複数のクラス名を割り当てる事もできます。

idとclassの使い分け

例えば以下のようなHTMLがあるとします。
ここではcssを例として使用しましたがスクリプトでも同じ事です。

・・・
<style>
    #name { color: red; }
    #gender { color: blue; }
    #address { color: green; }
    .form { width: 200px; }
</style>
・・・
<div id="name">名前<input class="form" type="text" name="name"></div>
<div id="gender">性別<input class="form" type="text" name="gender"></div>
<div id="address">住所<input class="form" type="text" name="address"></div>
・・・

この場合、input要素の入力フォームには全て同じ横幅を適用して、個別の項目毎にそれぞれフォントカラーを指定するようになっています。このように共通のスタイルを指定しておく事で、この後input要素がいくら追加されようともclass="form"を記述すれば同じスタイルを適用する事が出来る訳です。