How to Create a Hyperlink in HTML

The world wide web is a collection of interconnected web pages that are accessible through the internet. But have you wondered how are these web pages interconnected with each other?

This happens because of the presence of hyperlinks in HTML. Hyperlinks are a set of anchor tags that are used to point to another HTML file, text, audio, video, webpage, etc. Basically, a hyperlink is what makes a web.

Let's take an example of a popular webpage Wikipedia. As soon as we click on some of the hyperlinks present in the Wikipedia webpage, it redirects us to another specified webpage.

Hyperlinks allow us to link the documents to other documents as well as a link to specific parts of a document. Almost any content on the web can be converted to a link that when clicked goes to another webpage.

Syntax

The anchor tag <a>..</a> is used to define a hyperlink in HTML. The syntax to specify the links in HTML is as follows -

The href attribute is the most important attribute of the anchor tag as it contains the link to the destination.

The Text in the syntax is the text that is visible to the user as a link that when clicked takes the user to the destination webpage.

Example Code to Insert a Hyperlink in an HTML Page

As we have seen above the syntax for creating a hyperlink in HTML. Now we will be discussing an example code for the same.

Output

Clicking on the text "Go to Google.com" takes us to Google’s home page which is linked in the href attribute inside the anchor tags.

HTML Links - The Target Attribute

The target attribute in HTML is used to tell the browser where to open the linked document when the link is clicked. However, by default, the linked documents open up in the current browser window but if you want to open it in another browser window or somewhere else then you need to specify the target attribute.

The target attribute has four main values that are specified as follows

Therefore, by using the target attribute inside the anchor tag, we can open the linked document in different browser windows as per our needs.

Absolute URLs vs. Relative URLs

There are two types of URLs that you will hear about while using the web. The two types are listed below -

• Absolute URL - It is used to specify the full web address of the destination website in the href attribute. The full address contains the full path of the website along with the protocol and the domain address of the website.

  Let's say we have to open the index.html page in the site directory which has a domain name of example.com. Therefore, the absolute URL for the webpage would be https://www.example.com/site/index.html where HTTPS is the protocol for the website.

  Let's take an example of an absolute url in HTML.

  Output Therefore, as you can see we have given the full URL to the href attribute.

• Relative URL - It is used to specify a local link in HTML that is relative to the page that we are in. For example, we have an image in the site directory and we are already working in the site folder. Then, we just need to specify the name of the image say, "apple.jpg" in the href attribute because this image file is relative to the directory we are currently in.

  Let us understand the relative url with the help of the code.

  Output

  

  Therefore, in the relative url, we are not required to write the "https://www" part of the website.

More Examples

Use an Image as a Link

To use an image as a link in HTML, we will use the img tag inside the anchor tag in HTML. We will specify the address to the destination in the href attribute whereas the link the image in the src attribute of the img tag.

Let us see the code to use an image as a link in HTML.

Output

Therefore, clicking on google's logo image in the above example would take us to google's home page.

Link to an Email Address

We will use mailto: inside the href to link an email address to a link in HTML.

However, clicking on the linked text opens the user's email program to let him send an email.

Let us see the code to use an email address as a link in HTML.

Output

Button as a Link

To use a button as a link, we have added some javascript in HTML. Javascript allows you to specify what things happen during certain events and one such event is the onclick event.

It is used inside the button tag and its value is specified to the location of the destination. Therefore, as soon as the user clicks on the button, it will take it to the location that is specified in the onclick event.

Let us see the code to use a button as a link in HTML.

Output

Link Titles

The title attribute is used to show some extra information about the text. This extra information is often shown as a tooltip when the user hovers the mouse over the text.

Let us see the code the creating a link title in HTML.

Output

Creating a Navigation Menu

The navigation menu is a set of multiple webpages. These individual web pages are linked using the anchor tags.

Let us see the code for creating a navigation menu in HTML.

Output

Creating Bookmark Anchors

Bookmarks are marking the content that you are actually reading for your future reference. These bookmarks are really helpful if the website is long.

To create a bookmark, we first create a bookmark by adding an id to a section and then linking that id to the anchor tags so that clicking on the link will take the user to the specific section.

Let us see the code for creating bookmark anchors in HTML.

Output

And as soon as you click on the link “Go to Section 4”, you will be redirected to section 4 of the page.

Creating Download Links

If you want to download a resource instead of opening it in a browser window then you should use the download attribute inside the anchor tags. The value of this download attribute can be a default save filename.

However, the link to the resource to be downloaded must be present in the href attribute of the anchor tag.

Let us see the code for creating a downloadable link using the anchor tag in HTML.

Output

In the above example, we are downloading the latest version of firefox for windows. Clicking on the link will start downloading the exe file for the same.

Best Practices

• We should use the correct link wordings so that the purpose of the link is clear enough to make the user understand where it would take us to.
• Do not use URLs as a part of your text as they look ugly.
• Keep your link text as short as possible.

For more information about the best practices to use a hyperlink in HTML, you can visit Link best practices.

Learn More

To learn more about links, you can visit the article HTML Links.