In itself, an HTML hyperlink is one of the most useful distinctions between the internet and a standard text file. Linking is the foundation of the internet, and this is the little tag that got a majority of the ball rolling. You can employ links to provide navigation to other content, which allows fantastic organization and eliminates the fear of the user becoming claustrophobic with too much content on one page. Before we go any farther, hyperlinks are often referred to as anchor tags. However, some people talk about anchor tags in their use as a table of contents where you click the link and it navigates you further down the page. Technically, it is a hyperlink that links to certain content of the same page. Finally, the last important note about hyperlinks is that they contain URLs, which can be relative and absolute.

Relative and Absolute Links

Absolute links are generally used for navigation outside your website. For example,https://www.afterhoursprogramming.com/index.php is an absolute link. However, let’s say I have an HTML document calledindex.php and it is in my root directory (www.afterhoursprogramming.com/). I can link to that sameindex.php file by using a link that has a reference to "index.php". That is all you would need to put in thehref attribute—no https://www.afterhoursprogramming.com/ because you are in that same directory. That, my friend, is a relative link.

Example

<a href="https://www.afterhoursprogramming.com/"> Absolute Link </a>
<a href="/"> Relative Link </a>

Result

Absolute Link from index.php Relative Link

The href is actually an attribute of the <a> tag. We will discuss attributes later because almost all HTML tags have attributes, and there are numerous amounts of them.

Now, if my index.php file moved to another folder, let’s say it moved tohttps://www.afterhoursprogramming.com/newFolder/. If I were to use a relative link from thatindex.php, I would use a reference or source of newFolder/index.php because I am still in the root folder, but I need to get to the newFolder to access the index.php.

Internal Anchor Tags

Quite often, people love to create massive pages with a table of contents. While I strongly argue against this, I will explain how to create internal page linking. Almost every HTML element has an id attribute, which is a unique identifier. All that is required to have this collection of internal anchor tags is to simply link to this element on the page. Then add a # sign plus the id of the element. While it is somewhat confusing to explain with words, it is easier to show with an example.

Example

<a href='pageName.html#sampleId'>Go to element with id of sampleId</a>
<p id='sampleId'>Some text</p>

Whenever a user clicks the top link in the example, the browser scrolls to the bottom link no matter how much content is in between the two links. So, if we wanted to link to a few lines of text, we could place a container element (like the paragraph tag) around the lines of text with a unique id that we could link to using hyperlinks. Like the example above, we can place our text in the paragraph tag with an id of sampleId and then link to it with a hyperlink pointing to #sampleId using the hyperlink’s href attribute.