Links are essential in your website as they allow us to surf the world wide web. As we discussed in the beginner’s guide, Hypertext in HTML allows us to add links to our website. In this blog, we will cover how to add links to other websites, links to other pages on our website and links that make it easier for people to contact us.
Links are added using the a tag that has a href attribute that allows us to add links. The content between the tags is what the user will see.
<a href=”linkedsite.com”>What your user sees</a>
Ensure the text your user sees describes the website you are linking to instead of “click here”. For example,
<a href=”https://www.wikipedia.com”>Visit Wikipedia to learn more</a>
To add a link that opens in a new tab, we add a target attribute that has a “_blank” value. For example,
<a href=”https://www.wikipedia.com” target=“_blank”>Visit Wikipedia to learn more</a>
To prevent the new tab, from redirecting your website to malware or phishing sites use rel="noopener noreferrer"
<a href=”https://www.wikipedia.com” target=“_blank” rel="noopener noreferrer">Visit Wikipedia to learn more</a>
You can also add a rel attribute to specify whether it is an external or internal link. For example,
<a href=”https://www.wikipedia.com” target=“_blank” rel="noopener noreferrer" rel=”external”>Visit Wikipedia to learn more</a>
Outbound Links
Outbound links are links that send your visitors to a different website. The value of the href attribute should be the absolute URL which includes the website domain. For example,
<a href=”https://www.wikipedia.com” rel=”external”>Visit Wikipedia for more information</a>
Inbound Links
Inbound Links allow us to link to different pages on our website. The value of the href attribute should be the relative URL which doesn’t include the website domain.
The relative URL is dependent on where the page is in the directory. Every page and media file in your website has a URL(Uniform Resource Locator) which is the domain name and the path to the specified page or media file.
Let’s dive into the website structure to find out the best practices for linking our pages.
Directory Structure
The root directory is the folder that contains all our files and folders. The index.html file is the only file that MUST be included in the root directory as it is the first file a browser looks for. It is the website’s homepage and the fallback file when the page that is being accessed does not exist.
Every folder in the root directory can have an index.html which is the homepage of that section in the website.
Creating a Relative URL
A relative URL is a shorthand way of telling the browser where to find your files in relation to the current page as it doesn’t include the website domain.
If all your files are in the root directory, your relative URL is simply the file name. For example,
<a href=”index.html”>Home</a>
If your current page is in the root directory, you can access a page in a folder by using a forward slash(/). For example,
<a href=”/pages/about.html”>About</a>
If your current page is in a folder, you can access a page in the root directory by using two periods and a forward slash (../). For example,
<a href=”../index.html”>Home</a>
These are just the basic relative URLs that can get you started.
Linking to sections
In your website, you might want to create links to different sections of the page especially in landing pages and one-page websites. You can accomplish this easily by adding an id attribute whose value is unique for every section.
To add the link, the href value should be a hash symbol followed by the value of the id attribute for the section you would like to link to. For example,
<section id=”pricing”></section>
<a href=”#pricing”></a>
You can also add links to a section on a different page. For example,
<a href=”/pages/about.html#pricing”></a>
Contact Links
Contact links help our users contact us easily as they can click on them and their default platforms are opened and they can take action immediately. This is faster than copying and pasting. In the blog where we covered texts in HTML, we talked about the address tag where we add our contact information. We will add contact links to an address tag.
To add a link that opens the visitor’s default email program, the value of the href attribute is “mailto:” and the email you would like your visitors to send the email to. For example,
<a href=”mailto:mitch@gmail.com”>Email me</a>
You can add a subject line and a body of your choice. For example,
<a href="mailto:mitch@gmail.com?subject=Enquiry+for+service?body=I+would+like+to+enquire+about+social+media+management" > Email me</a>
Phone Number
To add a link that enters your phone number in their dial pad, the value of the href attribute is “tel:+” followed by the phone number. For example,
<a href=”tel:+1-444-999-777”>Call us today</a>
Example
<address>
<a href=”mailto:mitch@gmail.com”>Email me</a>
<a href=”tel:+1-444-999-777”>Call us today</a>
</address>
Recipe Page
We created a recipe page when we learned about lists and we will add links to the page to illustrate the tags we’ve learned.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mandazi Recipe</title>
</head>
<body>
<h1>How to make soft and fluffy <i>mandazis</i></h1>
<a href="http://www.allrecipes.com" target="_blank" rel="noopener noreferrer" rel=”external”>Mandazi Reference</a>
<h2>Navigation</h2>
<ul>
<li> <a href="#description">Description</a></li>
<li> <a href="#ingredients">Ingredients</a></li>
<li><a href="#instructions">Instructions</a></li>
</ul>
<h2 id="description">Description</h2>
<p><i>Mandazis</i> are small African pastries that are a great <b>breakfast</b> alternative to bread</p>
<h2 id="ingredients">Ingredients</h2>
<ul>
<li>2 cups of Self-raising flour </li>
<li>1 Large egg</li>
<li>1/2 cup of milk</li>
<li>4 tablespoons of sugar</li>
<li>Oil for frying</li>
</ul>
<h2 id="instructions">Instructions</h2>
<ol>
<li>Gather all the ingredients and mix to form a dough. Knead the dough till it's firm</li>
<li>Let the dough rest for at least an hour</li>
<li>Roll out your dough and cut into pieces based on your desired size. Ensure your pieces are not too thin</li>
<li>Add oil to a frying pan and preheat it</li>
<li>Once your oil is hot, add your pieces and fry till golden brown on both sides.</li>
<li>Let them cool down till warm then serve with a cup of tea</li>
</ol>
<address>
<a href="mailto:bestchef@gmail.com">Email Me</a>
<a href="tel:+1-666-789-234">Call Me</a>
</address>
</body>
</html>
Congratulations you’re doing great. I know the contents of this lesson were a little bit technical but keep practicing and it will get much easier.
Your Task
Create a website using what you’ve learned so far. Use as many tags as you can