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

Browser Support

Desktop

Yes	12	Yes	32	Yes	Yes

Tablets / Mobile

Yes	Yes	32	Yes	Yes	Yes

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu