Can same id address multiple elements in html?

Question

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..

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.** — mikeyq6, Jan 25 '16 at 18:24
You might have the same id,but if you want to address any element by id how will you know which is which.If you can do something doesnt mean you should. — Mihai, Jan 25 '16 at 18:25
Your code is an example of where you should use `class` instead of `id`. — jmoerdyk, Jan 25 '16 at 18:26
@mikeyq6 ACtually I am not talking about html5. In my tutorial of _html_(not html5) http://www.w3schools.com/html/html_css.asp they say, "Use id to address a single element. Use class to address groups of elements." — user31782, Jan 25 '16 at 18:28
Also when I save the code as html file it opens well in my browser. So I don't think it is invalid. — user31782, Jan 25 '16 at 18:29
Doesn't matter the version of HTML, `id`s 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, — jmoerdyk, Jan 25 '16 at 18:31
Also I'd like to know the reason of downvotes; so I could improve the question. — user31782, Jan 25 '16 at 18:34
I don't agree with the downvotes. While the answer may seem obvious to some, its a reasonable question in my view. — Eric J., Jan 25 '16 at 18:37
Possible duplicate of [Can multiple different HTML elements have the same ID if they're different types?](http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-types) - I know you're not asking about different types, but the answer is still relevant. — wpercy, Jan 25 '16 at 19:36

score 3 · Answer 1 · answered Jan 25 '16 at 18:27

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>

answered Jan 25 '16 at 18:27

Eric J.

147,927
63
340
553

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. – Eric J. Jan 25 '16 at 18:35
Why has html5 abandoned the use of same id for multiple elements? What are its downsides? – user31782 Jan 25 '16 at 18:38
2

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. – Eric J. Jan 25 '16 at 18:39
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_. – user31782 Jan 25 '16 at 18:45
Thanks for explaining. – user31782 Jan 25 '16 at 18:47

mikeyq6 · Accepted Answer · 2016-01-25T19:17:52.417

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.

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. — user31782, Jan 25 '16 at 18:32
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](http://stackoverflow.com/questions/298607/css-best-practice-about-id-and-class) — mikeyq6, Jan 25 '16 at 18:36
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. — user31782, Jan 25 '16 at 18:46

Can same id address multiple elements in html?

2 Answers2