In HTML markup, an id is an attribute you can graft onto a element markup tag, one that identifies that element with a word:
<p id=”sampletest”>This is the sample test</p>
The W3C defines id as the “document-wide unique id.” You can use the name of an id only once, and in a single type of tag, on a Web page. Ryan Fiat writes, “Simply put, an ID is like the sticker that says ‘you are here’ on a mall directory, and there can only ever be one of those.”
Very much like the id, a class can also be grafted onto an element, in a very similar fashion:
<p class=”sampletest”>This is the sample test</p>
The class attribute specifies a classname for an element, says the W3C. You can add your own class to most elements (except base, head, html, meta, param, script, style, and title).
A class can be used to give a name to a particular part of a web page, i.e. <p class=”preamble”>. This can be useful for manipulating that part of the HTML document, through CSS (to stylize that section), or Javascript (to process the content of that section).
Unlike an id, a class can be used across multiple tags. For example, you could have both of these elements in a document:
<h3 class=”legalese”>title</h3>
<div class=”legalese”>content</div>
You could call only one of the classes (i.e. “div.legalese”), or define legalese, and it will apply in both instances. (Click here for working example. View source to see how it works)
ALSO, another cool thing about classes is that more than one can be used in a single element. They are separated by spaces within the quotes:
<p class=”legalese preamble”>content<p>
In this case, if you have CSS stylesheet definitions for both legalese and preamble, then they would both apply to the content above.
In a CSS style sheet, for instance, you could embed these style elements in your document via CSS:
.preamble { font: bold; }
.legalese { font-size: 325%;}
And any content marked with these classes (i.e. <div class=”preamble legalese”>) would be stylized accordingly (Click here for working example. View source to see how it works).
One nice thing you can do with an id that you can’t do with a class: Internal navigation. Anchor linking, it’s called. A browser can use an id as a sort of internal navigation by attributing it to a markup tag of some sort:
<a href=”#content”>This will take you over yonder</a>
<p>hilldale</p>
<p>hilldale</p>
<p>hilldale</p>
<p>hilldale</p>
<p>hilldale</p>
<p id=”content”>Yonder!!</p>
(Click here for working example. View source to see how it works).
–Joab Jackson