HTML Classes and IDs
HTML Classes and IDs declaration and example code
|class||Indicates the Class of the element (non-unique)|
|id||Indicates the ID of the element (unique in the same context)|
HTML Giving an element a class
Classes are identifiers for the elements that they are assigned to. Use the class attribute to assign a class to an element.
To assign multiple classes to an element, separate the class names with spaces.
Using classes in CSS
Classes can be used for styling certain elements without changing all elements of that kind. For example, these two span elements can have completely different stylings:
Classes of the same name can be given to any number of elements on a page and they will all receive the styling associated with that class. This will always be true unless you specify the element within the CSS.
For example, we have two elements, both with the class highlight:
If our CSS is as below, then the color green will be applied to the text within both elements:
However, if we only want to target div's with the class highlight then we can add specificity like below:
Nevertheless, when styling with CSS, it is generally recommended that only classes (e.g. .highlight) be used rather than elements with classes (e.g. div.highlight). As with any other selector, classes can can be nested:
You can also chain the class selector to only select elements that have a combination of several classes. For example, if this is our HTML:
And we want to colour this specific piece of text pink, we can do the following in our CSS:
Giving an element an HTML ID
The ID attribute of an element is an identifier that must be unique in the whole document. Its purpose is to uniquely identify the element when linking (using an anchor), scripting, or styling (with CSS).
You should not have two elements with the same ID in the same document, even if the attributes are attached to two different kinds of elements. For example, the following code is incorrect:
To jump to an element with an ID on a given page, append # with the element name in the URL.
HTML Acceptable Values
For an HTML ID
The only restrictions on the value of an id are:
- it must be unique in the document
- it must not contain any space characters
- it must contain at least one character
So the value can be all digits, just one digit, just punctuation characters, include special characters, whatever. Just no whitespace.
So these are valid:
This is invalid:
<div id=" "> ... </div>
This is also invalid, when included in the same document:
An id value must begin with a letter, which can then be followed only by:
- letters (A-Z/a-z)
- digits (0-9)
- hyphens ("-")
- underscores ("_")
- colons (":")
- periods (".")
Referring to the first group of examples in the HTML5 section above, only one is valid:
These are also valid:
Again, if it doesn't start with a letter (uppercase or lowercase), it's not valid.
For a Class
The rules for classes are essentially the same as for an id. The difference is that class values do not need to be unique in the document. Referring to the examples above, although this is not valid in the same document:
This is perfectly okay:
Important Note: How HTML ID and Class values are treated outside of HTML
For example, although the following id is valid in HTML5:
In most cases, you may be able to escape characters in contexts where they have restrictions or special meaning.
Problems related to duplicated HTML IDs
Having more than one element with the same ID is a hard-to troubleshoot problem. The HTML parser will usually try to render the page in any case. Usually, no error occurs. But the pace could end up in a misbehaving web page.
In this example:
CSS selectors still work
In this case HTML variable bears only the first div content ("a").
ATutorialHub Related Guide
AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2
Sea battle game only using HTML and CSS
HTML Tutorials Comments (9)
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website