Everything About HTML Links: From Basics to Advanced Tricks

The web wouldn't be what it is without hyperlinks (or simply links). Links are the building blocks that connect individual web pages into one huge global network. Without them, every website would be just an isolated island.

In this article, we will take a detailed look, without taking any shortcuts, at how HTML links work, how to correctly use them for internal and external pages, how to open documents, and how to create links within the same page.

1. Basic Link Structure: The <a> Tag and the href Attribute

In HTML, we create a link using the <a> tag (short for anchor). However, the <a> tag itself does nothing unless we add the href attribute (hypertext reference). The href attribute tells the search engine and browser where to take the user when they click on the text.

Basic syntax example:

<a href="https://www.google.com">Click here to visit Google</a>

Code breakdown:

• <a> – The opening tag for the link.
• href="https://www.google.com" – The attribute specifying the target Web URL.
• Click here to visit Google – The visible text (the so-called anchor text) that the user clicks on.
• </a> – The closing tag that ends the link.

2. External vs. Internal Links

When working with web pages, you will encounter two types of paths to a destination: absolute and relative.

A) External (Absolute) Links
External links lead to completely different websites (for example, from your site to Google, Wikipedia, or another external domain). For external links, we must include the full web address in the href attribute, including the protocol (https:// or http://).

<!-- Correct: Full URL with protocol -->
<a href="https://vadnica.org">Visit the homepage Vadnica.org</a>

Warning: If you forget to write https://, the browser will think it's a file on your own site, and the link will not work!

B) Internal (Relative) Links
Internal links connect subpages within your own website (for example, from the homepage to the "About Me" or "Contact" page). Since these files are located on the same server, you don't need to write the full domain address.

Let's assume we have two files in the website folder: index.html (homepage) and contact.html.

<!-- Link from index.html to the contact subpage -->
<a href="contact.html">Write to us on the contact page</a>

If the subpage is located in a specific folder (e.g., in the blog folder), we write the path like this:

<a href="blog/article-1.html">Read the first article</a>

3. Opening a Link in a New Window or Tab (target="_blank")

When you send a user to an external website via a link, you usually don't want them to leave your site. That's why we use the target="_blank" attribute, which instructs the browser to open the link in a new tab (or window).

<a href="https://www.wikipedia.org" target="_blank">Read more on Wikipedia (opens in a new tab)</a>

4. A Link That Opens or Downloads an Image/File

The href attribute doesn't only have to lead to HTML documents. It can also point to images (.jpg, .png, .avif), PDF documents, or ZIP files.

Opening an image in the browser:
If you enter the path to an image in the href attribute, the browser will open it in full view upon clicking:

<a href="images/large-radio-image.jpg" target="_blank">View the image in full size</a>

Automatic file download (download attribute):
If you want the user to download the file to their computer upon clicking (instead of the browser opening it), add the download attribute:

<a href="documents/instructions.pdf" download>Download instructions in PDF format</a>

5. Anchors: Links to a Specific Part of the Same Page

Sometimes we have very long articles and want to allow the user to jump with a single click to a specific paragraph or section lower down on the same page. For this, we use so-called anchors.

This process requires two steps:

• We assign a unique id to the element or heading we want to jump to.
• In the link's href, we write the # symbol followed by that ID name.

Working example:

<!-- 1. Link at the top of the page -->
<a href="#chapter3">Jump to Chapter 3</a>

<!-- A lot of long text here... -->

<!-- 2. Target chapter with the id attribute -->
<h3 id="chapter3" class="section-heading section-heading--blue">3. Chapter: Advanced Features</h3>
<p>Here is the text of the third chapter...</p>

6. Special Types of Links: Email and Phone

HTML also allows creating links that automatically open the user's email client or initiate a phone call on mobile devices.

Email link (mailto:):

<a href="mailto:info@vadnica.org">Send us an email</a>

Phone link (tel:):

<a href="tel:+38612345678">Call us: 01 234 5678</a>

Summary

With this, you have mastered all aspects of how HTML links work! In the next article, we will take a detailed look at how to insert images on a web page and how to properly edit and optimize them.