id and class
An id identifies a single element on an HTML page. Like MrBelfry says, it's often used in scripts, and when doing CSS positioning to address particular areas. Only ONE element on any given page can have a particular id. For example you might want to identify a particular <div> which contains a menu:
[tt]
<div id="menu">
[/tt]
A class identifies a particular type of element. The same class can be applied to multiple elements on a page, even to different tags. You use them to apply visual styles to certain parts of your document. For example, say you want to make text written in French appear different to that in English:
[tt]
<p class="french">Quelques nombres en française et anglais:</p>
<ul>
<li class="french">un</li>
<li>two</li>
<li>three</li>
<li class="french">quatre</li>
</ul>
[/tt]
Your style sheet would have to define a style to go with this class:
[tt]
.french { color:blue; }
[/tt]
I rarely use ids, I use classes all the time.
<span> and <div>
As can be seen above, classes and ids are applied to HTML tags. What if the text you want to style is just part of the content of an element? What if it's the content of a whole succession of them? That's where <span> and <div> come in.
<span> is an inline element that marks up a string within another element. It behaves like <b> or <i>, but doesn't do anything - it's only a placeholder for a class or a div. For example, what if you want to markup one of George Bush's pearls of wisdom:
[tt]
<p>The French have no word for <span class="french">entrepreneur</span></p>
[/tt]
<div> is a block element that encloses multiple elements, applying the same CSS to all of them. It's probably more like a <td> than a <p>, in that it can enclose multiple paragraphs, tables, images, etc. Like <span> it doesn't DO anything in itself (apart from force its contents to start on a new line, if they weren't going to already) but is used to apply styles to. It's most commonly used for CSS positioning, but can also be used to save typing:
[tt]
<div class="french">
<p>Les nombres, encore un fois:</p>
<ul>
<li>un</li>
<li>deux</li>
<li>trois</li>
</ul>
</div>
[/tt]
-- Chris Hunt
