Welcome to Silicon Overdrive!

Linkedin Youtube

Welcome to Silicon Overdrive!

HTML Series: How to Create Links in HTML

Overview

In previous topics, we introduced you to the HTML language, talked about tags and how to use them when creating your first HTML page. For our latest post in our HTML Series, we’re going to show you how to create links to allow users to navigate between pages (or to external pages and websites) on your new HTML website.

Why Should You Create Links for Your Website

These days, a website doesn’t just have one page where people can view information. A website consists of various web pages which you can navigate between via links.

Internal Links

Internal links are links that navigate to pages (or documents like PDFs) on your website.

These links are useful when mentioning another article you have written, like this post about how to work from home. It can also be used when referring to the products and services you offer.

Websites like Wikipedia are a great example of websites that mostly make use of internal linking. When searching Google, you’ll most likely find Wikipedia at the top, and that’s because the site contains information on almost anything, and we mean anything.

Below is a graph from Ubersuggest showing us that Wikipedia ranks in position one to three for 43.9 million keywords. This is all done with their internal linking strategy.

Ubersuggest graph about Wikipedia keywords

External Links

External links (also called outbound links) are links that navigate to another web page or document like PDFs, etc.

These links are typically used when linking to other sites, documents, etc. like this for example.

In HTML, there are various link types like:

How to Create Links in HTML

After learning about links and why they matter, now it’s time to learn how to start adding links (also known as hyperlinks) to your website. Luckily, it’s a simple piece of code.

Below is the basic structure for a simple HTML link:

< a href = “url”> Link text < /a>

Example:

Contact us

Basic Link Attributes

Basic Link Attributes

href

The href attribute defines the link address or URL.

Example:

<a href=“https://www.overdrive.co.za/contact”>Contact us</a>

https://www.overdrive.co.za/contact is the link address or URL.

Target

The target attribute defines where the link must be opened, aka in a new tab, in the same tab, etc.

_blank

What it does
Opens the link in a new tab. This is great to use when adding links to external sites or documents.

Why use _blank?
With _blank target, users can click on the link and the document, page, etc. will open in a new tab and won’t let them leave your website.

HTML Structure

<a href=“https://www.example.com” target=“_blank”>Click here </a>

It works like this.

_self

What it does
Opens the link in the same window. This is the default setting.

Why use _self?
This doesn’t need to be added as it’s the default setting unless the base element specifies otherwise; then “_self” can be used to override the base element.

HTML Structure

<a href=“https://www.example.com” target=“_self”>Click here </a>

It works like this.

_parent

What it does
Opens the link in the parent frameset.

Why use _parent?
This ensures the content stays within the current frame when clicked.

HTML Structure

<a href=“https://www.example.com” target=“_parent”>Click here </a>

_top

What it does
Opens the content in the top-level frameset.

Why use _top?
If your page has a few nested levels/framesets, this target ensures the content loads in the top frameset.

HTML Structure

<a href=“https://www.example.com” target=“_top”>Click here </a>

See the targets mentioned above in action:

HTML Link Types

HTML Link Types

How to Create an Image Link

If you want to make an image clickable, then add an image link. Simply place the image code within the tags.

Example:

 

< img src=”img.jpg” alt=”This is an image” height=”100px” width=”100px” > 

 

Click on the images below:

How to Create an Anchor Tag AKA Jump Link

When you want to add links that jump to sections on the same page (especially if it’s a long post or page), it can be helpful for users to be able to jump to certain sections. This is where you add an anchor tag.

Example:

<a href=”#section2”>Section 2</a>

 

<h2> Section 1</h2>

<p>This is a paragraph</p>

 

<a id=”section2”><h2> Section 2</h2></a>

<p>This is a paragraph</p>

When clicking on the Section 2 link above, it will jump to the “Section 2” heading.

How to create a Button Link

If you want the link to look like a button, use the < button > tags.

Example:

<button onclick=”window.location.href=’example.com’;”> Click here </button>

 

How to Create a Mailto Link

A mailto link opens the default mail client on a user’s pc once clicked on, allowing the user to send an email without manually navigating to their email, adding your email, and then drafting their message.

Example:

<a href=”mailto:name@email.com”>Text</a>

How to add a subject

<a href=“mailto:name@email.com?subject=The%subject%line“>Text </a>

See how it works.

How to Create a Tel or Telephone Number Link

A tel link is useful when users are viewing your website or web page on their phone. Using a tel link will open their call log, the number specified in the link will automatically be added, and the user can simply press the call button.

Example:

<a href=”tel:+27214485759”>Call us</a>

See how it works.

Country Code
When creating telephone links, remember to add the country code you use in your country.

For example, South Africa uses “+27” in place of the 0.

Find your code here.

How to Check for Broken Links

Ensuring your site doesn’t contain broken links is great for both user experience and SEO. If a user clicks on a link and nothing happens or they receive a 404 error page, they will most likely leave your site.

Here are a few ways to check for broken links:

Now that we’ve learned all about HTML, what tags are, how to create your first HTML page, and now how to add links, next we’ll teach you how to create special characters!

Bookmark our Blog or like and follow our Facebook and LinkedIn page to continue learning with us.

If you liked this, you'll love these...

An Introduction to HTML
Software Development

An Introduction to HTML

What is HTML? What does it stand for? What’s a tag? What’s an attribute? Let’s take a look at all this in the HTML Series: An Introduction to HTML.

April 24, 2020

Trend Micro Cloud Conformity

Trend Micro Cloud OneConformity Awarded both AWS Cloud Management Tools Competency and Security Partner Competency, Cloud Conformity’s security and governance platform delivers continuous assurance that your infrastructure is compliant, secure, and optimized. You can pull instant compliance reports for major,

June 15, 2020
Trend Micro Deep Security
Security

Trend Micro Workload Security

Trend Micro Workload Security Trend Micro Workload Security is a comprehensive security and cloud protection suite that scales seamlessly and helps you maintain continuous compliance. Workload Security protects your AWS workloads against threats, malware and vulnerabilities with IPS/IDS, application control,

June 10, 2020

We use cookies to track visitors, measure ads, ad campaign effectiveness and analyze site traffic. We may also share information about your use of our site with 3rd parties. For more info, see, our Cookies Policy, our Privacy Notice. By clicking “Accept All” you agree to the storing of all cookies on your device. In case you don’t choose one of these options and use our website, we will treat it as if you have accepted all cookies.

Accept All

We use cookies to track visitors, measure ads, ad campaign effectiveness and analyze site traffic. We may also share information about your use of our site with 3rd parties. For more info, see, our Cookies Policy, our Privacy Notice. By clicking “Accept All” you agree to the storing of all cookies on your device. In case you don’t choose one of these options and use our website, we will treat it as if you have accepted all cookies.

Accept All