THE HTML ID ATTRIBUTE

There is a noticeable difference between the HTML id attribute and the HTML class attribute. As you read further, we'll make sure you understand the clear difference between the two. Most beginner developers often make the mistake of using both interchangeably as they both can be used to style elements

.The HTML id attribute is used to style only one unique element in a document. It means that you cannot use the same id attribute value for more than a single element.

HOW TO USE THE ID ATTRIBUTE SYNTAX

The HTML id, which is short for identifier, is represented by the hashtag [#] followed by the id name and curly braces {}.

<style>

#idname { properties:value;}

</style>

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID ATTRIBUTE</title>
</head>
<style>
    #Heading {
    background-color: grey;
    color: #000;
    padding: 30px;
    text-align: center;
    border-radius: 10px;
</style>
<body>
 <h2 id="Heading">ID ATTRIBUTE</h2>
</body>
</html>

DIFFERENCES BETWEEN THE ID ATTRIBUTE AND CLASS ATTRIBUTE

In naming the id attribute, do not use whitespaces, underscores or hyphens. If you do so, the web browser will fail to treat the value as an id. But when naming the class attribute, you can use whitespaces, underscores, and hyphens and the web browser would still run the code successfully.
The id attribute value name must not be the same as that of another id attribute in the web page. Remember that the id attribute is a unique identifier of a particular element and not for styling more than one element. But with the class attribute, you can use the same name for multiple classes in the web page.

BOOKMARK WITH THE ID ATTRIBUTE

The word bookmark is synonymous to favorite. In a situation where a web page contains a large volume of text, the id attribute can be used to jump to the sub-heading of your choice. This also works when creating table of contents in a web page.

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID ATTRIBUTE</title>
</head>
<body>
  <p><a href="#Text">Jump to this important text</a></p>
  <p><a href="#C10">Jump to Chapter 10</a></p>
  
  <h3>Chapter 1</h3> 
  <p>Hello....</p>
  <h3>Chapter 2</h3> 
  <p>Hello....</p>
<h3>Chapter 3</h3> 
  <p>Hello....</p>
  <h3>Chapter 4</h3> 
  <p>Hello....</p>
  <h3>Chapter 5</h3> 
  <p>Hello....</p>
<h3>Chapter 6</h3> 
  <p>Hello....</p>
  <h3>Chapter 7</h3> 
  <p>Hello....</p>
  <h3>Chapter 8</h3> 
  <p>Hello....</p>
<h3>Chapter 9</h3> 
  <p>Hello....</p>
<h3 id="C10">Chapter 10</h3> 
  <p>Hello....</p>
  <h3>Chapter 11</h3> 
  <p>Hello....</p>
<h3>Chapter 12</h3> 
  <p>Hello....</p>
<h3>Chapter 13</h3> 
  <p>Hello....</p>
<h3>Chapter 14</h3> 
  <p>Hello....</p>
  <h3>Chapter 15</h3> 
  <p>Hello....</p>
  <p id="Text"><em><strong>First, solve the problem. Then, write the code.</strong></em></p>
  
</body>
</html>

ID ATTRIBUTE AS USED IN JAVASCRIPT

The HTML id attribute can also be accessed by JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID ATTRIBUTE</title>
</head>
<body>
   <p>JavaScript will be able to access this id. </p>
 <h2 id="Heading">Hub To Learn</h2>
<button onclick="displayResult()">Change text</button>

<script>
function displayResult() {
  document.getElementById("Heading").innerHTML = "Learnt to code by yourself!";
}
</script>   
</body>
</html>