HTML Links & Hyperlinks <a href>

Links in their most basic form allow us to navigate from one site to another and within sites themselves.

They are one of the most important elements in HTML and are also very simple to use.

 

External Links

Used to link to other websites on the internet and otherwise called hyperlinks.

These links are created using an anchor tag in HTML.

You’ll need the URL of the website you want to link to, which you place in double quotations and you’ll need text that will be shown as the hyperlink, it’s as simple as that.

If you want to open the link in a new tab, you’ll want to add a target attribute as noted in bold, as well as a rel attribute which is for security purposes.

In the body of the HTML, this is what you need to do:


<!DOCTYPE html>
<html>
<head>
<!-- This is the stylesheet John created in 2020 -->
<link rel="stylesheet" href="/file/stylesheet.css">
</head>

<body>

<a href="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</a>

<a href="https://en.wikipedia.org/wiki/Main_Page" rel="noopener" target="_blank">Wikipedia In A New Tab</a>

</body>

</html>

Output:

Wikipedia

Wikipedia In A New Tab

 

Internal Links

Internal links refer to when you want to link to pages within your website, so on the same domain, which in our case would be linking to another page on beginnersguidetohtml.com

In the case of internal links, you can omit the domain name, as the browser can understand that it’s an internal link on the same domain.

An address that contains all the necessary information required to link to the page is called an absolute address.

These links start with https:// and then include the domain name, extension and page to be visited, or in other words the entire web page address.

Relative addresses on the other only use the information after the end of the domain extension.

If you include the domain name in an internal link, the link will still work, however best practice is to use relative links when internally linking.

Here’s an example:


<!DOCTYPE html>
<html>
<head>
<!-- This is the stylesheet John created in 2020 -->
<link rel="stylesheet" href="/file/stylesheet.css">
</head>

<body>

<a href="/html/">HTML Basics</a>

<a href="/html/common-mistakes/" rel="noopener" target="_blank">HTML Common Mistakes new tab</a>

</body>

</html>

Output:

HTML Basics

HTML Common Mistakes new tab

 

Anchor Links

Anchor links may also be referred to as in page links.

They allow you to place links within a page to help users navigate faster.

A great example is a table of contents that you see when you first load a web page.

The table of contents uses anchor links, that when you click take you down to the area of the page you want to read.

There are therefore 2 elements to an anchor link:

1. The Anchor: Where is the link going to get directed to

This is done by adding an ID attribute into a heading, paragraph or many other elements.

For example, on this page, we have a heading named External Links which looks like this:

<h2>External Links</h2>

So we added an ID attribute to it and it now looks like this:

<h2 id=”#external”>External Links</h2>

2. The Link: The link itself, which is very similar to the above

So let’s suppose we want to link from this area of the page back to the External Links section.

We use our same a href tag however we use the ID as the destination instead of a webpage:

<a href=“#external”>Go To External Links Section</a>

Try It: Go To External Links Section

 

Email Links

The last thing we’ll cover is email links.

Again, using the same a href tag and framework, you slightly tweak the link for email to instruct the browser and computer to open a new email instead of a new web page.

Email links work well when the user is using a desktop email client such as Outlook.

They are finnicky when the user is using a web based email service like Gmail.

Instead of placing the URL in the a href tag, you use mailto: along with the email address.

You can also prefill the subject line and even the body with text.

Here’s an example:


<!DOCTYPE html>
<html>
<head>
<!-- This is the stylesheet John created in 2020 -->
<link rel="stylesheet" href="/file/stylesheet.css">
</head>

<body>

<a href="mailto:hello@email.com">Email Me</a>

<a href="mailto:hello@email.com?subject=Nice To Meet You">Email Me With A Prefilled Subject Line</a>

</body>

</html>

Output:

Email Me

Email Me With A Prefilled Subject Line