Using id to Turn Hyperlinks into Bookmarks

First, a quick demo: Click this hyperlink to jump to the end of the article.

If you've clicked your way back, let's keep going with the story.

You've probably seen this often: in the comments section of many blogs, you can @ someone, and with one click you're taken straight to their original comment—obviously without any server round-trip in between. Similarly, on some long, sprawling pages, there's a table of contents at the top, and clicking a hyperlink in the TOC slides the page directly to the corresponding spot. So how is this jump implemented?

Two passages quoted from w3cschool

1. id

<div class="some_class_you_setted"><!-- some content --></div>

And w3cschool mentions:

A complete list of legal attributes for each HTML element is listed in our: HTML Tag Reference. Below is a list of some attributes that can be used on any HTML element:

Among them is our star of the show: id The description says:

id Specifies a unique id for an element

In other words, according to the standard, an element's id must be unique. We can add an attribute id="blablabla" to any element. Of course, we should make sure that id really is unique. If you break this rule, things like writing extension JS will run into trouble—but that's a story for another time.

2. Links

This page introduces HTML hyperlinks. It's really just this form:

<a href="xxx"></a>

But notably, w3cschool also has this description:

HTML Links - The id Attribute The id attribute can be used to create a bookmark inside an HTML document.

Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.

Example

An anchor with an id inside an HTML document: <a id="tips"></a>Useful Tips Section

Create a link to the "Useful Tips Section" inside the same document: <a href="#tips">Visit the Useful Tips Section</a>

Or, create a link to the "Useful Tips Section" from another page: <a href="http://www.w3schools.com/html_links.htm#tips"> Visit the Useful Tips Section

A working example

From the passages above, we already have enough understanding to easily implement the feature we need. The bookmark looks like this:

<h2 id="end_of_log">这就是故事的结局</h2>

And the hyperlink looks like this:

<a title="这就是故事的结局" href="#end_of_log">点击这个超链接，可以到文章的末尾。</a>

That's all it takes—one simple in-page link.

Extensions

The "id" attribute isn't the only one with this power

The id attribute must be unique, whereas the name attribute doesn't have to be. When an element is given a name, you get the same effect. For example:

<h2 name="#end_of_log">这就是故事的结局</h2>

The result is: when there's no id="end_of_log", you'll be taken to the first tag whose name is "end_of_log". If there is an id="end_of_log", you jump straight to end_of_log. Note that the W3C discourages using name="end_of_log"; it merely says "this works."

The value of href

<a href="#end_of_log">a link</a>

It can also be a relative address, for example

<a href="css/abc.css">a link</a>

If a website is in a subdirectory, we need to reference a relative path — this is a good approach.

It can also be an absolute address on the current domain:

<a href="/css/abc.css">a link</a>

This way, we can use a shared absolute path.

It can also point to some external website:

<a href="http://argcv.com">a link</a>

An external website can also be written like this:

<a href="//blog.argcv.com">a link</a>

Omitting the leading http: or https: has an advantage: we can seamlessly use whatever protocol is currently in use (http, https, ftp, etc.) to access the corresponding address. It's also very useful when referencing JavaScript. For example, when we reference a JS library — because an https page calling an external http library is a forbidden option — we can use a resource starting with "//", so the JS library stays consistent with our current protocol.

However, if we open an HTML file locally, the protocol becomes file://, and resources starting with "//" will break at that point.

And that's the end of the story