1

From what I've learned from other posts like this, I get that one id cannot work on more than one type of element. But the following code works well:

<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
color: blue;
}
</style>
</head>
<body>
<h1 id="p01"> Heading</h1>
<p>This is a paragraph.</p>
<p id="p01">This is a diff paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>

</body>
</html>

I've used the p01 id for two elements <p> and <h1> respectively. I am new to html; perhaps I mistook some concept. There should not be a contradiction. Please tell me what I am understanding wrong..

Improve this question
10
  • 5
    In that context it may work, however you are producing invalid HTML. This is from the HTML5 spec: There must not be multiple elements in a document that have the same id value. Commented Jan 25, 2016 at 18:24
  • 2
    Doesn't matter the version of HTML, ids have had to be unique on previous versions of HTML as well as HTML5. And just because it works in the particular browser you are using doesn't guarantee that it will work in any other browser. The HTML spec says it's invalid, Commented Jan 25, 2016 at 18:31
  • 1
    @user31782 The doctype that you are using implies HTML5 Commented Jan 25, 2016 at 18:32
  • 2
    I don't agree with the downvotes. While the answer may seem obvious to some, its a reasonable question in my view. Commented Jan 25, 2016 at 18:37
  • 1
    Possible duplicate of Can multiple different HTML elements have the same ID if they're different types? - I know you're not asking about different types, but the answer is still relevant. Commented Jan 25, 2016 at 19:36

2 Answers 2

Reset to default
3

It may work on the browser(s) you are testing with, but then not work on other browsers as it violates the HTML5 spec.

If you want to address multiple elements using a shared attribute, you can add a class.

<h1 id="p01a" class='p01'> Heading</h1>
<p>This is a paragraph.</p>
<p id="p01b" class='p01'>This is a diff paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01c" class='p01'>I am different.</p>
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I don't know, because I follow the rules for assigning IDs. However, there are lots of browsers (mobile and desktop). I can well see a current or future browser for example stopping at the first DOM match and assuming as a performance optimization that there will not be a second match. Such a browser would be well within its rights according to the spec.
Why has html5 abandoned the use of same id for multiple elements? What are its downsides?
The same ID was never intended to be used for multiple elements. The ID is supposed to be unique. Many browsers (probably all early browsers) tolerate duplicate ID's just so they can continue to show a page even if the web developer makes a mistake. HTML5 formalizes the notion that the ID must be unique.
perhaps I am getting it now. class can perform every function an id can. But they especially made the id attribute because web developers might mistake to use the same class for different elements (because that is the main use of class). With the altogether different attribute id it should be self evident to keep it in mind that one id for one element only.
Thanks for explaining.
1

It would be much, much better, in terms of both validity and semantics, if you wrote it using classes for your CSS instead:

<!DOCTYPE html>
<html>
<head>
<style>
.p01 {
color: blue;
}
</style>
</head>
<body>
<h1 class="p01"> Heading</h1>
<p>This is a paragraph.</p>
<p class="p01">This is a diff paragraph.</p>
<p>This is a paragraph.</p>
<p class="p01">I am different.</p>

</body>
</html>

Just because it works using id doesn't mean that it's correct. Imagine in a month that you want to add some javascript to get only one of those elements, you couldn't then use this:

var e = document.getElementById("p01");

because you couldn't be certain of what would be returned.

One way to look at it is by thinking of houses. Imagine that classes define the types of houses (apartments, bungalows, houses with pitched roofs etc), whereas ids define specific houses (John's house, Wendy's house etc).

Now imagine that you want to have all the bungalows painted red. Using the class, you can easily grab all of them at once, like:

var houses = document.getElementsByClassName("bungalow");
paint_red(houses);

Now imagine that you want to send a package to Wendy's house. In this case, you can find that specific house using its id:

var wendys_house = document.getElementById("wendy");
send_package_to(wendys_house);

Because you know that the id is unique, you can be certain that only Wendy's house will receive a package.

Improve this answer

4 Comments

I agree that I should not use same id for different elements. But then why do we need id? We can have a class which we force ourself to use for only one element.
There's nothing stopping you from only using the class attribute for use with CSS, in fact some people argue that id shouldn't be used at all for CSS. It is convenient though, when you want to target a specific region of a page. Also see here
perhaps I am getting it now. class can perform every function an id can. But they especially made the id attribute because web developers might mistake to use the same class for different elements (because that is the main use of class). With the altogether different attribute id it should be self evident to keep it in mind that one id for one element only.
That pretty much sums it up

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.