What's the difference between IDs & Classes? | HTML, CSS & JavaScript

When developing a website or web application, it's important to keep in mind the difference between an ID and a Class, and to know when to use each one and why.

The primary thing to remember about this is that you should be using an ID for a unique element that only exists once on the document whereas classes are more appropriate for multiple elements that serve the same purpose.

In this video I take you through this topic and how it affects not only your HTML markup but also your CSS code and JavaScript.

For your reference, check this out:

Support me on Patreon:

Follow me on Twitter @dcode!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[adamrobinson]

Really helped me understand the difference as when I read about it, I didn't really understand. Cheers!

[verlouria]

Ty I'm doing one of these 5d boot camps to see if coding is something I want to pursue or if my brain can handle it.... and I got hung up on the difference of class and id selectors but you explained it really well. It was a lot easier than I was making it out to be.

[yass]

Very helpfull! I get the ID and Class more now related to Javascript. Thank you!

[hassanlearning]

The explanation was clear and easy to understand. The examples provided were also very helpful. Thank you.

[tumanahwulukau]

Suddenly it just became clear! Thank you !

[jetskeeter]

Wow, that makes it all clear now. Now I know I shouldn't be abusing the ID when I work with javascript and the fact that I have should know that ID needs to be unique or that it cannot use its name multiple times. Reading about it confuses me when I only work with html and css as I can use id name multiple times.

[depelterturbo]

Wow man it was so easy to understand. Thanks a lot.

[NetherworldBibliotek]

THANK YOU! Finally, a simple explanation!

[alexanderrepollo]

Thank you so much!, Finally I could understand th difference between them :D.

[ChristopherClaudioSkierka]

Big help thanks ps how did you copy the div multiple times, what key did you use etc? Thanks in advance

[moza]

3:37 its returning IDs vs Classes, not Title #2
is it because let function?

[jimsmith]

Thank you, the explanation was easy to understand.

[tinymangos]

Lol, this is the best explanation i found, , althought i've been 3 years into web development i still search for this XD

[shalomakeda]

Thanks big help, hopefully you'd upload information on others tags to for easy reference to you. - beginner

[AliSiHosseini]

Thank you a lot you for sharing such an important point.
I am a bit confused about something that I notice in this tutorial, which is the color of the <h2> why is not black and you didn't even style it yet ??.
can you make it clear for me how you had the <2> in the body part with this colour?.

[nikolaienger]

What is the shortcut he used at 1:40 ?

[roadmanrecords]

sometimes css don't recognize my class when I have to style it ? How can that be. Examble <div class="Logo"> When I type .logo{} nothing registers. Especially when I have to style multiple

[andromilk]

If you had the same title on different pages, I assume you could use the same ID also right?

[randomguy]

i used same id for 3 images in a div element and it worked for all 3 elements why?

[AtTheEnd]

In a video I watched, the narator said that the ids are used less and less and that classes are becoming more used, just because you can target multiple elements. Is this true in the industry?