HTML Anchors: Introduction
Adding links to a page is one of the key features of HTML. Links allow us to go from one page to another easily by just doing a single click! Without links, we would end up typing address of each page that we need to visit, each time. That does not sound like a lot of fun especially for if you are on a mission to browse all pages present in the Internet!
The basis for adding links on an HTML page is using the anchor element identified by <a> tag. Here is a simple version of the anchor element.
<a href="Web-address-of-the-page">Anchor Text</a>
The href (short for hyper-reference) attribute specifies the address of a destination web resource. The resource is usually a web page but it can also be other resource type like a PDF file. The address of a page is sometimes also known as the URL (Uniform Resource Locator). Between the opening and closing anchor tags, we can also place some text. Upon loading the page, this text would appear underlined (by default) and would be clickable. Once a user clicks this text appearing as link, the browser would load the page specified by the href address. Thus, if we were to add a link for going to the home page of Codingbison website or a few of the related pages, then we can do so as follows:
<!doctype html>
<html>
<head>
<title> Adding Links to an HTML page</title>
</head>
<body>
<!-- Example of an anchor tag -->
<a href="https://codingbison.com">Codingbison Home Page</a>
</body>
</html>
When we load the above example, the output would be several links that we can click:
Figure: HTML Anchors
For good user-experience, one of the unique things about links is that they show up with different colors based on the link-state if they have been visited, or un-visited, or when we hover over the link. It is a good web-design practice to keep these colors separate for each of these link states.
In majority of cases, we enclose text between the opening anchor tag and the closing anchor tag. However, if needed, we can keep other HTML elements as well. Thus, if we nest an image element between the two anchor tags, then the image becomes clickable and would point to the destination page.
Relative and Absolute Path
Like other attributes that take an address (URL), href also takes addresses in two variants: (a) absolute path and (b) relative path.
With absolute path, we specify the complete URL as the href. Thus, the href is complete in itself and is same as the one that we would type in a browser to go to the above webpage. In the above example, we specify the complete address (URL) of the webpage where we want to reach as: https://codingbison.com.
With relative path, we specify the location of the page with respective to the current page. For example, if are on a webpage (let us say, "https://codingbison.com/planets.html") and would like to go to another webpage (let us say, "moons.html") that is also in the same folder (on the web-server), then all we have to do is to say: href="./moons.html" and that would do the magic! If we were to use the absolute path, then we would need to specify the whole path as href="https://codingbison.com/moons.html".
As a general rule, we can use relative path, when we have a reference to a page (or resource) that is present on the same site. For a page (or resource) pointing outside of the current web-server (website), we should rely on absolute path.
To understand these two approaches better, let us see an example. This example (let us say, "https://codingbison.com/planets.html") provides an href link to another page on the same site and uses both absolute and relative paths.
<!doctype html>
<html>
<head>
<title> Adding Links to an HTML page</title>
</head>
<body>
<!-- Example of an absolute path -->
<a href="https://codingbison.com/moons.html">Codingbison Home Page</a>
<!-- Example of a relative path -->
<a href="./moons.html">Codingbison Home Page</a>
</body>
</html>
Please note that in the above example, we need to specify the "http://" part for absolute path. Without that, the browser would think that "www.codingbison.com/moons.html" is a page that sits in same directory as the page itself!