 id in HTML, my IDE is allowing multiple id on same page |
| mp3909 |
 Apr 4 2020, 07:02 AM
Post
#1
|
|
Novice  Group: Members Posts: 20 Joined: 4-April 20 Member No.: 27,264  |
I am using ATOM as my IDE.
I am new to HTML and I have read that: 1). Each element can have only one ID 2). Each page can have only one element with that ID However, when I run the below piece of HTML code, it works fine CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h2 id="content-header" id="abs">Content</h2> <h3 id="content-header">Blah</h3> <span id="content-header">Yo, I'm a span tag too</span> </body> </html> As you can see from the above code, my h2 tag has 2 ids specified (which breaks rule number 1 i.e. Each element can have only one ID) My h3 tag has the same id as my h2 tag (which breaks rule number 2 i.e. Each page can have only one element with that ID) Is just me or has this happened to anyone else? |
  |
 
|
  |
Replies
| Christian J |
Apr 4 2020, 08:54 AM
Post
#2
|
|
. Group: WDG Moderators Posts: 9,661 Joined: 10-August 06 Member No.: 7 |
QUOTE(mp3909 @ Apr 4 2020, 02:02 PM)  I am new to HTML and I have read that: 1). Each element can have only one ID 2). Each page can have only one element with that ID True, that's what the HTML spec says. QUOTE However, when I run the below piece of HTML code, it works fine That's because the IDs are not used for anything in the code example. Browsers are generally very forgiving even with incorrect HTML, but problems may appear if you add CSS or javascript like this: CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>A title is required by the spec too.</title> <style type="text/css"> #abs {color: red;} #content-header {background: pink;} </style> </head> <body> <h2 id="content-header" id="abs">Content</h2> <h3 id="content-header">Blah</h3> <span id="content-header">Yo, I'm a span tag too</span> <script type="text/javascript"> document.getElementById('content-header').innerHTML='New text'; </script> </body> </html> The results in my browsers: CODE #content-header {background: pink;} The above is applied to all elements with that ID, just as if it was a CLASS selector. I guess this is my browsers' attempting error correction. CODE <script type="text/javascript"> document.getElementById('content-header').innerHTML='New text'; </script> In contrast, the above only changes text in the first element with ID #content-header, not all of them. CODE #abs {color: red;} The above is ignored, the browsers only apply the #content-header styling. |
|
|
|
| pandy |
Apr 4 2020, 06:19 PM
Post
#3
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
Wanted to add that id and class are different from most other HTML attributes. They and their values don't accomplish anything at all in themselves, with HTML alone. They are there just as hooks for styling and scripting. CSS and JS is what makes things happen.
And Christian - you type so slow!  |
|
|
|
Posts in this topic
mp3909 id in HTML Apr 4 2020, 07:02 AM
pandy
1). Each element can have only one ID
Yes, but... Apr 4 2020, 08:52 AM
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 27th April 2024 - 05:03 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC