• Tutorial List

HTML Class and Id Attribute

Last updated Jul 08, 2020
HTML Class and Id Attribute

HTML Class and ID Attribute are global attributes. These attributes are used to give a unique or specific identifier to an element or multiple elements at once.

Why do you have to add identifiers to elements?

If you want to add some style to a specific element or a group of elements using CSS or want to manipulate a specific element (DOM) or group of elements using JavaScript, first you have to select the element or the group of elements, and here the identifier helps to select the element or the group of elements at once.


Syntax of the HTML Class & ID attribute

The Class and ID name is totally up to you –

<div class="class_name">...</div>

<div id="unique_id_name">...</div>
<!-- Class -->
<div class="myClass">...</div>
<p class="myClass">...</p>
<section class="myClass2">...</section>

<!-- ID -->
<div id="myDiv">...</div>
<button id="myButton">...</button>

What is the difference between the ID and Class in HTML?

HTML ID attribute

The ID attribute gives a unique identification to an element for identifying the element uniquely.

And the ID name must not be repeated, because if the id name will repeat, then how would you uniquely identify an element?

Valid Example:

<!-- ID name Should not be repeated -->
<a href="./home/" id="link1">Home</a>
<a href="./about/" id="link2">About</a>

<button id="loginBtn">Log In</button>
<button id="signUpBtn">Sign Up</button>

Invalid Example:

<!-- ID name Should not be repeated -->
<a href="./home/" id="link">Home</a>
<a href="./about/" id="link">About</a>

<button id="myBtn">Log In</button>
<button id="myBtn">Sign Up</button>

HTML Class attribute

The HTML Class attribute gives specific identification to an element or multiple elements at once.

In the class attribute, you can repeat the class name and you can add multiple class names to an element.

Example of the Class Attribute

<div class="container">
  <h1 class="mainHeading">Title</h1>
  <a herf="./link1/" class="link">Link 1</a>
  <a herf="./link2/" class="link">Link 2</a>
</div>

<div class="container">
  ...
</div>

Adding multiple class names to an element

You can add multiple class names to an element by separating the class names with space.

<h1 class="class1 class2 class3">The Title</h1>

Adding styles to elements with the help of the ID & Class

As we already know that, to add styles, first you have to select the element.

How to select Class & ID in CSS?

  • Class Selection
    • You have to put a dot (.) before writing the class name .class_name
  • ID Selection
    • You have to add hash (#) before writing the id name #id_name
.class_name{
...
}

#id_name{
...
}

Example:

<!DOCTYPE html>
<html>
<head>
<title>Class and ID Example</title>
  
<style>
  
  .color_red{
    color:red;
  }
  
  .color_blue{
    color:blue;
  }
  
  .black_border{
    border:1px solid black;
  }
  
  #myBtn{
    margin:10px;
    padding:10px 20px;
    background:crimson;
    color:white;
    border:1px solid darkred;
  }

</style>
  
</head>
<body>
  
  <h1 class="color_red">Hello World!</h1>
  <p class="color_blue">Paragraph with color blue</p>
  
  <div class="black_border">Div With Border</div>
  <p class="black_border color_red">Paragraph with Border and red color</p>
  
  <div class="black_border">
    <button id="myBtn">Click Me</button>
  </div>

</body>
</html>

Important notes about Class and ID

1) The class and id name only can contains A-Z (Uppercase & lowercase), 0-9, underscore _, and hyphen -.

<p class="myClass" id="myId">...</p>
<p class="my-class" id="my-id">...</p>
<p class="my_class" id="my_id">...</p>
<p class="my_27_class6" id="my0id58">...</p>

2) The ID and class name should not start with a number.

<!-- invalid -->
<p class="45myclass" id="85myid">...</p>

3) The class name and id name is case-sensitive. In the following example, these elements contain the different Class and ID names.

myClass is not equal to myclass and also myID is not equal to myid

<!-- Both have the different Class and ID names -->
<p class="myClass" id="myId">...</p>
<p class="myclass" id="myid">...</p>

Case-Sensitive Example

<!DOCTYPE html>
<html>
<head>
<title>Case-Sensitive Example</title>
  
<style>
  
  .colorRed{
    color:red;
  }

</style>
  
</head>
<body>
  
  <p class="colorRed">Red Color</p>
  <p class="colorred">Red Color</p>
  
</body>
</html>

Ask Questions

Your email address will not be published. Required fields are marked *