HTML Id Attribute

Last Updated : 27 Feb, 2024

HTML id attribute provides a unique identifier for an element within a document. It allows targeted selection and manipulation of the element through CSS and JavaScript, facilitating specific styling and functionality. In CSS, the id attribute is used using the # symbol followed by id. quotes are not mandatory in tag=” ” in all cases. But writing with quotes is a good practice.

HTML Id Attribute Syntax:

 <tag id=""></tag>

Note: This is a global attribute, it can be used in all the tags.

Using The id Attribute Example:

In this example, we simply style the element with id “geeks”.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #geeks { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h2>Welcome to GeeksforGeeks</h2> 
    <h1 id="geeks">Hi Geeks!</h1> 
</body> 
  
</html>

Output:

HTML id Attribute

Explanation:

In this example we includes two headings one displaying “Welcome to GeeksforGeeks” and the other with the id “geeks”.
CSS targets the element with id “geeks”, setting its text color to green, creating a visually distinct appearance.
By styling the second heading uniqHTML Id AttributeHTML Id Attributeuely, it stands out from the rest of the content, drawing attention to the specific message “Hi Geeks!”.

Using The id Attribute Example:

In this example, we are adding the styling properties to the specific id attribute value by fetching its id value.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Id Attributes</title> 
    <style> 
    #gfg { 
        color: #009900; 
        font-size: 50px; 
        font-weight: bold; 
        text-align: center; 
    } 
    #geeks { 
        text-align: center; 
        font-size: 20px; 
    } 
    </style> 
</head> 
<body> 
    <div id="gfg">GeeksforGeeks</div> 
    <div id="geeks"> 
        A computer science portal for geeks 
    </div> 
</body> 
</html>

Output:

Adding the style properties to the specific id attribute value

Explanation

Here The HTML document contains two <div> elements with unique id attributes: “gfg” and “geeks”.HTML Id Attribute
CSS styles are applied to each id selector to modify properties such as text color, font size, font weight, and text alignment.
The “gfg” id styles affect the “GeeksforGeeks” text, making it large, bold, and centered. The “geeks” id styles modify the description text, adjusting its alignment and size.

Note: In HTML5, id attributes can be used by any HTML tag but in HTML 4.01 there are some restriction to use id attributes. It can not be used by <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title> tag. In HTML4.01 id can not start with number.

Use of ID attributes in JavaScript:

In JavaScript, ID attributes uniquely identify HTML elements, enabling efficient selection and manipulation through methods like getElementById(). They serve as hooks for accessing specific elements for dynamic functionality and interaction.

ID attributes in JavaScript Example :

This example describes getting the id attribute value in Javascript through getElementById() Method.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Using the id in Javascript</title> 
    <style> 
        #geeks { 
            font-size: 50px; 
            color: #009900; 
            font-weight: bold; 
            margin-bottom: 10px; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="geeks">GeeksforGeeks</div> 
    <button onclick="geeksResult()">Display text change</button> 
    <script> 
        function geeksResult() { 
            document.getElementById("geeks").innerHTML = 
                "A computer science portal for geeks"; 
            document.getElementById("geeks").style.color = "black"; 
        } 
    </script> 
</body> 
  
</html>

Output:

Getting the id attribute value using getElementById() Method

Explanation:

In the above example Includes a div element with id “geeks”, displaying “GeeksforGeeks” initially.
Clicking the button triggers a JavaScript function called “geeksResult()”.
The function modifies the innerHTML of the div element to “A computer science portal for geeks”.