The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> id in HTML, my IDE is allowing multiple id on same page
mp3909
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 4 2020, 08:52 AM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(mp3909 @ Apr 4 2020, 02:02 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 4 2020, 08:54 AM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
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.




User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 4 2020, 06:19 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
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! laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 04:39 AM