Can different HTML elements have the same ID?

HTML Web Development Front End Technology

No, we cannot have the same ID for different elements in HTML. IDs have to be unique in the entire HTML page. Even the official HTML standards suggest the same −

Using the unique id attribute

Example

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


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

Output

Displaying different IDs

Example

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>