RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-id-attribute/ below:

HTML Id Attribute - GeeksforGeeks

HTML Id Attribute

Last Updated : 11 Jul, 2025

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".

HTML Id Attribute Use Cases 1. What is the use of id attribute in HTML ?

The id attribute in HTML uniquely identifies elements, enabling targeted selection and manipulation via CSS and JavaScript for specific functionality and styling.

2.Difference between id and class Attributes in HTML

The id attribute uniquely identifies one element, while the class attribute can be applied to multiple elements for shared styling.

3.What are valid values for the id attribute in HTML?

Here Valid values for the id attribute in HTML are unique identifiers consisting of letters, numbers, hyphens, underscores, and colons, starting with a letter or underscore.

4.How to Select an Element by ID in JavaScript ?

To select an element by ID in JavaScript, use the getElementById() method followed by the ID name enclosed in quotes.

HTML Id Attribute Supported Browsers:

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4