How to know when to use id=“” or class=“”?

How do you know when to do id=“” versus class=“”? I see both of them and don’t know when to use one or the other

Hi @mcmichaeltyler93

In my opinion, it generally depends on what you want to do. id attributes must be unique in HTML while class attributes are re-usable. If you can stick to that rule, it is up to you.

Personally, I prefer using classes throughout. However some people use classes if they want to select multiple elements and go for id if they want to select a single element in CSS or JS. Some methodologies like BEM advocate for use of classes.

I think the article below provides some insights.

The difference between id and class

1 Like

IDs can also be used for same-page links (i.e. linking from top navigation to a part of the page below), and sometimes for HTML form label/input tags to correlate them together.

Classes are not used for either of those purposes. If the purpose is for styling with CSS, that generally means you should use a class. Even though you can select an ID with CSS, it’s not the most typical use case.

1 Like

To me, it’s in the name. An “id” is a unique identifier. “nav-menu”, “our-story”, “footer” - things where there is only one and the id tells you exactly what it is. A “class” is a class of things, a category: “red-text”, “person-record”, etc. It’s where you either describe an aspect of it or describe the category of things.

Yeah, some people just use class for everything - that always seems odd to me.

Hi @mcmichaeltyler93!
As many of the others also mentioned: id is suppose to be used to give a unique name to an element while class is something that is more general.
I think of it like this: An id is similar to your name (Mc Michael Tyler) while class may be more similar to a description of you (creative, kind, tall, blond, 28 years of age). The class called “tall” may then have more specified information: an exact value how tall you are and a unit to accompany that value.
If you want to create a navigation bar I usually find it useful to have given certain (if not all) sections a unique id to link to.
Classes I usually use if I suspect there is something I will want to use for multiple parts. For example, I might know that all the sections should have green background color, and then in my mind it is easier to have one class that does that for everything rather than having to add green background color to all id-stylings. (maybe not the best example, but just to get a quick understanding)
Hope it helps! :slightly_smiling_face:

Use class="" always until you need to target an element with id="".

Thank you SO much :smiley:

So it won’t really change the layout at all if you use class or id?

Not in that alone. Those are just different ways to target things. It’s what you do with that targetting.

Hello! I use to have the same problem till it was set in my mind. A I’d as they stated is used for one section at a time for a specific location. Classes can be used anywhere. Both a I’d and a class is for css layout. So for example if you want to do a certain thing like change color or size of text for example something In that element section. Then you would use a class for that element. Remember that a class has to have a name too. It can be called anything with text. Try not to use numbers or special characters.

1 Like