html - # Link to non-name elements

Question

HTML can use a "#name" link to direct users to named anchor elements, like <a name="name">. Is it possible to link to any other attributes, like id or class? How about HTML5 stuff like 'itemprop' or 'content' ?

Answer 1

Yes, and indeed it's preferred to use the id of an element to create an internal link within a page.

Example markup:

<a href="#part2">Part 2</a>

<!-- other html -->

<h2 id="part2">This is part 2</h2>

JS Fiddle demo.

It's worth noting that a link can connect to only one, unique, target, therefore a class (or other attribute) cannot be used as all non-id attributes may be shared/replicated across many elements. Whereas an id must be unique within the document.

Answer 2

You can use name and id of an element. The reason is that hash in url must point to single element on the page and only name and id are attributes that must have unique values.

Answer 3

According to http://dev.w3.org/html5/spec/single-page.html#scroll-to-fragid:

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.

For the purposes of the interaction of HTML with Selectors' :target pseudo-class, the target element is the indicated part of the document, if that is an element; otherwise there is no target element.