Named anchor (A) with NAME same as a DIV ID conflict

Question

I am workign on a site that is using a listener for the hash to show and hide content DIVs and to scroll to the named anchor of the same name.

I was having a weird issue where instead of scrolling to the anchor, it would scroll to the DIV with the ID the same as the anchor's name.

Once I changed the DIV ID to something different, the behavior was as expected.

I can't seem to find any documentation on this and was wondering if this is documented behavior.

Code that works:

<a name="top">top</a>

<p id="bottomx" style="height: 1800px;">
<a href="#top">top</a>
<a href="#bottom">bottom</a>
<br>
</p>
<a name="bottom">bottom</a>

Not working as expected:

<a name="top">top</a>

<p id="bottom" style="height: 1800px;">
<a href="#top">top</a>
<a href="#bottom">bottom</a>
<br>
</p>
<a name="bottom">bottom</a>

In the second example, it would scroll to the P named "bottom". Likewise, if I make a DIV at the bottom of the page with an ID of "bottom" and I hit page.html#bottom, it scrolls down to that DIV.

Just seems confusing. An idea why this is working this way? Same behavior in Safari and FF.

Answer 1

id has precedence over name:

For HTML documents (and HTML MIME types), the following processing model must be followed to determine what the indicated part of the document is.

1. Parse the URL, and let fragid be the component of the URL.

2. If fragid is the empty string, then the indicated part of the document is the top of the document; stop the algorithm here.

3. Let decoded fragid be the result of expanding any sequences of percent-encoded octets in fragid that are valid UTF-8 sequences into Unicode characters as defined by UTF-8. If any percent-encoded octets in that string are not valid UTF-8 sequences (e.g. they expand to surrogate code points), then skip this step and the next one.

4. If this step was not skipped and there is an element in the DOM that has an ID exactly equal to decoded fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.

5. If there is an a element in the DOM that has a name attribute whose value is exactly equal to fragid (not decoded fragid), then the first such element in tree order is the indicated part of the document; stop the algorithm here.

6. If fragid is an ASCII case-insensitive match for the string top, then the indicated part of the document is the top of the document; stop the algorithm here.

7. Otherwise, there is no indicated part of the document.

Answer 2

The HTML 4.01 and XHTML 1.0 specifications require that a name attribute in an a element must not be the same as the value of an id attribute, except when set on the same element, the document is in error. Browsers are free to apply their own error handling, which can be rather unplanned.

HTML5 drafts specify complicated error handling rules, but they also declare the name attribute in an a element as obsolete.

It would be illogical (and formally forbidden) to use the same id value to two elements in the same document, as the very purpose, and sole purpose, of id is to provide a unique identifier for an element. The <a name=...> construct predates id in the history of HTML and was always meant to play the same role as id, in a restricted setting. It is thus natural that it is treated the same way.