Main difference between
id and class in html
Reality is, there is only one big main difference between "id" and "class" in HTML.
And that is, "id" can be used only once inside the HTML markup and "class" can be used as many times as you want.
Now, please hold on to that thought because there is more into this than just this simple difference.
How to use id once and class as many times you want
First, let's take a look to what I mean with one being able to be used once and the other one as many times as you want.
Imaging that you have three paragraphs in HTML.
<p>content one</p>
<p>content two</p>
<p>content three</p>
Sample #1
Applying "ID" to HTML
If you want to apply an "id" to each paragraph and if you want to follow the standards, you can only do this.
Look how "id" names are not repeated, they are only used once.
<p id="one">content one</p>
<p id="two">content two</p>
<p id="three">content three</p>
Sample #2
Applying "class" to HTML
On the other hand if you want to apply a "class" to each paragraph, you can either do as "id" where names are not repeated.
<p class="one">content one</p>
<p class="two">content two</p>
<p class="three">content three</p>
Sample #3
Or you can do this where "class" names are repeated.
<p class="one">content one</p>
<p class="one">content two</p>
<p class="one">content three</p>
Sample #4
Remember classes are repeatable
With classes you can repeat names as many times as you want as this won't create invalid HTML markup like with repeated "id" names.
But here is the big but
With today's browser technologies, you can actually use "id" names as many times as you want and you can repeat names without creating errors for the end users (AKA your website visitors).
So you can actually do this as well.
<p id="one">content one</p>
<p id="one">content two</p>
<p id="one">content three</p>
Sample #5
Please don't do it.
However please never do this, never repeat "id" names as it is wrong.
Using "id" more than once goes against the HTML standards and it will create invalid code on your website.
So which one should I use? ID or CLASS?
Well the answer is, it depends but as a general rule and only if you are planning to use any of these HTML attributes for CSS styling purposes, I will always recommend you to use only classes as they are safer to create valid HTML Markup.
Now of course there will be instances where you will need to use both "id" and "class" together like when you use JavaScript or like when you create HTML markup that needs both attributes.
A good example of this is this pure CSS accordion or this with the toggle plus and minus signs.
But please remember, at the end the choice is always yours and as a seasoned web developer in Fort Worth Texas, I will just end up with this.
Whatever you create with HTML and CSS, always create valid code
FAQ Section
1) Can I use class and id together?
Yes, you can use "class" and "id" together without any problems. The only recommendation is to always use unique "id" names.
Never use the same "id" name more than once. For instance having (id="solution") twice will be invalid by HTML standards.
But not only that because when using JavaScript this can become problematic in some cases.
So try to always use different "id" names.
2) Can you have two classes in HTML?
Yes, you can have two classes inside your HTML markup.
The only recommendations for you if you are planning to do this are to always use different “class” names and to always separate the “class” names by a white space.
Just exactly like in the example below. See how the “class” names “top” and “menu” are different and they are separated by a single white space.
<div class="top menu"> <p>Hello world!</p> </div>
Sample FAQ #1
3) Can an HTML element have an id and class?
Yes, any HTML element (like div, input, nav, body, etc) can have both “id” and “class” together and at the same time.
The only difference here is that “id” can have only one unique value and “class” can have more than one.
For instance see the example below.
Check how “id” has one unique value and “class” has three values.
There are no limits on how many values you can have inside a “class” but it is recommended not to go beyond 6.
Otherwise all this can become confusing with too many classes together.
<div id="golden" class="top menu right"> <p>Hello world!</p> </div>
Sample FAQ #2
4) Can two divs have the same ID?
Yes you can have the same “id” on two different div elements but this is not recommended.
Not only this goes against the HTML standards but you can also create further problems with JavaScript and invalid code.
So please always use different and unique “id” names.
For instance, the example below will be invalid by HTML standards because you are using the same "id" value "golden" more than once.
<div id="golden"> <p>Hello world!</p> </div> <div id="golden"> <p>This is me!</p> </div>
Sample FAQ #3
The example below will be valid by HTML standards because the "id" values are different.
<div id="golden"> <p>Hello world!</p> </div> <div id="river"> <p>This is me!</p> </div>
Sample FAQ #4
5) Do HTML id values have to be unique?
Yes because that’s what is recommended by the HTML standards.
Keep in mind that today you can use the same “id” name values without creating too many issues but this is still NOT recommended.
Always use unique “id” names.
6) How to use HTML "id" in CSS?
For that please visit the link below.
7) Can HTML elements (like body, tag, span, label, p, option, button, strong) have “id”?
Yes, all content elements can have an “id” name if you want.
Content elements are all elements you use within the body initial and ending tag.
Just look at the example below.
<body id="main"> <p id="text">My <span id="cont">Content</span> Goes Here</p> <p>This is a <strong id="just">bold</strong> message</p> </body>
Sample FAQ #5
8) Can HTML element “id” have spaces?
You can add spaces if you want but this is not recommended.
It will be better to stick to one unique “id” name without any space.
Just keep this in mind, t is always better to keep rolling the existing ball than creating a new one if you know what I mean.
