HTML ID Attribute

by

A unique id is defined for an HTML element using the id attribute. It can be used on any HTML element. The value set to the Id attribute is case-sensitive. The value set to the Id attribute must contain at least one character. It also must not contain any whitespaces.

ID with CSS:

In CSS, a hash (#) character is used with the element’s id to select an HTML element with a specific id.
Example:

<!DOCTYPE html>
<html>
<head>
<style>
#hello {
  background-color: crimson;
  color: white;
  padding: 20px;
} 
</style>
</head>
<body>
<h1 id="hello">HELLO WORLD!!</h1>
</body>
</html>

Explanation:

In the above example, “hello” is an id attribute used on an HTML element.

HTML Class and HTML ID:

The HTML ID attribute is used to define a unique ID that belongs to a single HTML element. The HTML class name on the other hand can be used by a single element as well as multiple elements.
Example:

<!DOCTYPE html>
<html>
<head>
<style>
#hello {
  background-color: black;
  color: white;
  padding: 20px;
} 
.flowers {
  background-color: crimson;
  color: white;
  padding: 15px;
} 
</style>
</head>
<body>
<h1 id="hello">Flowers</h1>
<h2 class="flowers">Rose</h2>
<h2 class="flowers">Lily</h2>
<h2 class="flowers">Orchid</h2>
</body>
</html>

Explanation:

In the above example, “hello” is an id attribute applied to a single HTML element, while the “flowers” is a Class name applied to multiple HTML elements.

HTML Id with Javascript:

The getElementById() method is used to get an element with a specified id by Javascript.
Example:

<!DOCTYPE html>
<html>
<body>
<h1 id="hello">Hello HTML!!</h1>
<button onclick="displayResult()">Text Change</button>
 
<script>
function displayResult() {
  document.getElementById("hello").innerHTML = "Hello, I am HTML!!";
}
</script>
</body>
</html>

Explanation:

In the above example, we are changing the text using HTML ID with Javascript.