In this tutorial, I will try as much as possible to discuss all you need to know about HTML links. I will be covering various types of links and how to create them with relevant examples.
What Is A link?
Literally the word link means connection between places, persons, events or things. So also does it have similar meaning in web development but this time its a connection between documents, images, files etc. Link is abbreviation of hyperlink. According to Wikipedia, hyperlink is a reference to data that the reader can directly follow either by clicking or by hovering. A hyperlink points to a whole document or to a specific element within a document. Links are found in nearly all web pages, links allows users to click their way from page to page. A link is not necessarily have to be a text link, there are other types of links which include and is not limited to the following: image links, music links, video link, link to an email (mailto). There are difference types of links which I will cover shortly.
How Do I Create Links
Getting bored about the links theory above? same here to. So how do I create links. HTML links are created using the <a> tag. See the syntax below:

<a href="location">Text</a>

The <a> indicate the beginning of the link while the </a> denotes the end of the links. The text in between the opening and closing tags (<a></a> is what the user will see and be able to click on. The href, which means hypertext reference is used to point to the location where you want the users to go if they click on the link. Below is a more practical example of the link which takes the users to our homepage (www.tutorialslodge.com) when clicked.

<a href="http://www.tutorialslodge.com">Tutorials Lodge</a>

Noticed the “http://” in the URL above? will cover that in the next section. You might have as well noticed while browsing some websites, that when you click some links, its opens a new tab in your browser, some opens in the current tab you are in, others opens in an entirely new browser’s window. Let me quickly explain why there are such difference. There is something called link target and link targets are listed below with their explanation.
_blank: This opens the page in a new tab on the browser’s window.
_self: This opens the page in the current browser window. This is the default.
parent: This opens the page in a parent frame.
_top: This opens the page in the full body of the browser’s window.
Let see our these targets are being used.

<a href="http://www.google.com" target="_parent">Home</a>
<a href="#" target="_self">Web Development</a>
<a href="#" target="_blank">Programming</a>
<a href="http://www.google.com" target="_top">Networking</a>

We have so far created text links, let see how to create an image link. The syntax is quite similar, just that the <img> makes it different. See below:
<a href="#"><img src="image.jpg" alt="alternate text" /></a>
As you can see from above, I only embed the <img> tag within the <a> tag. The “#” is just a placeholder which you should substitute with your actual location.
Internal Links
Internal links can be of two types: linking to a local page which is within the entire website and linking to a section within a particular page. Relative urls are used in the local links. Let see an example

<a href="about-us.html">About Us</a>

The link above will take the user to the about us page of the website. about-us.html is called a relative link.
To make a link go to a particular section of a webpage, you will have to take note of the id name if that particular section. An example will make it more clearer.

<a href="#main-content">Skip to main content</a>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
<div id="main-content">
some random text some random text some random text some random text some random text some random text
</div>

Once the link is clicked, the user will be taken to down to the #main-content div (section).
External Links
Like I say above, there are relative urls and also there are absolute urls. To link to an external website, say www.google.com. You will have to pass the absolute path to the href.

<a href=http://www.google.com>Google</a>

I said would explain what “http://” does earlier. It somehow indicates you are pointing to an external website. If you leave out the “http://” from the url, it will be processed as if it was an internal link. Say for example, your main website url is www.sitename.com and you left out the “http://” fro the external link, when you check where the link is pointing to, you will see something like “www.sitename.com/www.google.com”. So it is very important to include the “http://” in the url of an external link.
Conclusion
I hope you find this tutorial helpful. In my next post, I will be talking on styling your links with CSS. So do subscribe to this blog so as not to miss out. You can drop your comments and questions in the below.
source: http://tutorialslodge.com/all-you-need-to-know-about-html-links/