Home Connect Gallery Blog

Duplicate IDs in HTML: What would happen?

Jade Thornton

The id attribute is an often-used and useful HTML attribute. However, they're always meant to be unique. The HTML5 specification explicitly says:

The value must be unique amongst all the IDs in the element's home subtree

The HTML 4.01 specification says basically the same thing, that an id "must be unique in a document".

That's pretty clear, and is usually followed. When you want to use the same identifier for multiple elements, you should and probably usually do use a class attribute instead. But what if you do reuse the same id, intentionally or not? Take this example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Duplicated IDs</title>
  <style>
    #sec1, #sec2 {
      color: blue;
    }

    #sec3 {
      color: red;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#sec1">Goto 1</a>
    <a href="#sec2">Goto 2</a>
    <a href="#sec3">Goto 3</a>
    <a href="#sec3">Goto 4</a>
  </nav>

  <div id="sec1">
    <p>Section 1</p>
  </div>

  <div id="sec2">
    <p>Section 2</p>
  </div>

  <div id="sec3">
    <p>Section 3</p>
  </div>

  <div id="sec3">
    <p>Section 4</p>
  </div>

  <script>
    document.getElementById('sec3').innerHtml('Sup!');
  </script>
</body>
</html>

Notice that both 'Section 3' and 'Section 4' have the same id="sec3". Oh no! The HTML police are already knocking on my door! So what actually happens when a browser comes across duplicated id's? How does styling work? Document fragments? Javascript accessing the DOM?

Surprisingly, behavior is quite consistent across modern browsers as of this writing. Modern browsers—including Chrome, Firefox, Opera, etc.—are quite forgiving when it comes to some invalid HTML like duplicate id's. The HTML5 specification lays out three main uses for unique identifiers, basically comprising of fragment identifiers, DOM targeting for scripting and CSS styling. The behaviors of duplication on each of these uses is different, but related.

  • Document fragments: The browser will navigate to the first instance of the specified id. In the example above, clicking on the nav links "Goto 3" and "Goto 4" will both go to "Section 3" since they both use href="#sec3".
  • Javascript targeting: Javascript will select the first instance of the id. In the example, the script will only change the HTML inside the "Section 3" div.
  • Styling: All instances of the id are styled. In the example above, both "Section 3" and "Section 4" are styled with color: red;.

In all, document fragments and Javascript choose the first element, while CSS styles them all.

Why do all the browsers act the same, even though the specification doesn't say what to do and forbids duplicated identifiers in the first place? The specific reasons are varied, but in general browsers trend towards being developer-friendly. This means rendering bad markup by doing their best to interpret what the author means, and fail gracefully and often silently when necessary. But does this mean it's okay to duplicate id's? No.

Since the HTML5 specification, as well as HTML5.1 and HTML5.2 don't dictate what browsers should do with duplicate id's, nor is there any other standard which does. Therefore, behavior is not guaranteed and could change at any time.

The point of this article is that while browsers are forgiving of duplicated id's, this behavior is not guaranteed or predictable, and should always be avoided. Duplicated identifiers are bad style, create confusing code, are invalid HTML and most importantly, they make me cry. Surely you don't want me to cry.

More often than the world should allow (which is not at all), I have come across invalid HTML like this in the professional environments. Fixing it is time consuming and typically frustrating, and it drives me to drink (coffee). The world of development is filled with invalid and unreadable code, and this is why I cry.