Are there two ways to jump to a fragment identifier in HTML?
Asked Answered
S

5

10

I always thought the standard way to specify a fragment identifier is by <a name="foo"></a>.

<a href="#foo">go to foo</a>

<a name="foo"></a>                        <!-- obsolete method, it seems -->
<p>some content under that anchor with name</p>

But it seems like this is the old way, and the new way is using an id, like this:

<a href="#bar">go to bar</a>

<p id="bar">some content under that p with id</p>

In fact, the W3C validator says that name is obsolete for the <a> element. So are there 2 ways to jump to the fragment identifier but 1 of them is obsolete? (And when did that happen?)

(there are other questions about the difference between id and name, but this one is about fragment identifier)

Selfdiscipline answered 27/1, 2016 at 8:26 Comment(1)
A
8

So are there 2 ways to jump to the fragment identifier but 1 of them is obsolete?

There are two ways to identify a fragment.

(There are also two ways to jump to one, since you can do it with a URL or write a pile of JavaScript to scroll the page).

And when did that happen?

id was introduced in 1996 when HTML 4 came out. It effectively obsoleted the name attribute for anchors.

name was made officially obsolete in HTML 5 in 2014 (or in Living HTML on some date that I'm not going to try to figure out).

Archenemy answered 27/1, 2016 at 8:32 Comment(0)
A
3

Yes there are two ways to jump to a fragment identifier and both aren't obsolete ( except a element).

That's rules applied to all HTML 5 elements other than a (because in a hasn't name attribute in HTML5).

So shortly it's obsolete to idenfity name attribute as fragment idenitifier for a element as that's attribute depricated since HTML4.

Flow of accessing fragment from HTML5 Specification:

  • 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.
Arching answered 27/1, 2016 at 8:34 Comment(1)
Spec link to find a potential indicated element as of 2024.Glob
P
1

Both ways of doing fragment identifiers work.

Using id="fragment" is the newer, recommended way of jumping to fragments in HTML. It was introduced with HTML4, and works basically everywhere (I just verified this with IE5).

<a name="fragment">, the older way, still works, but is obsolete since HTML5.

Passable answered 27/1, 2016 at 8:34 Comment(1)
@太極者無極而生 I happened to have that in a Win2000 VM so I decided to go for it. I guess it also applies to later versions.Passable
B
1

Answer to your question: Yes, There are two ways to identify a fragment and one is obsolete.

What is Fragment Identifiers ?

  1. Fragment identifiers for text/plain.
  2. URIs refer to a location in the same resource. This kind of URI starts with "#" followed by an anchor identifier (called the fragment identifier).

Fragment Identifier using JS like below.

location.replace('#middle');
Blankly answered 27/1, 2016 at 9:13 Comment(0)
T
1

More information on the name attribute.

Basically, the name attribute has been deprecated (obsolete in HTML5-speak) for just about everything except for form elements. Forms retain them as the method of identifying data, and it is the name plus the value property which is sent back to the server. (The id in form elements is used for attaching label elements, and has nothing to do with the actual data).

There is a fundamental weakness in the name attribute, which the id attribute addresses: the name attribute is not required to be unique. This is OK for forms where you can have multiple elements with the same name, but unsuitable for the rest of the document where you are trying to uniquely identify an element.

The id attribute was specifically required to be unique, which makes it better for identifying a link target, among other things. CSS is pretty relaxed about applying styles to multiple elements with the same id, but JavaScript is more strict about this requirement. And, of course, you can’t have a practical link target if you can’t guarantee uniqueness.

Tomlinson answered 9/10, 2018 at 10:18 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.