W3C errors for duplicate id's

Question

I am using http://validator.w3.org to validate my code.

However I have 45 errors, largely related to duplicate id's.

I thought where possible it would be a good pratctice to re use CSS.

Example code:

CSS

#cloudbullet {
background-color: #85c0bf;
height: 22px;
left: 13px;
margin-top: 7px;
position: relative;
top: 63px;
width: 20px;

HTML

<div id="container1-title" class="">
        <h2>Cloud/Hosting</h2>
        </div>

        <div id="cloudbullet" class="">
        </div>
        <div id="cloudbullet" class="">
        </div>
        <div id="cloudbullet" class="">
        </div>
        <div id="cloudbullet" class="">
        </div>
        <div id="cloudbullet" class="">
        </div>
        <div id="cloudbullet" class="">
        </div>

The effect being that I get 6 css boxes in a vertical row.

Please can someone advise if what I have done is correct and if I should ignore the validation or does this need to be done in a different way?

Thanks,

Solution

For something that appears several times, you want something that classifies them, not identifies them. An id should be unique in the page.

Even though some things work with duplicate identifiers, it's not certain that it works the same in all browsers, and some things certainly won't work. If for example you want to use the identifier to find the elements using JavaScript, you will run into problems.

Use the class attribute instead. CSS:

.cloudbullet {
  background-color: #85c0bf;
  height: 22px;
  left: 13px;
  margin-top: 7px;
  position: relative;
  top: 63px;
  width: 20px;
}

HTML:

<div id="container1-title">
  <h2>Cloud/Hosting</h2>
</div>

<div class="cloudbullet">
</div>
<div class="cloudbullet">
</div>
<div class="cloudbullet">
</div>
<div class="cloudbullet">
</div>
<div class="cloudbullet">
</div>
<div class="cloudbullet">
</div>