The word “Link” usually defines a connection between person, place, events, or things. In the web world, there are many links available. These links make your web surfing easy from one page to another. HTML links are the clickable source that makes the navigation process comfortable. Here, I am going to cover different kinds of HTML links and their creating process with examples.
What is an HTML Link?
The link is an abbreviation of the hyperlink. A hyperlink usually used on a web page to make a comfortable path for related documents, files, and images. According to the definition of Wikipedia,
“The hyperlink is a reference to data that the reader can directly follow either by clicking or by hovering.”-Wikipedia
A hyperlink usually used to point the path of a document or to the specific elements of a document. Every web page consists of at least one or several links to make a natural navigation process.
A web page can consist of different types of links. It could be a normal link, music link, image link, video links, link to an email address and so on. The content of links could be different, but the primary link building process is the same.
How to create a link:
Creating a link is so simple and easy. Here, we are going to show you how to create a link. HTML links are using <a> tag that converts a piece of text into a hyperlink. HTML link tags are looks like the syntax below:
The <a> tags are the starting point of an HTML hyperlink and it is end with closing tag </a>. Between these opening and closing tags (<a> </a>) a text and images are consists. When a user clicks on the link, they are opening a different page or source. The meaning of hrefs is “hypertext reference”. It is pointing to a new location or new page, where you want to send your website visitors. See the practical example of Hyperlink from below:
If we focus on the example, we can notice that a link to the website is available there. When you are placing this code on an HTML document, the text “Varyhelp.com” is turning into a hyperlink. So, when a user clicks on the link, they are requesting the browser to go to our website’s homepage. When the browser loads the page, look at the URL field of the browser. You will notice that our homepage address is in the URL field.
When we are clicking on a link, you may notice that some links are open in a new tab. Some of them are open in the same tab, and others are open in a new browser’s window.
So, why it occurs? The main reason is the link target attribute. Here we are going to explain the link target attributes.
The Popular link targets are:
- _blank: The _blank link target opens a page in a new tab on the same browser’s window.
- _self: The _self link target opens a page in the current browser window. And, it is a default attribute. That means, whether you use it or not, a link always opens in the same browser.
- _parent: This link target opens the page in a parent frame.
- _top: This link target opens the page in the full body of the browser’s window.
Let’s see how we can define the HTML Link target:
- <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>
As the text link, we can also create the image link. The whole process is quite similar, but here we placing the img tag instead of a regular text. See the example below for more clear idea:
<a href="#"><img src="image.jpg" alt="alternate text" /></a>
Here I only placing the image tag instead of the hypertext reference tag. The “#” can replace with your actual location.
From the definition of web development, HTML tags are usually two types. These are:
- External link
- Internal link
In a simple word, the External link is the link that points to a different website address or domain. But, internal links are points from one page to another in the same domain.
1. External Links:
External links are usually pointing to a different website or domain. These types of links have two variations:
- Dofollow links: Dofollow links are a direct link from one page to another. Search engine robots are following these links and boost the rank signals. These links are valuable for a website and indicate the authority and trust of a website.
- Nofollow links: These types of links are pointing by rel=”nofollow” attribute. It is not followed by the search engine robots and search engines don’t pass any rank signal for it.
2. Internal Links:
Like External links internal links also defined by two types. Linking to a different local page and linking to the different sections of a page. Usually, a related URL is using on a local page, like the example below:
<a href="about-us.html">About Us</a>
To link a particular HTML section of a page, we are using <div> tag to pointing the section. Here is the example an HTML section link:
<a href="#main-content">Skip to main content</a> <div id="main-content"> Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </div>
When a user clicks on this link, they are scrolling through the section where the <div> is locating on a page.
I hope that I cover all the necessary points of an HTML link and it gives you a complete overview of the HTML link. In my next tutorial, I will show you how to style a hyperlink using CSS. No more today. Stay tuned for new updates.