Skip to main content

Using duplicate IDs in HTML

Well today I'm being a bit controversial. Let us see what the HTML5 spec says about unique IDs in a HTML file.
The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.
An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS.
Yes its been mentioned almost everywhere on the planet that ID must be unique. Now let us look at the below code,


Launch


dup.css


#p2 {
  background-color: yellow; 
}

dup-id.html

<!DOCTYPE html>
<html>
  <head>
    <title>Duplicate ID Tester</title>
<link rel="stylesheet" href="dup.css" />
  </head>
  <body>
<p><a href="#p1">1</a></p>
<p><a href="#p2">2</a></p>
<p><a href="#p2">3</a></p>
    <div id="p1">
<p>ID IS 1</p>
</div>
    <div id="p2">
<p>ID IS 2</p>
</div>
    <div id="p2">
<p>ID IS 3</p>
</div>
<p>Now lets get ID 2 again using javascript</p>
<script>
document.write(document.getElementById("p2").innerHTML);
</script>
  </body>
</html>

I've committed a big sin in this HTML code. Yes there are 2 div elements that use the same ID "p2". What should happen when you render this page now? I have tried this code on the famous five (Chrome, Firefox, IE, Safari and Opera) and also on the Android, Opera Mobile and Firefox Mobile browsers, and they all behave exactly the same way. You will actually see that the three major criteria mentioned in the HTML5 spec, seem to work just fine.
  • Linking to a document fragment: Reduce your browser size and click on link 2, it will navigate to the first div with the ID p2
  • Styling: Both the divs with the ID p2 are styled
  • Targeting the element using JavaScript: You will see that the text (ID IS 2) of the first div with ID p2 is printed using javascript at the end of the html doc.
To summarize, linking and picking up the first element with matching ID is done and all matching elements are styled. 


But the question is, why do browsers behave this well in spite of the spec mandating the ID to be unique? The answer is that browsers have come away from the strict mode and are more relaxed in the way they handle bad code (even more so now with HTML5). They are quite developer friendly and try to render as much as possible and fail gracefully where possible. Yes, that is the way to go!


But still a word of caution, it is not recommended to use duplicate IDs as it is against the spec and the browsers could change their implementation anytime. A hundred different things could go wrong in your code and you will spend hours figuring out what the issue is.

Comments

  1. I think you meant "they are quite bad-developer friendly"

    ReplyDelete
    Replies
    1. Mauricio, why bad? :)
      I meant 'the browsers' are developer friendly and try to render as much as ....

      Delete
    2. bad, because only bad developers use duplicated ids ;-)

      Delete
  2. I don't know why I should put any stock in a standards document that uses silly words like "amongst".

    ReplyDelete
  3. Does JQM use the page ID to cache page views? In a dynamic app I have problems with previous versions of pages being displayed. Would adding a time stamp to the page id force JQM to never show the cached view?

    ReplyDelete
  4. I understand that browsers are so relaxed because many already existing websites have duplicate IDs. Hence having a strict implementation of this spec (ie. not render the page) would make the relevant web browser extremely impopular.

    As a compromise it'd be nice to at least be prompted for duplicate IDs in the developer tool console. No idea why this is not the case.

    ReplyDelete
  5. I'm developing an automation on a site that uses this "trick," and it's quite the hassle. Here's a quick js function to clean it, if you're encountering the same problem. Of course this may not be useful for sites with scripts or styles that rely on it, though:

    function dedupid(idstring) {
    var elementlist = [];
    var messy = true;
    var counter = 1;
    var cap = 1000;
    while(messy) {
    var newid = document.getElementById(idstring);
    if(newid != null) {
    newid.id = newid.id + counter.toString();
    elementlist.add(newid);
    counter = counter + 1;
    }
    else {
    messy = false;
    }
    cap = cap - 1;
    if(cap <= 0) {
    messy = false;
    }
    }
    return elementlist;
    }

    ReplyDelete
  6. Can someone help me here - I have this exact issue with my website, unfortunately, I don't know what I should be using instead of duplicate IDs :-(

    Thanks!

    ReplyDelete

Post a Comment

Popular posts from this blog

Minimal required code in HTML5

I've encountered this question repeatedly of late. "What are the tags required at bare minimum for a html file?" Earlier there were a bunch of mandatory tags that were required for any html file. At bare minimum, the recommended structure was: (ref: http://www.w3.org/TR/html4/struct/global.html ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML>   <HEAD>     <TITLE>A small HTML</TITLE>   </HEAD>   <BODY>     <P>Small HTML file!</P>   </BODY> </HTML> Yes, using capitals for the tags was the way to go! Those were the days of the purists and strict was the way to be. Now open your notepad and copy the above code, save the file as old.html and launch it in Chrome or Firefox. You will see only one line "Small HTML file!" shown. Now launch the developer tools in Chrome or Inspect Element in Firefox. Thi

My Bookmarks fly to the Cloud

Updated: 15-Mar-2012 With latest version of Google Chrome (I'm using 17.x), you can now directly sign into Chrome from Options->Peronsal and access your bookmarks across computers. You no longer would need to export the bookmarks to Firefox using the Google Toolbar for Firefox, which is no longer supported by Google. The Google Toolbar is now available only for IE. Original (dated) article below ... ------- I have a queer problem of too many! I surf a lot, I subscribe to a lot and I bookmark a lot. Some numbers: 1 laptop and 1 netbook at home, 1 laptop and 1 desktop at office, sometimes its my Kindle and definitely my N900 when I'm on the move. So 6 devices out there and usually 2 browsers on most of them (yes Kindle only as one webkit based experimental implementation). So my bookmarks are all over the place, scattered over at least 10 different places. And each time I'm working on one box, I wish I had access to the bookmark I made a few hours ago on the other