id in HTML, my IDE is allowing multiple id on same page |
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? |
pandy |
Apr 4 2020, 08:52 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
1). Each element can have only one ID Yes, but that's a HTML requirement and goes for any attribute. If you use two instances of an attribute the second one will be ignored. I don't know if that's a rule set in stone, but in my experience that's how browsers handle the situation. CODE 2). Each page can have only one element with that ID Correct. An ID must be unique for a page. That's the whole point of using ID. Otherwise you could just as well use class (as far as CSS is concerned). QUOTE 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> How do you know? You don't use the IDs for anything. If you for instance add this piece of CSS... CODE #content-header { color: red } #abs { background: blue } ... I bet you the H2 will be red, but its background won't be blue. Same goes if we do it old style. CODE <font face="Courier" face="Arial" size="7" size="1" color="red" color="blue">TEST</font> You will see a huge TEST in red Courier, not a small TEST in blue Arial. And when reading the above markup you probably realize no one would ever write something like that except by mistake. You may get away with using the same id for several elements (i.e. use it as a class) for simple CSS stuff, so I think the H3 also will be red in most browsers. But it will get really complicated with more advanced CSS and you'll never get away with it if the ID is used by JavaScript. And it will never validate. |
Christian J |
Apr 4 2020, 08:54 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
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
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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! |
Lo-Fi Version | Time is now: 26th April 2024 - 03:45 AM |