| Parameter | Details |
|---|---|
| class | Indicates the class of the element (non-unique). |
| id | Indicates the ID of the element (unique in the same context). |
Classes and IDs simplify referencing HTML elements from scripts and stylesheets. The class attribute can be applied to one or more tags and is utilized by CSS for styling. However, IDs are intended to uniquely identify a single element, thus the same ID should not be reused. IDs are commonly used with JavaScript and internal document links, but their usage in CSS is discouraged.
Assigning a Class to an Element
Classes serve as identifiers for the elements they are assigned to. Use the class attribute to assign a class to an element:
<div class="class1"></div>
To assign multiple classes to an element, separate the class names with spaces:
<div class="class1 class2"></div>
Utilizing classes in CSS enables styling specific elements without affecting all elements of the same type. For instance, the following <span> elements can have distinct stylings:
<span></span> <span class="class1"></span>
Elements with the same class name can be styled uniformly across the page, unless specified otherwise in the CSS:
<div class="class1">This is class 1</div> <span class="class1">This is class 1</span>
However, if targeting only <div> elements with the class class1, specificity can be added in the CSS:
div.class1 { color: red; }
It’s generally recommended to utilize only classes (e.g., .class1) rather than elements with classes (e.g., div.class1) when styling with CSS. Classes can also be nested in CSS selectors, such as:
.class1 .class2 { color: green; } /* Descendant combinator */ .class1 > .class2 { color: yellow; } /* Child combinator */
Additionally, you can chain class selectors to select elements with a combination of several classes.
You have the option to chain the class selector to exclusively target elements that possess a combination of multiple classes. Consider the following HTML scenario:
<div class="class1 class2 class3">This text will be red</div>
Suppose we aim to make this particular text appear pink. In such cases, we can employ the following CSS approach:
.class1.class2.class3 { color: red; }
Assigning an ID to an Element
The ID attribute of an element serves as a unique identifier within the entire document. Its purpose is to uniquely identify the element for linking, scripting, or styling purposes.
<div id="id1"></div>
Avoid having two elements with the same ID in the same document, as it may lead to unexpected behavior when styling with CSS or adding functionality with JavaScript.
To reference elements by their ID in CSS, prefix the ID with #:
#id1 { color: red; }
To navigate to an element with an ID on a page, append # followed by the element name in the URL:
<http://abc.com/about#id1>
This feature is widely supported in browsers and doesn’t require additional JavaScript or CSS to function.
Acceptable Values
For an ID (Version ≥ 5)
The value of an ID must be unique in the document, cannot contain spaces, and must contain at least one character. Therefore, the value can include digits, punctuation characters, special characters, etc., but not whitespace.
Valid examples:
<div id="id1"> ... </div> <div id="111"> ... </div> <div id="#%a;sdm-||"> ... </div> <div id="____b"> ... </div>
Invalid examples:
<div id=" "> ... </div> <div id="id1"> ... </div> <!-- Duplicate IDs -->
The ID value should commence with a letter and may then be followed by:
- Letters (A-Z/a-z)
- Digits (0-9)
- Hyphens (“-“)
- Underscores (“_”)
- Colons (“:”)
- Periods (“.”)
Looking at the initial examples provided in the HTML5 section, only one is considered valid:
<div id="class1"> ... </div>
These formats are also acceptable:
<div id="class1"> ... </div> <div id="class-1"> ... </div> <div id="class_1"> ... </div> <div id="class:1"> ... </div> <div id="class.1"> ... </div>
Remember, if the ID value does not commence with a letter (whether uppercase or lowercase), it is considered invalid.
For a Class
Classes follow similar rules to IDs but do not need to be unique in the document. While duplicate class names are acceptable, it’s crucial to avoid duplicate IDs.
Important Note: Treatment of ID and Class Values Outside of HTML
Be cautious when using numbers, punctuation, or special characters in ID or class values, as they may cause issues in other contexts such as CSS, JavaScript, and regular expressions.
For instance, while the following ID is valid in HTML5:
<div id="1id"> ... </div>
It is invalid in CSS due to its restrictions on identifiers:
In most cases, you may need to escape characters in contexts with restrictions or special meanings.
Issues Related to Duplicate IDs
Having multiple elements with the same ID is a challenging problem to troubleshoot. While the HTML parser will attempt to render the page, it may lead to misbehavior in the web page.
For example:
<div id="id1">a</div> <div id="id1">b</div>
While CSS selectors will still work:
#id1 { color: green; }
JavaScript may fail to handle both elements:
var html = document.getElementById("id1").innerHTML;
In this scenario, the html variable will only contain the content of the first <div> (“i”).