Can a div Have Two ids?

Can a div have two ids? While you can give a div multiple ids, only one will be applied by the browser. The second id or any other id after the first one will just be ignored by the browser. So having multiple ids for a div is not only pointless but is also incorrect HTML. If you need multiple tags for an HTML element, just use the class attribute. You can have as many classes as you want.

The best way to show whether a div can have two ids is to test it. So let’s show some examples of what happens when we give a div multiple ids.

In this first example, we will have a div with two id tags. Each id with have specific styles associated with it, so we can tell if the id is being applied to the div.

The first id, which we will call, #first, will have a background color of light green. The second div, which we will call #second, will have text that is bold. Let’s see what happens.

<style>#first { background: #7bbfa2; } #second { font-weight: bold; font-size: 24px; }</style>
<div id="first" id="second">
  This is some text that will be displayed in the div.
</div>

If you inspect the HTML in your browser you will notice that the HTML for our div appear as so:

<div id="first">This is some text that will be displayed in the div.</div>

Let’s see what happens if we swap our ids.

<style>#first { background: #7bbfa2; } #second { font-weight: bold; font-size: 24px; }</style>
<div id="second" id="first">
  This is some text that will be displayed in the div.
</div>

As you can see, the styles of the first id, this time #second, are being applied on the div.

<div id="second">This is some text that will be displayed in the div.</div>

JavaScript and Divs with multiple ids

So the main takeaway is that any other ids placed after the first id, will not show up in the HTML. So this means if we try to target the div using JavaScript, we can only target that first id and not any others. Let’s take a quick look at this.

We will have the same HTML code, just apply new styles via JavaScript.

<style>#third { background: #7bbfa2; } #fourth { font-weight: bold; font-size: 24px; }</style>
<div id="third" id="fourth">
  This is some text that will be displayed in the div.
</div>

<script>
  document.getElementById("third").style.background = "lightgreen";
  document.getElementById("fourth").style.fontSize = "10px";
</script>

As you can see, only the first line of JavaScript is executed, because the id, #fourth does not exist in the HTML.

Let’s swap the ids to see what happens.

<style>#third { background: #7bbfa2; } #fourth { font-weight: bold; font-size: 24px; }</style>
<div id="fourth" id="third">
  This is some text that will be displayed in the div.
</div>

<script>
  document.getElementById("third").style.background = "lightgreen";
  document.getElementById("fourth").style.fontSize = "10px";
</script>

Can multiple divs have the same id?

Finally, we will just see what happens when we have multiple divs with the same id. Once again, an id is supposed to be unique to an element. However, we will find that when we apply the same id to multiple divs, the id will be rendered and applied to all divs in the HTML.

Lets take a look at this below:

<style>#fifth { background: #7bbfa2; font-weight: bold; font-size: 24px; }</style>
<div id="fifth">
  This is some text that will be displayed in the div.
</div>
<div id="fifth">
  This is some text that will be displayed in the div.
</div>
<div id="fifth">
  This is some text that will be displayed in the div.
</div>

And here is what will be displayed by the browser:

This is not great practice however and to show one problem with this, let’s say we want to change the styles of our divs using JavaScript.

document.getElementById("sixth").style.background = "white";

This code will change the background color to white of the div with id #sixth. So let’s see the results when we use this code and have multiple divs with the same id.

<style>#sixth { background: #7bbfa2; font-weight: bold; font-size: 24px; }</style>
<div id="sixth">
  This is some text that will be displayed in the div.
</div>
<div id="sixth">
  This is some text that will be displayed in the div.
</div>
<div id="sixth">
  This is some text that will be displayed in the div.
</div>

As you can see, the JavaScript code will only be applied to the first element it finds with the matching id.

Hopefully this article has been useful in helping you answer the question, can a div have two ids?