Creating links to web pages in your HTML file is also very important. Links help you make references. It even helps in Search Engine Optimisation (SEO).
To help the user navigate your web page perfectly or even view other web pages that has references to you article you need links. In this section we will cover
- What are links
- How are HTML links defined
- What are inbound links
- What are outbound links
- How to open links in different window
- What are links:
Like I said in the introduction, links create avenue for easy navigation on the website. When you are reading through web pages, you may notice some text in different colors apart from the default color used on the web page.
Most of such text are links that help describe further what the author is talking about in the current article. An entire website url is pasted and the developer links it to the appropriate page to help the user get more details.
- How are HTML links defined
HTML links are defined with the ‘a’ tag (<a>), which are called anchors. And we use the href attribute to tell the browser where the link will take us.
For example let’s link to another page here in TechForest Academy or I can even take you out of this website to our page in Facebook.
Enter the a tag (<a>) with the href attribute
<a href =
The a – anchor informs the browser that this is a link and the href attribute directs the browser to the page where the reference is made.
To see how a complete link looks like check out the next item “what are inbound links?”
- What are inbound or internal links
Inbound or internal links are when you link pages, images, etc within the website. For instance if I want to link another page within the academy category here in TechForest.
Internal link helps users stay within your website for a longer time and this helps rank your website. The larger the number of users in your website the greater the ranking.
- What are outbound or external link
The link to the website we want to open is not part of our project – these are called external links or outbound links, so we will enter the complete path to the website. Which means that has to start with http and colon or https if the site has an SSL.
Personally I type in the website address on my browser then copy the address and paste in href attribute then close the tag.
Now in-between the ‘a’ tag and it’s closing tag, you place the text that will direct users to click the link
<a href=”https://www.facebook.com/techforestng”>Link to TechForest</a>
Go to your web page and click the link. If you have internet, it will take you to TechForest Facebook page else it will show you an error in connection. So congratulations, you have inserted your link.
- How to open link in different window
It is not a good practice to take your users out of your website by replacing your current web page with an external webpage. That is because the user might not have finished using the page but decided to check on a reference you made to another site.
The solution to this is to open the link in a new tab on your browser. This also means that when a user is browsing your website and happens to click on your link, he will not be taken out of your site but will open your link in another tab and then can visit the targeted site whenever he is done using your web page.
To do this, we use the ‘target’ attribute. Then choose the blank option from the options displayed by VSCode (if it drops down). If the options do not appear automatically just enter _blank in between the quotation.
<a href=”https://www.techforest.ng” target=”_blank”>Link to TechForest</a>
Test again. Click on the link in your browser. Yes. What you see there is TechForest Facebook page not Twitter that pops up in a new tab. Perfect! Congratulations. Now you can go back to your web page.
- Remember you can also link to any document inside our current project.
Now you know how to make internal links and external links on your web pages. Congratulations! You made it to the end of the introductory html section. Links are very important as they form part of Search Engine Optimisation (SEO) of your website. It is recommended that to fully optimized your web page, you need at least one internal link and one external link.
This section was designed to get you familiar with html. Now you know the basic structure of the web page. We did headings, paragraph, images and links.
If you could not install VSCode or you have a problem in any part of this introductory part, please don’t hesitate to contact me here or privately.
Once again congratulations for choosing this path. I promise you will never regret it.
