Tue, 2005-05-03 17:38
The ID Attribute:
is a unique name identifier that can be applied to an element. IDs start with hashes (#).
An ID has many uses - one of which is that it can be used as a selector in CSS stylesheets, to which rules can be applied. In this sense it is usually used to style major page elements, such as containers that occur only once, and are suited to the fact that an ID must only be used once per page.
The ID also serves a general purpose of providing a named reference point for scripts to hook into, and form input elements to be named and referenced by.
Warning - IDs have a higher specificity than classes.
<div id="links" class="bluetext"> </div>
#links {
color: goldenrod;
}
.bluetext {
color: blue;
}
In this example, the CSS would make the text nice and golden, regardless or order - <div id="links" class="bluetext"> or <div class="bluetext" id="links">.
The Class Selector:
Is a CSS specific selector that works much the same way as an ID, in that you can assign a set of rules to a class, and then use it to style an element. Classes start with periods (.)
The major difference is that you can re-use a class in the html as often as you wish.
Tags and Elements:
A Tag is the actual element name that is contained within the angle brackets - <head>, <p>, etc.
Consider the humble anchor tag, <a>. The 'a' is the element name, and along with the first angle bracket constitutes the start tag.
This is about the only time the word tag is used really as it's usual to be referring to the detail within the start tag:
<a href="alink.html">a page</a>
The detail that goes to make up a tag, such as an anchor (i.e the href link, title attribute, link text etc) constitutes what would be referred to as an element - it is the anchor element in this case, and it would be incorrect to refer to it as the anchor tag
Examples
Consider the following:
<div id="news" class="bluetext"> </div> <div id="links" class="bluetext"> </div>
The div is the element, the id allows you to target individual boxes, and the class allows you to style multiple elements.
Example CSS:
#news {
width: 500px;
}
#links {
width: 200px;
}
.bluetext {
color: blue;
}
This also highlights a major point- poor class names. You should avoid such things as spanglybluetext and what not - the names should be design independant.
For example, instead of using the class 'bluetext', you could use the term 'emphasis', or 'boxtext' - as you may change it in the CSS.
Thanks to Briski for the specifity, and Hugo for the main explanations. 
