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.

Solution 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>

Solution 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.

Solution 3

An id uniquely identifies an element and cannot be reused in a single document.

If you want to indicate that multiple elements have something in common, use a class. You will have to modify your CSS to use a class selector.

---

That said, inserting extra elements that do nothing except set clear is ugly and you should probably look at an alternative technique I'd suggest overflow: hidden in most cases.

Solution 4

You should be using a class attribute.

ID's attribute values are supposed to be unique within a page.

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

.clear
{
    clear: both;
}

View more solutions