If you read my recent article on “What is a class HTML?” you may have wondered when to use “id” or class in HTML. This article will unpack that answer and give you a few guidelines when using ids in HTML.
Attributes are added to elements in an HTML document to facilitate styling through CSS files or add functionality through Javascript. The attribute that you will most often see is the class attribute, but you may come across an “id” attribute once in a while.
The “id” attribute is different from the class attribute because it is unique to a document. If you want a style to apply to a single element on a page, you should use “id”. If you want a style to apply to multiple elements on a page, you should use the class attribute.
Knowing when to use “id” or class in HTML is only part of why ids exist. They have other functions and rules that apply to them that you can find below.
What elements can I add an ID to?
If you are have decided to start learning HTML in 2022, as I have, you have probably started learning HTML5.
In HTML5, the “id” attribute can be applied to any HTML tag or element, including tags like the <head> and <body>, which is one of the differences between HTML5 and its predecessor.
How many times can I use the same id on a page?
An “id” is required to be unique on a document. This means that you can only have one “id” with the same name on the document.
I have found that there is never a good reason to use the same “id” on a page more than once. An “id” is a unique identifier for a single page segment. The class attribute should be used when you want to apply the same style to several elements on a page.
HTML id attribute rules
Three main rules apply to “id” attributes.
Firstly the “id” attribute must be unique to the document. The “id” attribute must start with a letter, which can be upper or lower case. Subsequent characters can be letters, numbers, hyphens, underscores, colons, and full stops.
Why use the id attribute over class?
If you have only started your coding journey, you wouldn’t be wrong for asking this question because, at first glance, it seems like ids and classes are the same, but ids appear to be more limited, so why use the “id” attribute over the class attribute?
One of the main reasons to use an “is” attribute is because JavaScript has a “getElementById” method. Calling this method in JavaScript will allow you to select and apply a script to a unique element in your document.
Can an element have an “ID” and a class attribute?
Yes, HTML elements can have an “id” and class attribute. When both attributes are assigned, the class attribute is likely applying a CSS style while the “id” attribute is applying a script to the element.
Conclusion
While ids and classes may seem to be the same thing at first, you will quickly see that they serve a purpose when you start working with JavaScript.
Did you know the difference between a class and an id and when you should use id or class in HTML?
I hope this article inspired you to take that leap and start learning to code. Click Here to meet other new coders like you and join our community.
