HTML - id Attribute

An HTML element that is used to identify an HTML element on a webpage is the id attribute. It is a string that has been allocated to an element to make it accessible using JavaScript and CSS. To enable for accurate element targeting, each id within the HTML document needs to be unique.

This attribute is frequently used for style, managing events, and changing the structure of documents. In order to create interactive and dynamic web pages, it gives developers the ability to target particular parts and provide them specialized behavior and appearance.

Syntax

Following is the syntax of the HTML id attribute −

<tag id = ‘id_name’></tag>

Example

In the following example, we are using the 'id' attribute within the 'h1' element to define a unique identifier (id) for it. Using that ID, we can access it in the stylesheet for styling.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML id attribute</title>
   <style>
      #demo {
         font-size: 25px;
         font-style: italic;
         color: green;
         font-weight: bold;
      }
   </style>
</head>
<body>
   <!-- Example of the HTML 'id' attribute -->
   <p>Example of the HTML 'id' attribute</p>
   <h1 id='demo'>This is h1 heading.</h1>
</body>
</html>

When we run the above code, it will generate an output consisting of the h1 text applied CSS displayed on the webpage.

Example

Considering the another scenario, where we are going to use the id attribute with the div element.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML id attribute</title>
   <style>
      /*access element using #id_name */
      #demo {
         width: 310px;
         height: 120px;
         background-color: green;
         align-items: left;
         border-radius: 10px;
      }

      #demo p {
         color: white;
         letter-spacing: 1px;
         text-align: center;
      }
   </style>
</head>
<body>
   <!-- Example of the HTML 'id' attribute -->
   <p>Example of the HTML 'id' attribute</p>
   <div id="demo">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores nostrum ducimus, iure quaerat hic nisi ipsam architecto sequi blanditiis harum beatae magnam iste obcaecati dolore. Ut commodi voluptates labore aliquam.</p>
   </div>
</body>
</html>

On running the above code, the output window will pop up, displaying the div text applied with CSS on the webpage.

Example

Let's look into the another example, where we are going to use the id attribute with the form element

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML id attribute</title>
   <style>
      /*access element using #id_name */
      #myForm {
         width: 300px;
         height: 210px;
         background-color: aqua;
         border-radius: 10px;
         text-align: center;
      }

      #myForm h1 {
         text-align: center;
         font-family: sans-serif;
         margin-top: 5px;
      }

      #myForm input {
         padding: 8px;
         margin: 5px 0px;
      }

      #myForm button {
         width: 105px;
         padding: 8px;
      }
   </style>
</head>
<body>
   <!-- Example of the HTML 'id' attribute -->
   <p>Example of the HTML 'id' attribute</p>
   <form id='myForm'>
      <h1>Login</h1>
      <br> Username: <input type="text">
      <br> Password: <input type="password">
      <br>
      <button>Login</button>
   </form>
</body>
</html>

When we run the above code, it will generate an output consisting of the form applied with CSS displayed on the webpage.

Example

Following is the example, where we are going to run the script to perform the arthimetic operation

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML id attribute</title>
   <style>
      /*access element using #id_name */
      #myForm {
         width: 300px;
         height: 210px;
         background-color: aqua;
         border-radius: 10px;
         text-align: center;
      }

      #myForm h1 {
         text-align: center;
         font-family: sans-serif;
         margin-top: 5px;
      }

      #myForm input {
         padding: 8px;
         margin: 5px 0px;
      }

      #myForm button {
         width: 105px;
         padding: 8px;
      }
   </style>
</head>
<body>
   <!-- Example of the HTML 'id' attribute -->
   <p>Example of the HTML 'id' attribute</p>
   <form id='myForm'>
      <h1>Login</h1>
      <br> Username: <input type="text">
      <br> Password: <input type="password">
      <br>
      <button>Login</button>
   </form>
</body>
</html>

On excuting the above script, the output window will pop up displaying the input field along with a click button on the webpage. when the user fills the data and clicks the button it will perform addition between them and displays as alert.

html_attributes_reference.htm
Advertisements