HTML Anchor Links: Improve Your Site's User Experience

Learn more about one of the fundamental building blocks of the internet – the humble HTML link anchor tag.

This handy tool not only connects webpages across the internet but can also greatly enhance your website’s user experience.

Are you eager to have a more organized, navigable webpage?

In this comprehensive article, we dive deep into the world of HTML link anchor tags. We explore what they are, their role in web design, and how they make web browsing a more enjoyable and efficient process.

You’ll learn how to craft anchor links that point to specific sections of a page, as well as links for downloading documents, initiating emails, and even dialing phone numbers or sending messages through WhatsApp.

Let’s get started.

What Is a Link Anchor Tag In HTML?

An anchor tag in HTML is used to make text clickable so it can take you to another webpage or a different part of the same webpage.

Anchor links (or clickable text) in a webpage can make using the webpage easier and nicer:

Easy to move around: Links can help you move from one page to another, or jump to different parts of the same page.
Giving hints: The clickable text can give you a clue about what you will see if you click the link.
Saves time: Instead of scrolling through a lot of text, you can just click a link to get straight to the part you’re interested in.
Handy for revisiting: If there’s a part of the page you want to read again later, you can bookmark it if there’s a link to that part.

Anchor Link Example

<a href=”https://www.example.com”>Click me to go to example.com</a>

In this case, if you click on “Click me to go to example.com”, it will take you to the website “www.example.com”.

The href part is where you put the website address you want to link to, and the words between <a> and </a> are the text people will see and click on.

How to Create an Anchor Link that Will Point the HTML Anchor to A Specific Section of The Page?

In HTML, each element can have an attribute called id. This id is used to uniquely identify that element from all others on the page. No two elements should have the same id.

Now, when you want to create a link that, when clicked, takes you to a specific section on the page, you make use of this id.

Let’s break it down step-by-step:

Identify or create the target section

The first thing you need to do is to decide which part of your webpage you want to link to. This can be a paragraph, a header, an image, or any other HTML element. For instance, consider the following section:

<p id=”special-paragraph”>This is a special paragraph that you want to link to.</p>
Notice that we’ve used the id attribute to name this paragraph special-paragraph.

Create the link

Once you’ve identified or created the target section, the next step is to create the actual link. This is done using the anchor (<a>) tag with a href attribute. The href attribute should contain a hash symbol (#) followed by the id of the target section. Here’s how you create a link to our special paragraph:

<a href=”#special-paragraph”>Click here to go to the special paragraph</a>

This text “Click here to go to the special paragraph” will now appear as a clickable link on your webpage.

When you click on this link, your browser will instantly scroll to the section of the page where the special-paragraph is located.

This technique is particularly useful in long webpages to improve navigation. You can create a table of contents at the top of the page, and each item in the table can be a link that takes you directly to the corresponding section of the page.

Is It Possible to Point the HTML Anchor Link to A Specific Section of Another Page?

If you want to link to a specific section of another webpage, you can do so by including the full URL followed by the id of the target section. Here’s an example:

<a href=”https://www.example.com/page#special-paragraph”>Go to the special paragraph on example.com</a>

Also, remember that every anchor id is supposed to be unique so don’t use the same id more than once.

Link to Download File

To create a link for downloading a file from your webpage, you need to use an <a> (anchor) tag with the href attribute pointed at the file’s location. The file location can be a relative path (if the file is hosted on the same server as your website) or an absolute URL (if the file is hosted somewhere else).

Here is a basic example with a relative path for a PDF file:
<a href=”/path/to/file.pdf” download>Download the file</a>

In this case, when a user clicks on “Download the file”, their browser will download the file located at “/path/to/file.pdf”.

The download attribute is used to suggest to the browser to download the file rather than display it. However, not all browsers support the download attribute, so in those cases, the file will be opened in the browser instead.

If you’re linking to an absolute URL, the process is the same. You just replace the relative path with the full URL.

Link to Image

If you want an image to be displayed in a larger size when clicked, you will typically use a JavaScript library or CSS technique known as a lightbox. When an image is clicked, it’s shown in a larger size, and the rest of the website is usually dimmed.

If you’re working with a WordPress site just download a plugging, here is a list that can be helpful.

After downloading the plugin just add the image to the page, change the link settings to ‘media file’ and it will work.

Link to Email Address

You can create a hyperlink on your webpage that will direct users to send an email by using a “mailto” link. This type of link, when clicked, will open the user’s default email client with a new message addressed to the specified email.

Here’s the basic HTML code you would use:

<a href=”mailto:example@example.com”>Send me an email</a>

In the example above, replace “example@example.com” with the email address you want to use. The text “Send me an email” is what users will actually see and click on your webpage.

You can also pre-fill the subject line
<a href=”mailto:example@example.com?subject=Website%20Inquiry”>Contact Us</a>

You can change “Website Inquiry” to whatever subject line you’d like. Also, keep in mind that spaces must be replaced with “%20”.

By pre-filling the subject line of an email link, you can improve the user experience as well as the sending rate

Link to Phone Number

To create a link that will dial a phone number when clicked, you can use the “tel:” scheme in a hyperlink, similar to how you would use “mailto:” for an email link.

Here’s an example:

<a href=”tel:+1234567890″>Call us at +972 (432) 640-898</a>

In the example above, replace “+1234567890” with the actual phone number you want to use. The text “Call us at +972 (432) 640-898” is what users will see and click on your webpage. When a user clicks the link, their device will attempt to start a phone call to the specified number.

Please note that the “tel:” scheme only works on devices that are capable of making phone calls. On other devices, the link may not function as intended or do nothing at all.

It’s also recommended to use the international dialing format (including the plus sign and country code) to ensure the link works properly for users in different countries.

Link to Whatsapp

To send a message via WhatsApp from a webpage, create a URL with the following format: https://wa.me/, followed by the full phone number in international format.

Here’s an example:

<a href=”https://wa.me/1234567890″>Send me a WhatsApp message</a>

To pre-fill the text that will appear in the WhatsApp message, just add ?text=urlencodedtext to the end of the URL. Here’s an example:

<a href=”https://wa.me/1234567890?text=About%20The%XXXX%Product”>Send me a WhatsApp message</a>

What Is the Difference Between a Hyperlink Anchor and A Link Anchor?

All “anchor links” are technically “hyperlinks”, but not all “hyperlinks” are “anchor links”. The main difference lies in the destination of the link – whether it’s within the same page (anchor link) or to another page (hyperlink).

HTML Anchor Links: Improve Your Site’s User Experience