In HTML markup, one can annotate an element using either a class or an id. Once annotated, you can apply specific styling and processing rules to that particular element. Each approach has its own format.

But when do you use one and when do you use the other?

In its tutorials, Codecademy suggests using classes for changes you'd want to apply across multiple elements (such as, say, both the "p" and the "h3" elements). "Classes are useful when you have a bunch of elements that should all receive the same styling," quoteth the e-cademy.

IDs, on the other hand, are best for annotating a single element that requires a particular styling.

A bit more explanation: 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, though with a different syntax:

<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%;}

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).

Classes and ids are formatted differently. Be careful of the differences.

id's are called within the element by the id tag, and are identified in the CSS stylesheet with a pound symbol.

Classes, in contrast, called within the element by the class tag and are identified in the CSS stylesheet through dot notation.

Here's a handy chart: