Should I make HTML Anchors with 'name' or 'id'?
According to the HTML 5 specification, 5.9.8 Navigating to a fragment identifier:
For HTML documents (and the text/html MIME type), the following processing model must be followed to determine what the indicated part of the document is.
- Parse the URL, and let fragid be the <fragment> component of the URL.
- If fragid is the empty string, then the indicated part of the document is the top of the document.
- If there is an element in the DOM that has an ID exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.
- If there is an a element in the DOM that has a name attribute whose value is exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.
- Otherwise, there is no indicated part of the document.
So, it will look for id="foo", and then will follow to name="foo"
Edit: As pointed out by @hsivonen, in HTML5 the a element has no name attribute. However, the above rules still apply to other named elements.
You shouldn’t use <h1><a name="foo"/>Foo Title</h1> in any flavor of HTML served as text/html, because the XML empty element syntax isn’t supported in text/html. However, <h1><a name="foo">Foo Title</a></h1> is OK in HTML4. It is not valid in HTML5 as currently drafted.
<h1 id="foo">Foo Title</h1> is OK in both HTML4 and HTML5. This won’t work in Netscape 4, but you’ll probably use a dozen other features that don’t work in Netscape 4.
I have to say if you are going to be linking to that area in the page... such as page.html#foo and Foo Title isn't a link you should be using:
<h1 id="foo">Foo Title</h1>
If you instead put an <a> reference around it your headline will be influenced by an <a> specific CSS within your site. It's just extra markup, and you shouldn't need it. I'd highly recommend placing an id on the headline, not only is it better formed, but it will allow you to either address that object in Javascript or CSS.
Wikipedia makes heavy use of this feature like this:
<a href="#History">[...]</a>
<span class="mw-headline" id="History">History</span>
And Wikipedia is working for everybody, so I would feel safe sticking with this form.
Also don't forget, you can use this not only with spans but with divs or even table cells, and then you have access to the :target pseudo-class on the element. Just watch out not to change the width, like with bold text, cause that moves content around, which is disturbing.
Named anchors - my vote is to avoid:
- "Names and ids are in the same namespace..." - Two attributes with the same namespace is just crazy. Let's just say deprecated already.
- "Anchors elements without href atribute" - Yet again, the nature of an element (hyperlink or not) is defined by having an atribute?! Double crazy. Common sense says to avoid it altogether.
- If you ever style an anchor without a pseudo-class, the styling applies to each. In CSS3 you can get around this with attribute selectors (or same styling for each pseudoclass), but still it's a workaround. This usually doesn't come up because you choose colors per pseudo-class, and the underline being present by default it only makes sense to remove, which makes it the same as other text. But you ever decide to make your links bold, it'll cause trouble.
- Netscape 4 might not support the id feature, but still an unknown attribute won't cause any trouble. That's what called compatibility for me.
<h1 id="foo">Foo Title</h1>
is what should be used. Don't use an anchor unless you want a link.