IDs are meant to be unique, while classes are better for a "type" of element.
So you might have something like:
<ul id="menu">
....
</ul>
Because you will probably only have 1 main menu on your site.
For classes, however, you might have something like:
<span class='author'>Paolo Bergantino</span>
Or perhaps to style the div
that contains an answer on this site:
<div class='answer'>....</div>
Because there will be multiple of these per page, they are a class of elements. Think of an ID as the social security number of an element. Whenever an element is important enough and is unique, you give it an ID. This also helps with dynamic websites as selecting elements by ID is by far the fastest way, and if you have multiple elements with the same ID (thus violating this practice) Javascript won't work as intended.