Bdtjtk

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.

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

If you 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 to consider 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!) that malfunction when multiple elements have the same ID, that you may encounter in the future.

The power is yours!

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>

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');

    });

});

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

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.

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.

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.

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;}

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.

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

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

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.