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.
<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.
<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.
<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>
<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.