The HTML tags div and span hold no presentational value by themselves. This means that if you put then in your HTML, they will not actually display anything.
These tags are primarily used as "hooks" for your CSS. You use them to divide or label your HTML (when another, more semantic tag will not work) and use CSS selectors to target them.
Class and Id's are HTML Attributes. They are also used as CSS hooks.
From Stylin' With CSS by Charles Wyke-Smith:
...most XHTML tags fall into two broad categories in respect to the way they display on the page: block and inline. Block level elements such as headings <h1> through <h6> and paragraphs <p> will obligingly stack down the page with no line breaks required. They even have preset margins to create space between them. Inline elements have no such margins, and sit side by side across the page, only wrapping to the next line if there is not enough room for them to sit next to each other. (p. 18)
The div tag is a block level HTML element. It is used to divide or section of other HTML tags in to meaningful groups.
A perfect example of the use of a div tag is to designate a navigation list:
<div id="navigation">
<ul>
<li><a href="index.html" title="Go Home">Home</a></li>
<li><a href="about.html" title="Learn more about us">About</a></li>
<li><a href="contact.html" title="Contact us">Contact</a></li>
</ul>
</div>
The span tag is an inline HTML element that is used to group a set of inline elements. Generally speaking, you use span to hook text or a group of tags that you want to style differently. Often though, you can do this more semantically by using other elements like em or strong.
A good example of an appropriate use of span is in a header that you want to style in two parts.
<h1>Comm 244: <span class="coursename">Design for the WWW</span></h1>
id attribute is used to label sections or parts of your HTML document.
You may only use the same id once per page, so save it for important major sections of your page. Additionally, the id selector in CSS has a high specificity level and therefore overrules other things (like the class selector).
<div id="navigation">
<ul>
<li><a href="index.html" title="Go Home">Home</a></li>
<li><a href="about.html" title="Learn more about us">About</a></li>
<li><a href="contact.html" title="Contact us">Contact</a></li>
</ul>
</div>
<div class="aside">
<h3>Sidebar Title</h3>
<p>sidebar text Lorem ipsum dolor sit amet,
consectetur adipisicing elit.</p>
</div>
Here are some articles with more information about divs, spans, ids and classes.