HyperText Links

At MIT, a researcher named John Mallery points out how primitive the Web’s links are today. They are fun, he agreed, but they are not smart. You can find information on the Web only by drifting through the links other users have created or by knowing the specific address of the document.

The (Second Phase of the) Revolution Has Begun, Gary Wolfe, Wired Magazine, Oct 1994

Anchor Element

So, if URLs are the command line of the World Wide Web then the anchor element, commonly called hyperlinks, are stored commands that you can reuse. The URLs are placed in the anchor element’s href attribute.

<a href="https://www.htmlhobbyist.com/html/search.html?q=links&filter=elements#results">Search</a>

Absolute Paths

Absolute paths always start with the protocol and the hostname. This is how we link to other pages on other websites.

<a href="https://www.htmlhobbyist.com/html/search.html"></a>

Relative Paths

It would be pretty cumbersome if we had to use absolute paths all the time. Luckily, for pages on our own websites, we can use a relative path. You only need to use enough of the path to let the browser understand where to go fromthe current location.

If you wanted to link to a fragment id within the current page, you’d just need to use the fragment id.

Relative Paths
<a href="#relative_paths">Relative Paths</a>

If the file is in the same directory you can just type in the file name to link to it. This is how you link from one page to another within the same website.

Inline Elements
<a href="inline_elements.html">Inline Elements</a>

If you begin an href with ../, it assumes you want to go up one directory from the current page, before following the rest of the path.

What is a URL?
<a href="../www/what_is_a_url.html">What is a URL?</a>

If you begin an href with /, it assumes you want to go to the root directory of the current site first, before following the rest of the path. Note that this works on a server, but won’t necessarily work on your local computer. If you ever move these files to a different root domain these links should still work.

<a href="/">Home</a>
<a href="/www/">WWW</a>
What is a URL?
<a href="/www/what_is_a_url.html">What is a URL?</a>

If you’re working on your website locally you might have minor issues using this pattern as the browser will got to the root of your local drive where your file exists.