HTML id Global Attribute

Description

The global attribute id Defines a unique identifier for an element. The attribute should be used only once in a specific HTML document.

Some rules for IDs:

Use only letters of the alphabet ( AZ, az ), numbers, hyphens, underscores.
The identifier must not contain any spaces.
The identifier on the page is used for only one element.
Identifiers are case sensitive ( #container and #Container are different identifiers).

Syntax

#id { ... }

Values

idA name used to assign to the ID. Use only letters of the alphabet ( AZ, az ), numbers, hyphens, underscores.

Example

HTML

<!DOCTYPE html>
<html>
<head>
   <title>Global Attribute id</title>
<style> 
#main {
   text-align:center;
   color:red;
}
#index {
   color:blue;
}
</style>
</head>
<body>
   <h1 id="main">First level heading.</h1>
   <p id="index">Paragraph with assigned id as a style identifier.</p>
   <a href="#main">Using id as an anchor</a> (throws to the specified id).
   <p>Using JavaScript scripts (changing elements with a specific id):</p>
<script>
   function chg() {
      var x = document.getElementById("main");
      x.style.color = "white"; 
      x.style.backgroundColor = "orange"; 
   }
</script>
   <button onclick="chg()">Click!</button>
</body>
</html>

Result