By omninonsense


2011-04-10 13:14:02 8 Comments

Is a scenario like this valid?:

div#foo
span#foo
a#foo

14 comments

@mltsy 2017-05-16 18:30:57

Can multiple elements have the same ID?

Yes - whether they are the same tag or not, browsers will render the page even if multiple elements have the same ID.

Is it Valid HTML?

No. This is still true as of the HTML 5.1 spec. However, the spec also says getElementById must return the first element with the given ID, making the behavior not undefined in the case of an invalid document.

What are the consequences of this type of invalid HTML?

Most (if not all) browsers have selected and still do select the first element with a given ID, when calling getElementById. Most libraries that find elements by ID inherit this behavior. Most (if not all) browsers also apply styles assigned by id-selectors (e.g. #myid) to all elements with the specified ID. If this is what you expect and intend, then there are no unintended consequences. If you expect/intend something else (e.g. for all elements with that ID to be returned, or for the style to apply to only one element) then your expectations will not be met and any feature relying on those expectations will fail.

Some javascript libraries do have expectations that are not met when multiple elements have the same ID (see wootscootinboogie's comment about d3.js)

Conclusion

It's best to stick to the standards, but if you know your code works as expected in your current environments, and these IDs are used in a predictable/maintainable way, then there are only 2 practical reasons not to do this:

  1. To avoid the chance that you are wrong, and one of the libraries you use actually does malfunction when multiple elements have the same ID.
  2. To maintain forward-compatibility of your website/application with libraries or services (or developers!) you may encounter in the future, that do malfunction when multiple elements have the same ID - which is a reasonable possibility since this is not, technically, valid HTML.

The power is yours!

@EKanadily 2019-04-02 10:04:35

Excellent answer. it is always best if you stick to the standards.

@Park JongBum 2019-01-01 02:01:48

Usually, it is better not to use same ID multiple times in a html page. Even so, it is possible to use same ID many times in a page. However when you use an ID as a part of URI/URL as below:

https://en.wikipedia.org/wiki/FIFA_World_Cup#2015_FIFA_corruption_case

And if the ID('2015_FIFA_corruption_case') is used for only one (span)element in web page:

<span class="mw-headline" id="2015_FIFA_corruption_case">2015 FIFA corruption case</span>

There would be no problem. On the contrary, same ID exists in more than one place, the browser would be confused.

@ganesh phirke 2018-01-12 16:19:21

<div id="one">first text for one</div>
<div id="one">second text for one</div>

var ids = document.getElementById('one');

ids contain only first div element. So even if there are multiple elements with the same id, the document object will return only first match.

@janaravi 2017-09-06 06:26:20

I think you can't do it because Id is unique you have to use it for one element . You can use class for the purpose

@Nick Steele 2016-09-08 13:52:15

The official spec for HTML states that id tags must be unique AND the official spec also states that if the render can be completed, it must (i.e. there are no such thing as "errors" in HTML, only "invalid" HTML). So, the following is how id tags actually work in practice. They are all invalid, but still work:

This:

<div id="unique">One</div>
<div id="unique">Two</div>

Renders fine in all browsers. However, document.getElementById only returns an object, not an array; you will only ever be able to select the first div via an id tag. If you were to change the id of the first div using JavaScript, the second ID would then be accessible with document.getElementById (tested on Chrome, FireFox & IE11). You can still select the div using other selection methods, and it's id property will be returned correctly.

Please note this above issue opens a potential security vulnerability in sites that render SVG images, as SVGs are allowed to contain DOM elements, and also id tags on them (allows script DOM redirects via uploaded images). As long as the SVG is positioned in the DOM before the element it replaces, the image will receive all JavaScript events meant for the other element.

This issue is currently not on anyone's radar as far as I know, yet it's real.

This:

<div id="unique" id="unique-also">One</div>

Also renders fine in all browsers. However, only the first id you define this way is utilized, if you tried document.getElementById('unique-also'); in the above example, you would be returned null (tested on Chrome, FireFox & IE11).

This:

<div id="unique unique-two">Two</div>

Also renders fine in all browsers, however, unlike class tags that can be separated by a space, the id tag allows spaces, so the id of the above element is actually "unique unique-two", and asking the dom for "unique" or "unique-two" in isolation returns null unless otherwise defined elsewhere in the DOM (tested on Chrome, FireFox & IE11).

@MrWhite 2019-01-30 15:28:49

"the id tag allows spaces" - Although, according to the spec, the "The value must not contain any space characters."

@Nick Steele 2019-01-30 18:14:59

I agree. However, there is the spec, and there is how the browsers operate. Browsers historically treat the spec as something of a goal, but have not been strict on many of the items. I think they do this because if they met the spec it would break lots of existing sites or something. I mention at top that although these things work, they are invalid.

@Leniel Maccaferri 2013-07-23 06:22:45

Even if the elements are of different types it can cause you some serious problems...

Suppose you have 3 buttons with the same id:

<button id="myid" data-mydata="this is button 1">button 1</button>
<button id="myid" data-mydata="this is button 2">button 2</button>
<button id="myid" data-mydata="this is button 3">button 3</button>

Now you setup some jQuery code to do something when myid buttons are clicked:

$(document).ready(function ()
{
    $("#myid").click(function ()
    {
        var buttonData = $(this).data("mydata");

        // Call interesting function...
        interestingFunction();

        $('form').trigger('submit');
    });
});

What would you expect? That every button clicked would execute the click event handler setup with jQuery. Unfortunately it won't happen. ONLY the 1st button calls the click handler. The other 2 when clicked do nothing. It is as if they weren't buttons at all!

So always assign different IDs to HTML elements. This will get you covered against strange things. :)

<button id="button1" class="mybtn" data-mydata="this is button 1">button 1</button>
<button id="button2" class="mybtn" data-mydata="this is button 2">button 2</button>
<button id="button3" class="mybtn" data-mydata="this is button 3">button 3</button>

Now if you want the click event handler to run when any of the buttons get clicked it will work perfectly if you change the selector in the jQuery code to use the CSS class applied to them like this:

$(document).ready(function ()
{
    $(".mybtn").click(function ()
    {
        var buttonData = $(this).data("mydata");

        // Call interesting function...
        interstingFunction();

        $('form').trigger('submit');
    });
});

@Dmitry 2016-08-05 04:42:42

what if I have a "#content" which I already have referenced in a variable, and a #my-div #content which I only have for a few moments after which I remove the referenced node and forget its variable, after which the #div #content performs a myDiv.outerHTML = myDiv.innerHTML to replace the original. This saves the need to hard copy all styles and contents of #content into #decoy and do the same thing. This makes sense when doing transitions.

@Karan Kaw 2017-10-11 15:04:16

This means that, even if I use 'append' to add multiple element of same id, DOM only considers first element to be real, ideally 1 ID = 1 Element

@barrypicker 2014-11-21 16:45:53

Well, using the HTML validator at w3.org, specific to HTML5, IDs must be unique

Consider the following...

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <title>MyTitle</title> 
    </head>
    <body>
        <div id="x">Barry</div>
        <div id="x">was</div>
        <div id="x">here</div>
    </body>
</html>

the validator responds with ...

Line 9, Column 14: Duplicate ID x.      <div id="x">was</div>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">Barry</div>
Error Line 10, Column 14: Duplicate ID x.       <div id="x">here</div>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">Barry</div>

... but the OP specifically stated - what about different element types. So consider the following HTML...

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <title>MyTitle</title> 
    </head>
    <body>
        <div id="x">barry
            <span id="x">was here</span>
        </div>
    </body>
</html>

... the result from the validator is...

Line 9, Column 16: Duplicate ID x.          <span id="x">was here</span>
Warning Line 8, Column 14: The first occurrence of ID x was here.       <div id="x">barry

Conclusion:

In either case (same element type, or different element type), if the id is used more than once it is not considered valid HTML5.

@RobW 2011-09-14 20:03:52

SLaks answer is correct, but as an addendum note that the x/html specs specify that all ids must be unique within a (single) html document. Although it's not exactly what the op asked, there could be valid instances where the same id is attached to different entities across multiple pages.

Example:

(served to modern browsers) article#main-content {styled one way}
(served to legacy) div#main-content {styled another way}

Probably an antipattern though. Just leaving here as a devil's advocate point.

@psycho brm 2017-05-23 08:31:05

Good point. Although the dynamically generated content that is supposed to be inserted into another page should avoid ids altogether. Ids are like globals in programming languages, you can use them, and there are valid cases where it's a nice hack that simplifies things. It's a nice practice to consider doing things right before doing hacks.

@denishaskin 2013-04-21 22:43:32

And for what it's worth, on Chrome 26.0.1410.65, Firefox 19.0.2, and Safari 6.0.3 at least, if you have multiple elements with the same ID, jquery selectors (at least) will return the first element with that ID.

e.g.

<div id="one">first text for one</div>
<div id="one">second text for one</div>

and

alert($('#one').size());

See http://jsfiddle.net/RuysX/ for a test.

@user400654 2013-04-25 21:16:33

Unless you use a more complex selector, such as div#one That of course doesn't change the fact that it's invalid.

@Dibyanshu Jaiswal 2015-02-09 11:39:06

Possibly this answer is true, I am saying this from experience.

@Jin Kim 2012-10-25 18:27:11

I think there is a difference between whether something SHOULD be unique or MUST be unique (i.e. enforced by web browsers).

Should IDs be unique? YES.

Must IDs be unique? NO, at least IE and FireFox allow multiple elements to have the same ID.

@omninonsense 2012-10-25 18:33:46

So does Chrome (v22 at the time this comment was written). :D

@leo 2014-04-09 09:14:23

According to the spec, this is a MUST, not a SHOULD. (Does it still work in most browsers? Yes. Is it valid HTML? No. Also, for getElementById, the result in such cases is undefined, meaning that there is no way of telling how a browser might chose to handle it.)

@BJury 2014-07-02 11:39:13

@leo however this is the real world where browsers don't conform fully to the standards. In this case it could be a good thing, as there is no reason to enforce unique IDs.

@mltsy 2017-05-16 18:32:37

In HTML5, the spec for getElementById actually does define that the first element with the given ID must be returned (which is how all browsers currently handle the situation anyway) - see my answer below for more.

@Máxima Alekz 2017-06-06 22:46:57

Don't cry, use jQuery. @leo

@Gazler 2011-04-10 13:15:35

No. two elements with the same id are not valid. IDs are unique, if you wish to do something like that, use a class. Don't forget that elements can have multiple classes by using a space as a delimeter:

<div class="myclass sexy"></div>

@thecodeparadox 2011-04-10 13:19:45

Is it possible to have more than one student in a class having same Roll/Id no? In HTMLid attribute is like so. You may use same class for them. e.g:

<div class="a b c"></div>
<div class="a b c d"></div>

And so on.

@phihag 2011-04-10 13:16:13

Nope, IDs have to be unique. You can use classes for that purpose

<div class="a" /><div class="a b" /><span class="a" />

div.a {font: ...;}
/* or just: */
.a {prop: value;}

@SLaks 2011-04-10 13:15:48

No.

Element IDs should be unique within the entire document.

@corsiKa 2012-12-09 05:11:59

What are the consequences of not doing so?

@mrooney 2013-05-13 20:55:52

@corsiKa the consequence is undefined behavior, for example, what does document.getElementById("#foo") or $("#foo") return when there are multiple #foos? You'll run into problems being able to work with these elements from JS, pass them as selectors to libraries/APIs/Flash, etc.

@Jared 2013-05-31 17:48:01

Microsoft Outlook builds their webapp like this. It's annoying as hell. How would I reference a specific DIV if there are ones with the same ID?

@BJury 2014-07-02 11:33:21

This is incorrect. It is entirely possible to have multiple elements with the same ID. It's not generally best practice, but it does have its occasional uses. Everyone seems to cite how would selectors work, well if your going in knowing you'll have conflicting IDs, you use your selectors with a parent, where the IDs under the parent would be unique. eg $('div#car span#size) and $('div#truck span#size').

@Max Yari 2014-10-14 12:22:41

why even use multiple similar id's when you got class for this purpose?

@Cheesus Toast 2014-10-17 17:52:07

I think I have found a situation where this seems to occur. If you are using radio buttons on ASP.NET MVC 5 Razor it seems to produce the same ID for each button. I think this may be how the controller deals with input because the id is the same as the ActionResult input parameters. It does not seem to care as long as it gets the right value. I believe there is a way around it but it seems to work OK (but I am not happy with multiple html IDs!).

@Alen Siljak 2015-01-21 12:24:05

Yes, multiple IDs can, in practice, be replaced by using classes. However, classes are intended for applying styles, not identifying elements, making the scope of names much wider and therefore likely to overlap. Especially if using 3rd party libraries. Id as 'identifier' is not intended to be multiplied so there is clearly a need for something in between. The practical use is componentization of sections of a page/dom into separate logical units. Using (at least) 2-layer identification is hence required.

@wootscootinboogie 2016-02-09 18:44:17

Recently had a bug with d3.js and click event handling with multiple, identical IDs. What I observed was the first instance of the ID received the action, even if it was invoked by the second ID. E.g., click on the second instance of id1, and the first instance of id1 would receive the action (change color, text, etc.).

@Jeremy 2016-02-25 10:19:48

Whilst it may be considered bad practice or even invalid HTML 5 by validators, having multiple ID's is certainly possible within the same HTML document. Therefore this answer is not the correct one.

@Koshinae 2016-03-11 09:26:11

@Dmitry 2016-08-05 04:39:06

So it is completely reasonable to have #content and #myDiv #content for a brief period of time?

@Nick Steele 2016-09-08 13:29:47

Yes, it's valid. SVG files contain ID names and can even mess up applications that don't account for the possibility of multiple ID names (if you make a G tag with an id, it becomes part of the DOM, so drawing an SVG on screen can introduce multiple id tags, even if you aren't aware it's happening, right on your site.

@Bilow 2017-08-18 10:48:16

The :target selector does only work on ids. Can't use classes. Isn't it a valid scenario ?

@Spyryto 2017-10-23 13:01:34

Nope. The answer to the question "Is this valid?" does not necessarily have to match the answers to the questions "Do I need this?", "Do I wish this was valid?" or even "Does this dirty hack work in current implementations of the spec?"

@Asimov 2018-05-08 05:34:27

What would be an alternative in case you want to group some elements using an identifier?

@SLaks 2018-05-08 14:21:21

@Asimov: Classes or attributes.

@RedYetiCo 2018-07-31 12:03:15

Under the current specification, the id attribute is for "uniquely identifying" a tag. Re-using the same id within the same document is considered invalid. dom.spec.whatwg.org/#concept-id

@PoloHoleSet 2018-09-11 21:01:10

What about for something like bootstrap menu list items (<li>)? I have the same menu items, one that shows up in a standard menu, one that only shows up in an expanded menu in mobile view. They are, for all intents and purposes, the same item, and I want the same behavior for them if there is any object interaction. I have a plug in that isn't working because it won't assign an ID for the WordPress menu item in the mobile menu.

@Dhruv Singhal 2018-10-10 13:08:53

if I have two fields having same id, how to retrieve data collectively from those fields? Pardon me for so late comment, but I am having this issue for 2-3 hours and can't seem to find a working solution for it

@SLaks 2018-10-10 14:13:15

@DhruvSinghal: Don't do that. IDs should be unique.

@Dhruv Singhal 2018-10-10 14:30:27

OK so let me rephrase by question... I am NOT using ids. How can I achieve that now?

@SLaks 2018-10-10 17:00:26

@DhruvSinghal: Use classes or data- attributes or anything else that can be selected by a CSS selector / querySelector().

@Dhruv Singhal 2018-10-11 07:08:41

Thanks, I used getElementByNames and got the desired result

@user2988142 2018-10-11 14:54:27

@DhruvSinghal: document.querySelectorAll('#foo') could be used to retrieve all elements with same id's. (at least in Firefox)

@Dhruv Singhal 2018-10-11 15:25:48

@user2988142 as others mentioned, I will not be relying on duplicate IDs because I have to make the project browser independent. So getting elements by names has been better way for doing so for me (since I am using form)

Related Questions

Sponsored Content

39 Answered Questions

[SOLVED] How do I remove the space between inline-block elements?

  • 2011-02-22 12:41:14
  • ┼áime Vidas
  • 256019 View
  • 1016 Score
  • 39 Answer
  • Tags:   html css

54 Answered Questions

27 Answered Questions

[SOLVED] Set cellpadding and cellspacing in CSS?

38 Answered Questions

[SOLVED] How do I vertically center text with CSS?

24 Answered Questions

[SOLVED] How can I set the default value for an HTML <select> element?

  • 2010-08-19 01:10:51
  • Jichao
  • 2367687 View
  • 1346 Score
  • 24 Answer
  • Tags:   html html-select

14 Answered Questions

[SOLVED] How to move an element into another element?

  • 2009-08-14 20:14:45
  • Mark Richman
  • 1054813 View
  • 1618 Score
  • 14 Answer
  • Tags:   javascript jquery html

14 Answered Questions

[SOLVED] How can I select an element by name with jQuery?

26 Answered Questions

[SOLVED] Retrieve the position (X,Y) of an HTML element

8 Answered Questions

[SOLVED] Can we have multiple <tbody> in same <table>?

  • 2010-06-19 18:25:10
  • Jitendra Vyas
  • 170370 View
  • 582 Score
  • 8 Answer
  • Tags:   html html-table xhtml

14 Answered Questions

[SOLVED] <button> vs. <input type="button" />. Which to use?

Sponsored Content