Difference between an ID and a Class in HTML

There was an interesting Tweet circulating recently that really got me thinking. People were sharing what technologies web developers should know as we inch closer and closer to 2021. People were suggesting everything from GraphQl to Svelte, and everything in between. However, there was one person that made an observation that really resonated with me. HTML, CSS, and JavaScript were nowhere to be found on these lists, yet they are the three pillars of web development. Mastering these three in their original form will make you a much better developer when you eventually move on to those trendy new technologies. I think too often we get overwhelmed by all of the available tools and frameworks that we initially neglect how important it is to build a solid foundation in the basics. So that is what I want to focus on this week, something simple and basic like the difference between a HTML class and an ID, and when to use them.

Last week I was practicing building a landing page using only HTML, CSS, and JavaScript. As a self-taught developer and bootcamp grad, this is something I have done many times. However, between the tutorials, Googling, and opinions of different instructors, it dawned on me that I really didn't know when to use a class, or when to use an ID. I had somehow got it into my head that it was largely a matter of personal opinion, but deep down I knew that couldn't be right. So, after I had finished coding my landing page, I looked up the proper way to use HTML classes and IDs.

We use classes and IDs in our CSS to identify particular HTML elements. This is especially useful because it allows us to present the same kind of HTML element differently, depending on which styles we apply to the class or ID. For example, we could have several h1 tags on our page, but we can style each one differently by targeting each element by its unique class or ID. This is all well and good, but when do we use a class, and when do we use an ID?

The difference between an ID and a class is that an ID is only used to identify one single element in our HTML. IDs are only used when one element on the page should have a particular style applied to it. However, a class can be used to identify more than one HTML element. Also, when it comes to specificity in CSS, IDs are more specific than classes. This means that if an element has both a class and an ID applied to it, the ID styles will be the ones the browser displays.

In the case of my landing page, which I had divided into four sections, I gave each section an ID since I only needed to style each individual section once. I also used IDs to style any other elements that needed to have their own unique styles. I used classes to style everything else. I had a section that was displaying four different blog posts, but I wanted each blog post to have the same styling, so I gave each p tag the same class. By doing this I was able to style several elements at once, but only writing styles for one class.

I hope this post has shed some light on, not only the difference between classes and IDs, but also on the importance of taking the time to learn the basics, and revisiting the basics even after you have been developing for awhile. I love using React and other cool tools as much as the next person, but let's not forget that all of our favorite tools are built on top of the core web technologies of HTML, CSS, and JavaScript. If you have a strong foundation, the sky is the limit on the kind of beautiful house that you can build on top of them.