Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Can different HTML elements have the same ID?
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>
Output
Updated on: 01-Nov-2022
392 Views
Advertisements