Navigating the Universe of Hyperlinks: A Beginners Guide to HTML Links

Hyperlinks, often referred to simply as 'links', connect various parts of a website, different files, or even other websites, providing a seamless navigation experience. In HTML, we create these essential navigational devices using the <a> tag coupled with an href attribute that specifies the destination of the link.

The example below establishes a simple link directed to https://www.codesignal.com. Once you click "Click me!", you'll be redirected to the specified website.

<a href="https://www.codesignal.com">Click me!</a>

Hyperlinks employ two strategies, absolute and relative paths, to connect pages and resources seamlessly. Absolute paths contain the full URL of the website:

<a href="https://www.codesignal.com/task/">Go to Tasks page on CodeSignal</a>

Conversely, relative paths exclude the domain, a feature particularly convenient when linking within your own website:

<a href="about.html">About Us</a>

In this example, about.html is assumed to be in the same directory as the current page.

Sometimes, we might want the linked page to open in a new browser tab. This is where the target attribute comes in. When set to _blank, the target attribute ensures the linked page opens in a new window or tab.

<a href="https://www.codesignal.com" target="_blank">Visit CodeSignal</a>

By clicking "Visit CodeSignal", you can keep the current page open while CodeSignal opens in a new tab.

Long pages can significantly enhance their navigability by implementing internal links. HTML uses the id attribute to formulate these useful internal links and to uniquely identify an element on the page.

<a href="#section2">Go to Section 2</a>

...

<h2 id="section2">Section 2</h2>
<p>This is Section 2 of the page.</p>

If you click "Go to Section 2", you'll be taken directly to the "Section 2" header.