Should I make HTML Anchors with 'name' or 'id'?

Viewed 661737

When one wants to refer to some part of a webpage with the "http://example.com/#foo" method, should one use

<h1><a name="foo"/>Foo Title</h1>

or

<h1 id="foo">Foo Title</h1>

They both work, but are they equal, or do they have semantic differences?

15 Answers

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.

  1. Parse the URL, and let fragid be the <fragment> component of the URL.
  2. If fragid is the empty string, then the indicated part of the document is the top of the document.
  3. 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.
  4. 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.
  5. 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.

<h1 id="foo">Foo Title</h1>

is what should be used. Don't use an anchor unless you want a link.

ID method will not work on older browsers, anchor name method will be deprecated in newer HTML versions... I'd go with id.

There's no semantic difference; the trend in the standards is toward the use of id rather than name. However, there are differences that may lead one to prefer name in some cases. The HTML 4.01 specification offers the following hints:

Use id or name? Authors should consider the following issues when deciding whether to use id or name for an anchor name:

  • The id attribute can act as more than just an anchor name (e.g., style sheet selector, processing identifier, etc.).
  • Some older user agents don't support anchors created with the id attribute.
  • The name attribute allows richer anchor names (with entities).

The second sample assigns a unique ID to the element in question. This element can then be manipulated or accessed using DHTML.

The first one, on the other hand, sets a named location within the document, akin to a bookmark. Attached to an "anchor", it makes perfect sense.

It's not about support right now, because who would care in 2021 about older browsers than IE6?

Notice that Stackoverflow is still using anchor and 'name' attribute instead of 'name' attribute.

Why?

Because you:

  1. can't have two values for id on SINGLE element.

#sample
{
  color: red; 
}
<div id="postNr4245 sample"> Sample text </div>  <!-- coloring doesn't work -->

<a href="#postNr4245">Jump to Post</a> <!-- jumping doesn't work -->

Ok, you can say you can use 'class' for the sake of things like that.

It's true but if there is only single element that needs to be styled on your site then you shouldn't use class.

Why?

Because if you use CSS selector #idName and web browser finds that element it won't look further. It speeds loading of your website.

If you use .class it needs to look for every place of your DOM because web browser doesn't know if you had used .class once or more times.

  1. You can't start 'id' value with number if you want to style it in CSS or use JS to parse it. You can however start 'name' value with number.

The whole "named anchor" concept uses the name attribute, by definition. You should just stick to using the name, but the ID attribute might be handy for some javascript situations.

As in the comments, you could always use both to hedge your bets.

Related