id and class Attributes

The id and class attributes can be used to identify specific HTML elements across your HTML page.

The id attribute

The id attribute provides you with the ability to give any element a unique identifier. This identifier can later be used for things like applying specific styles with CSS or capturing input with some Javascript code.

<h1 id="companyName">Educative.io</h1>

Some notes about id usage:

• An id value should only be used for a single element (you will get unexpected behavior if you use the same id value for multiple elements).
• An id value must not contain any whitespace.
• A single element cannot have multiple id values.

The class attribute

The class attribute is similar to the id attribute in that it is used to identify specific elements. The main distinctions are:

• The same class value can be used across multiple elements.
• An element can have multiple class values, separated by whitespaces.

In the example below, the id and class attributes are used to apply CSS styles (hidden) to our HTML document. Take note of the main differences between the two attributes.