Does ID have to be unique in the whole HTML page?



Yes, IDs must be unique in the entire HTML page. Even the official HTML standards suggest the same −

Unique IDs with the id attribute

Example

Let us see an example. Here, we have used the id attribute −

<!DOCTYPE html>
<html>
<head>
   <style>
      #myHeader {
         border: 2px solid yellow;
         background-color: orange;
         padding: 50px;
         text-align: center;
      }
   </style>
</head>
<body>
   <h1 id="myHeader">
      Demo Heading
   </h1>
   <p>This is a text outside.</p>
</body>
</html>

Output

Displaying four different unique IDs

Another example displaying four different unique IDs −

<!DOCTYPE html>
<html>
<head>
   <style>
      #container {
         width: 100%;
         font-size: 10px;
         text-align: center;
      }
      #left {
         float: left;
         width: 100px;
         border: 2px solid green;
      }
      #right {
         float: right;
         width: 100px;
         border: 2px solid orange;
      }
      #center {
         margin: 0 auto;
         width: 100px;
         border: 2px solid red;
      }
   </style>
</head>
<body>
   <div id="container">
      <div id="left">
         <h1>Left</h1>
      </div>
      <div id="right">
         <h1>Right</h1>
      </div>
      <div id="center">
         <h1>Center</h1>
      </div>
   </div>
</body>
</html>

Output


Advertisements