HTML: Difference between ID and CLASS

Elements within an HTML document can have both, the ID attribute and the CLASS attribute. But what is behind the ID and CLASS attributes? And where are the differences?

The main purpose behind those IDs and Classes is to be able to address the elements, for example for setting CSS styles or to access elements via JavaScript. If we only had the ability to style the html basics like h1, h2, p, ol, ul, or li with CSS, we would, for instance, not be able to style two sections or lists differently. However, if we give a class specific CSS properties, it is simple to give different lists a different look: <ul class="navigation"> or <ul class="footer">. The same applies for JavaScript. Without IDs or classes, it would not be so easy to make only a specific selected DIV container visible or invisible. However, if our DIV container has a unique name like <div id="mydiv">, access is possible without any problems.

But what is the difference between an ID and a class? The basic difference is that an ID is always unique, while a class is not.

An ID is unique

An ID is always unique. This affects both the HTML elements and the entire HTML document:

• Each HTML element can have only one ID
• Within an HTML document, an ID can only occur once

For this reason, an ID is always appropriate if we want to address exactly one specific element (for example, via JavaScript) or if it is an element that appears only once in the document (for example, the CSS formatting of the header or footer). An HTML validator will also complain if an ID occurs for multiple times.

Classes are not unique

For classes, it is the opposite. A class is not unique, although it is not a problem to assign a class only once within a document. Again, the ambiguity concerns both the elements and the entire document:

• Each HTML element can have any number of classes
• Within an HTML document, the same class can be assigned to any number of elements

So, to pick up the example from above again, we can easily create any number of lists with the same class and, for example, use CSS to give all these lists the same central appearance. But classes are also suitable for JavaScript manipulations: For example, if we want to hide or show a series of HTML elements using jQuery, we can address them using the class selector $(".classname"), for example $(".classname").toggle() to show / hide all elements with <p class="classname">.

Assign IDs and Classes

We have already touched on how to assign an ID or a class to HTML elements. In the following I would like to show you some examples.

<h1 id="h">This heading has the unique ID "h"</h1>
<p class="p1">These three paragraphs all have the<p>
<p class="p1">class "p1". The last section additionally has<p>
<p id="last" class="p1 p2">the ID "last" and the class "p2".<p>

This example shows all uses cases. We can assign an ID with the attribute id="", one or more classes can be assigned with the attribute class="". If we want to assign several classes to the same element, we can just separate them with a space.

Address IDs and Classes

In the following, I would like to discuss how we can address our IDs and classes via CSS and JavaScript.

#h  {color: red}
.p1 {color: green}

In CSS, we can address an ID simply with a leading number sign respectively hash character #. So, we get the id="h" from the example with #h. For classes, we use a dot instead of the number sign and can accordingly refer to the class class="p1" with .p1. It is important not to write the dot or number sign into the HTML attributes. They are only used for addressing.

$("#h").toggle();
$(".p1").toggle();

Similarly, it is with jQuery. Again, we use dot and hash for the ID selector and class selector.

var element = document.getElementById("h");
element.innerHTML = "New Text";

In pure JavaScript, the function getElementById() is available. This function allows us to pass the name of an ID and to get the corresponding element back. In our example we set the text of h to "New text". Here, we do not have to write #h because getElementById is only made for ID searches.