[html] Which to use <div class="name"> or <div id="name">?

I am learning HTML. Can someone please tell me what is the difference between class and id and when to use one over the other? They seem to do the same thing

<!DOCTYPE HTML>
<html>
<head>

<style>

#mycolor1 {color: red;}    
.mycolor2 {color: red;}

</style>

</head>
<body>

<div id="mycolor1">     hello world </div>
<div class="mycolor2">     hello world </div>

</body>
</html>

This question is related to html css

The answer is


They do not do the same thing.id is used to target a specific element, classname can be used to target multiple elements.

Example:

<div id="mycolor1" class="mycolor2">     hello world </div>
<div class="mycolor2">     hello world2 </div>
<div class="mycolor2">     hello world3 </div>

Now, you can refer all the divs with classname mycolor2 at once using

.mycolor2{ color: red } //for example - in css

This would set all nodes with class mycolor2 to red.

However, if you want to set specifically mycolor1 to blue , you can target it specifically like this:

#mycolor1{ color: blue; }

ID provides a unique indentifier for the element, in case you want to manipulate it in JavaScript. The class attribute can be used to treat a group of HTML elements the same, particularly in regards to fonts, colors and other style properties...


Read the spec for the attributes and for CSS.

  • id must be unique. class does not have to be
  • id has higher (highest!) specificity in CSS
  • Elements can have multiple non-ordinal classes (separated by spaces), but only one id
  • It is faster to select an element by it's ID when querying the DOM
  • id can be used as an anchor target (using the fragment of the request) for any element. name only works with anchors (<a>)

  • the Id selector is used when referring to a single unique element.
  • The Class selector referrers a group of elements.

For example, if you have a multiple buttons that look the same, you should use class="mybutton" to have consistent styling.

In terms of performance:

CSS selectors are matched from right to left.

Therefore, .myClass should be "faster" than #myID because it misses out testing.

The performance speed is negligible for normally sized pages and you will probably never notice a difference so it's mostly just about convention.

Here is more info on why css is browsers match css selectors from right to left


To put it simnply: id is unique to just one element in the whole HTML document, but class can be added to numerous elements.

Also, ID properties have priority over class properties.

ids and classes are especially useful if you plan on using javascript or any of its frameworks.


Classes should be used when you have multiple similar elements.

Ex: Many div's displaying song lyrics, you could assign them a class of lyrics since they are all similar.

ID's must be unique! They are used to target specific elements

Ex: An input for a users email could have the ID txtEmail -- No other element should have this ID.


ID is suitable for the elements which appears only once Like Logo sidebar container

And Class is suitable for the elements which has same UI but they can be appear more than once. Like

.feed in the #feeds Container


The object itself will not change. The main difference between these 2 keyword is the use:

  • The ID is usually single in the page
  • The class can have one or many occurences

In the CSS or Javascript files:

  • The ID will be accessed by the character #
  • The class will be accessed by the character .

class is used when u want to set properties for a group of elements, but id can be set for only one element.


ID's must be unique (only be given to one element in the DOM at a time), whereas classes don't have to be. You've already discovered the CSS . class and # ID prefixes, so that's pretty much it.