Rob
Rob

Reputation: 26334

W3C validator complaining about duplicate div

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":

le validation errors

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.

Upvotes: 4

Views: 12256

Answers (4)

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 263047

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>

Upvotes: 10

Jan Sverre
Jan Sverre

Reputation: 4723

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.

Upvotes: 2

Oded
Oded

Reputation: 499142

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;
}

Upvotes: 1

Quentin
Quentin

Reputation: 944016

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.

Upvotes: 1

Related Questions