W3C validator complaining about duplicate div

Question

I use a clear div in several places in a single HTML file, a la:

#clear
{
    clear: both;
}

usage:

<div id="clear">
</div>

But W3C's HTML5 validator appears to be complaining that each subsequent use after the initial use is a "duplicate ID":

Why isn't this valid? How are you supposed to use clear divs multiple times on a single page if it isn't technically valid?

Note: this is mostly just an informative question, my HTML renders fine on all modern browsers, and given that this is the only error the HTML5 validator can find, I don't reall care, but I'd just like to know why this is considered to be a problem.

Answer 1

In HTML, id attributes must be unique within the whole document. If you want several clear <div> elements, use a class instead:

.clear
{
    clear: both;
}

---

<div class="clear">
</div>

Answer 2

Because "Duplicate ID clear".

You cannot have more than one element with a specific ID on the web site. Use class instead.

.clear {
  /*code here*/
}

<div class="clear"></div>

Classes can be repeated as many times you want to, but IDs can only be used once.