SELF-SERVICE

IDは「ページ内で一回しか使わない『強い指示』」、classは「ページ内で複数回使える弱い指示」と考えてください。
まだ<header>タグがなかった時代は<div id="header">と書くことが多かったのは、ヘッダーはページに1つしかないからです。ページ内の唯一無二なものについてはIDを使います。
classはページ内で何度も使えるものです。同じ見た目の枠とかを作る時にclass指定をすると便利です。
classよりIDのほうが強いので、
<div id="hoge" class="hogehoge">
に対して、
#hoge{margin:10px;}
.hogehoge{margin:30px;}
とした場合、IDの方が強いのでmarginは10pxになります。
※というか、一つの要素に対してIDもclassも設定することってあるかな……。