How to Create Hyperlink in HTML

How to Create Hyperlink in HTML
Like Tweet Pin it Share Share Email

Your present journey of gaining knowledge from this article is on the World Wide Web. You have probably clicked on a hyperlink to reach here and are using a web browser to see this page. You could have completed a journey from across the world or would have reached home from just down the streets. This is the magic and awesomeness of the World Wide Web. You can access it from anywhere, anytime, and for anything with an instant click.

You can find millions and millions of web pages online that are written in HTML and also have a web address. Even if you visit after a few years it should be ideally in the same place.

HTML documents that are accessed from web browsers like Firefox, Google Chrome, etc. are created using HTML tags. All these pages will look boring and dull without formatted text. The beauty of the creation is that they are always hidden when you see the final output. Hence, you always come across an easy to read and clean page.

Understanding Hyperlinks

This short read is about how to hyperlink in HTML. To frame it in simple words, they can be called as clickable links which enable you to go from one web page to another. You can also switch between different sections of the same web page or download files and documents with its help. Summing up its operations and entire scenario they are an integral part of the World Wide Web.

You will easily find at least one hyperlink when you look at any web page. Hovering over it will change the mouse cursor into a hand symbol. In technical terms, this is called as a telltale sign. It can include a group of words or a single word which is often underlined and in blue color.

To style or remove the underline from the link or change the color the Cascading Style Sheets (CSS) can be used.

For Example
Creative Design Blog
The tags used to create the above link are

<a href=””>Creative Design Blog</a>

Such links will never be directly visible on any page or post. Anchor tag i.e. & is the HTML tag used to create hyperlinks. But they do not do everything by themselves. Information about where exactly you intend the link to go should be added. Let’s decode it.

A denotes Anchor
The beginning conveys the information that it should be linked to another page.
HREF means Hypertext Reference and it means that a URL is being linked to it.
The URL or the web address stands surrounded by quotation marks. It also has an equal sign along with it

Image Links

The learning of how to hyperlink in HTML begins with Image Links. It is the simplest operation where you have to surround an image tag with anchor tags. This is similar to how to you surround it with texts.

Relative and Absolute Links

When you want to refer a document in the web address there are two ways of doing it. You can use relative or absolute links to guide the browser about where you want the link to go. This makes both these links an integral segment of how to hyperlink in HTML.

Absolute Link

When you include an absolute address that contains an entire URL then is termed as an absolute link. It indirectly defines or specifies a particular location of a page on the internet. You have to use it mandatorily when linking a page on another site. There are three segments viz. 1. The Protocol: HTTP 2. Host Name and 3. The exact path of the file.

Relative Link

When you include the path from the current file to the linked file then it is categorized under relative link. When you use this, it means that the browser is well-aware of the location of a particular document. When linking with a specific document of the same directory you do not need to write the full URL. The only thing that is necessary will be the correct file name. When the web pages are complex and at different levels on the same website then such links are tricky.

Let us understand how to hyperlink in HTML for relative link with examples.

• First, let us consider a relative link from one web page hiperlink1.html) to another (hyperlink2.html) that are at the same level on a website.

<a href=“hyperlink1.html”>A page about hyperlinks1</a>

• Lets us now consider a little tricky example where we go down to a level into the folder.
Consider that we are putting a page (puppy-food.html) inside a special folder (puppy) on the site which is now in the subdirectory. When we want to link puppy-food.html from dogs.html we mandatorily need to include the name of the subdirectory (puppy). This should be followed by a “/” ahead of the file name.

<a href=”puppy/puppy-food.html”>Puppy Food</a>

• Here is another tricky example where we raise a level up a level and go out of the folder for linking.
Let’s say we want to link “puppy-food.html” to “dogs.html” which is in a folder/directory. In such cases, we need to add “../” ahead of it. You must add two periods and a forward slash each time you want to move up a level in the folder hierarchy.

<a href=”../dogs.html”>Dogs</a>

Inbound and Outbound Links

This is another important segment in the learning of how to hyperlink in HTML.

Inbound Link

Incoming hyperlinks to a website from other sites are known as inbound links. The popularity of your website is indicated based on the number of incoming links you have. Each linking is basically an indication of vote casting for your content. With reputable inbound links your page rank, credibility, and traffic will increase. The best and the easiest method to do is to work and create content that other webmasters would want to link to.

Outbound Link

When you create outgoing links on a website connecting it with another site then it is known as Outbound links. Usually, permission is not required in such interlinking cases. This is because you are not claiming ownership of the same.

In numerous ways, it can help drive traffic to your website. There are high possibilities that the site you linked with will reciprocate by linking something with your website. You will be perceived as someone having authority in a particular niche by search engines with relevant linking. Remember this is extremely sensitive and if you choose to go with random links you will face consequences. In such cases, you can be penalized and search engines will start perceiving your site as a link farm.

Broken Links

broken link
This is the last segment in the discussion of how to hyperlink in HTML. It is quite clearly known that search engines and visitors discover pages through linking and links. The overall webspace is contently evolving with sites either being moved or removed. Hence, in such scenarios, it is inevitable that every website contains broken outbound links. It must not be assumed that once you have linked anything particular with an external site it will be there forever. The best practice is to periodically check for broken links on your site.

The standard HTTP response code for indicating a missing page is Error 404 or not found. It is a definite possibility of a broken link when you come across such an output for the interlinked section.

All different sections related to this topic are covered aptly in this read. Before you try incorporating them or experiment with them, understanding with clarity is a must.