What practical problem will i face if i use same #id more than one time on a page , other than validation error "ID is already defined"?

Question

First of all I alwyas use one #ID. just asking this question to know deep reason behind it.

Is it only a matter of W3C validation? or more than that.

Will i face any practical problem or it's just a logic for validation?

see this example http://jsbin.com/aniqi it's working on all browsers. just validation giving error

update : I think all browser supports more than one #ID so it's just a recommendation but supported by browsers.

only validation give error : ID is already defined.

and if we use javascript to select #ID, other wise it's not a problem

Update 2: What should be the answer if some web design students of mine asking to me about "Why css #ID should be used once in a page. student doesn't know about javascript yet. What reasons i can give to not to use #ID more than one, while it's supported by all browsers?

Update 3: I found some useful info on W3C site

<P id="myparagraph"> This is a uniquely named paragraph.</P>
<P id="yourparagraph"> This is also a uniquely named paragraph.</P>

The id attribute has several roles in HTML:

The id attribute assigns a unique identifier to an element (which may be verified by an SGML parser). For example, the following paragraphs are distinguished by their id values:

* As a style sheet selector.
* As a target anchor for hypertext links.
* As a means to reference a particular element from a script.
* As the name of a declared OBJECT element.
* For general purpose processing by user agents (e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.).

Answer 1

The result is undefined.

Apart from what the rest said about getElementById:

• using #foo in CSS may apply to all elements with id="foo", or to the first, or to the last, depending on how the browser is implemented.
• using page.html#foo in a URL may scroll to one of the elements, or to the other, or to neither.

edit: either way, you should teach your students to do things right even if doing it wrong doesn't seem to have any immediate bad consequences... ;)

Answer 2

document.getElementById() won't work reliably.