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

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

Updated on: 2022-12-06T10:31:37+05:30

198 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements