blog

“The Difference Between ID and Class”

26 october 2015 | by João Pedro Gomes

When you are a rookie at web design world, you will not notice why we have ID's and classes working side by side. The truth is they don't have really significative differences in people's eyes, but, in fact, they have significative differences to the browser reading and web code validation.

What They're Used For?

Divs are the main structure of the website. ID's and classes are used like "hooks" that can connect your div with CSS and other languages like Javascript, offering you the manipulation of the div that leaves the HTML just like a virgin structure.

Advertisement
Sorry, but I need to pay my articles

The ID attribute

<div id="someExampleId"></div>
<div id="otherExampleId"></div>
<div id="justAnotherId"></div>

It's very easy and common to use IDs improperly. Visually, there is no problem with that, but at a code level, browsers and validators will not appreciate your mistake. You can only use an ID name once in any XHTML or HTML document. I repeat: You can only use an ID name once in any XHTML or HTML document. This is the most practiced mistake in HTML. IDs are unique and need to be used like that. You need to retain:

"- Each element can have only one ID
- Each page can have only one element with that ID" in CSS-TRICKS

Why do you need to play by the rules?

First of all, your code will not pass validation. Validation is one of the most important parts of a website code, if you don't pass, browsers and search machines will catalog very bad your website. In the future, I will write an article to explain what is, in fact, the validation system.

Browsers have a functionality to identify and find IDs

I'm sure you already have seen that, but don't understand it as a code function. When you add an ID to a URL the browser will search and, if exists, scroll for the ID you write. Imagine, you have in your home page code an ID called "example id". In your default URL (http://yoururl.com), you add a hashtag with your ID (http://yoururl.com#exampleid) and the page will scroll to the top pixel of the div with that ID. Of course, you will not have a smooth scroll (that's a javascript code you need to add), but the content will jump to div like I said. You also learn why social networks use hashtags!

The CLASS attribute

<div class="someAmazingClass"></div>
<div class="someAmazingClass"></div>
<div class="someAmazingClass"></div>

Classes are the liberal cousins of IDs. Classes aren't unique, you can use multiple times the same class in the same html page (different divs) and give some specific orders for specific classes. In fact, classes are used for multiple objects on a page, give them the same class and consequently the same characteristics. You need to retain:

"- You can use the same class on multiple elements
- You can use multiple classes on the same element." in CSS-TRICKS

You can use multiple classes in the same div

You can also use multiple classes in HTML in the same div, the browser will read in the order they are in div. In the following example, the browser will first read the class1, then the class2 and finally the class3:

<div class="class1 class2 class3"></div>

The order of classes in a div is important because the doble same orders with diferent values. Taking the example above, imagine that the css is the following:

.class1 {
background-color: #FF0000;
}
.class2 {
display: none;
}
.class3 {
display: block;
background-color: #000000;
}

Will be the background of div red (background-color: #FF0000;) or black (background-color: #000000;)? Will be the div visible (display: block;) or not (display: none;)? In fact, the div is all the options, but only render the last one in the code for the same thing. The final result will be a black visible div.

Elements can have both

<div id="someId" class="class1 class2"></div>

They are not incompatible but complementary. It's a really pretty idea use both in the same div. They work equally separately or together and you must be mindful and use them just like I explained above.

CSS doesn't give a sh*t, but javascript will cry like a baby

CSS is a style sheet language and must be understood as such. In fact, CSS treats Ids just like treats classes, so for CSS is no troubles to use a class or Id wrong. For Javascript is another story. Javascript use Id's and classes based on the vision that ID will be unique to the HTML page and the Class will not. Javascript easily add and remove classes, for example (jQuery native function is a great example), but for ID that isn't so real. But if we talk about getting elements of the page, there's nothing like an Id to get it. Javascript people know the Id's and Classes like no others.

Use only the code that really you need

<div class="someDiv">
<a class="links"></a>
</div>

The class "links" is like visual trash in code because there is no reason to use a class there. Look, you can style in CSS all the links using the tag "a". If you want to style this specific link, you can tell CSS to style "someDiv a". Look the example:

/* All the links will be yellow */
a {
color: #FFFF00;
}
/* The link inside the div with the class 'someDiv' will be black */
.someDiv a {
color: #000000;
}

How to name Classes and ID's

Some people consider that put comments over the code will solve the problem of understanding the code when someone in the future look at it. In my opinion, naming good the classes and id's can also be a fruitful help, also for you! In Id's I advise using a name that represents what is the element for the page, like "main-menu" or "vertical-menu" for example. I keep the advice for classes that are used for some structure functions on HTML, like a "container" for example. Names like "class1" or "container-inside-the-the-second-section" are horrible and confuse in a code.

What about frameworks?

<button type="button" class="btn btn-primary">click here</button>
<i class="fa fa-camera-retro fa-lg"></i>>

Frameworks like bootstrap are just some CSS styles already written, like a default css to use. They look hard, but they are very simple. They are some classes and id's already with attributes to use in your HTML div and elements. The classes "btn" and "btn-primary" have already attributes in bootstrap framework css (they will style a typically bootstrap button).

Please give me your opinion on my facebook or for my mail hi@joaopedrogomes.eu.

Did you like this article?

Show me some support with your like on my facebook page