html

HTML Id

HyperText Markup Language more popularly known as HTML is a website development programming language that provides various elements and attributes that aid in building a well-structured website. These elements and attributes are the building blocks of HTML. One such attribute is the id attribute, which is a fundamental HTML attribute. This write-up is designed to discuss the HTML id attribute in detail.

HTML Id

HTML id attribute lets you assign a unique identifier to an HTML element. This specific identifier could only be assigned to one and only one HTML element within the same document. This attribute denotes a particular style declaration in a style sheet which in simpler words means that you can style an element using the id attribute.

Syntax of HTML id attribute

<tag id="unique-identifier"></tag>

Points to remember!

  • Remember that id values are case-sensitive.
  • Id name must contain at least one character.
  • It cannot have white spaces.
  • It can neither start with a number.
  • If you are assigning the same Id name to more than one element then HTML will perform actions associated with that id name on the latest element.

Example 1

In the following example, <p>element is being styled using the id attribute.

<!DOCTYPE html>

<html>

<head>

<style>

#para1 {

  color: black;

  background-color: pink;

  text-align: left;

  padding: 20px;

}

</style>

</head>

<body>


<p id="para1">HTML id attribute gives a unique identifier to an HTML element. The identifier must be unique for each element within the same HTML document. You can style an HTML attribute using the id attribute.</p>


</body>

</html>

Output

The above example demonstrates the usage of the id attribute. In the above example, we are styling <p>element by assigning it a unique id= “para1”.

<p id="para1">

Now in order to style this <p> element, we are defining its style in the <head> section using the id name initiating with a hashtag (#).

<head>

<style>

#para1 {

  color: black;

  background-color: pink;

  text-align: left;

  padding: 20px;

}

</style>

</head>

Example 2

In the following example, we are styling two elements (<input>and <button>) by assigning them unique identifiers.

<!DOCTYPE html>

<html>

<head>

    <style>

    #input {

        color: blue;

        font-size: 20px;

        font-family: 'Times New Roman', Times, serif;

    }

     
    #button {

        text-align: center;

        font-weight: bold;

        font-size: 15px;

    }

    </style>

</head>

<body>

  <center>

    Enter your name: <input id="input">

    <br>

    <br>

    <button id="button">Submit</button>

  </center>

</body>

</html>

In the above example, we are defining the style of the <input> and <button> elements in the <head> section.

<head>

    <style>

    #input {

        color: blue;

        font-size: 20px;

        font-family: 'Times New Roman', Times, serif;

    }

     
    #button {

        text-align: center;

        font-weight: bold;

        font-size: 15px;

    }

    </style>

</head>

Output

Note: Do not mix an id attribute with a class because a class name is used by various elements in the same document; however, an id name is unique and assigned to only one element in a document.

HTML Id and JavaScript

JavaScript makes use of the getElementById() method to get a particular element and perform a certain task.

Example

<!DOCTYPE html>

<html>

<head>

    <style>

    #para1 {

        font-size: 50px;

        color: black;

        font-weight: bold;

        text-align: center;

    }

    </style>

</head>

<body>

    <p id="para1">Click the button below and see the change.</p>

    <center>

    <button onclick="functionName()">Click Me</button>

    </center>

    <script>

    function functionName() {

      document.getElementById("para1").style.color = "green";

    }

    </script>

</body>

</html

In the above example, we are using the getElementById() method to change the color of the <p>element by clicking on the button. In the following piece of code, we defined the style of <p>element using its unique id which is #para1.

#para1 {

        font-size: 50px;

        color: black;

        font-weight: bold;

        text-align: center;

}

Afterwards, we used the getElementById() method to change the color of <p>element.

document.getElementById("para1").style.color = "green";

Output

Before clicking the button.

After clicking the button.

Conclusion

The HTML id attribute provides a unique identifier to a particular HTML element that can be used to define the style of that particular element. A specific id name can be assigned to only one element within the same HTML document. JavaScript also uses the id name to perform certain actions on a particular element. This write-up is designed to discuss the HTML id attribute in detail with the help of examples.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.