How to insert hyperlinks in in web page using HTML?

Hyperlinks in HTML

You may come across a condition while writing your HTML code to link your page, link a word, link a photo or link a sentence. This type of linking can be provided in your code by using hyperlinks. A web page can contain various links that take you directly to other concerned pages and even specific parts of a given page. These links are known as hyperlinks.

Hyperlinks allow visitors to navigate between websites by clicking on words, phrases, and images. Thus you can create hyperlinks using text or images available on a web page so that visitor can easily navigate while surfing over internet.

Linking Documents

A link is specified in your web page using HTML tag <a>. This tag is called as anchor tag and anything between the opening <a> tag and the closing </a> tag becomes a part of the link and a user can click that part to reach to the linked document. The general syntax is shown below.

<a href = "Any URL" attributes of anchor tag>Text to link</a> 

Let us take a simple example of this simple tag.

<!DOCTYPE html>
<html>
<head>
      <title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.programmingtutorial.in" target = "_blank">Programming tutorial</a>
</body>
</html>

The moment you click on Programming Tutorial, you will be taken to the linked website. One more thing should be noted that a word “target=_blank” is used. What does it mean? It simply opens your clicked link in a new tab. Let us learn more about target attributes.

The target Attribute in HTML

We have used target attribute in our above example. This attribute is used to specify the location where linked document is opened. There are following options which are used to open clicked link at specified location.

S. No.OptionsDescription
1_blankOpens the linked document in a new window or tab.
2_selfOpens the linked document in the same frame.
3_parentOpens the linked document in the parent frame.
4_topOpens the linked document in the full body of the window.
5targetframeOpens the linked document in a named targetframe.

Try following example to understand basic difference in few options given for target attribute.

<!DOCTYPE html>
<html>
<head>
      <title>Hyperlink Example</title>
      <base href = "https://www.programmingtutorial.in/">
 </head>
 <body>
      <p>Click any of the following links</p>
      <a href =” www.programmingtutorial.in" target = "_blank">Opens in new tab</a><br> 
      <a href =” www.programmingtutorial.in" target = "_self">Opens in self tab</a><br> 
      <a href = " www.programmingtutorial.in"" target = "_parent">Opens in Parent</a><br>
      <a href =” www.programmingtutorial.in" target = "_top">Opens in Body</a>
</body>
</html> 

It results as:

Now, just copy above code and paste it in notepad or any other text editor. Then right click on this file and select open with chrome browser. When you open this code with any browser you will get above links. Click every link one by one and find the difference among all the target attributes.

Using Base Path in HTML

When you link HTML documents related to the same website, it is not required to give a complete URL for every link. You can use <base> tag in your HTML document header. This tag is used to give a base path for all the links. So your browser will concatenate given relative path to this base path and will make a complete URL.

For example if we write above code after modifying it then the same result will be obtained as obtained above.

<!DOCTYPE html>
<html>
<head>
      <title>Hyperlink Example</title>
      <base href = "https://www.programmingtutorial.in/">
 </head>
 <body>
      <p>Click any of the following links</p>
      <a href =” abc" target = "_blank">Opens in new tab</a><br> 
      <a href =” xyz" target = "_self">Opens in self tab</a><br> 
      <a href=""" target = "_parent">Opens in Parent</a><br>
      <a href =" 123" target = "_top">Opens in Body</a>
</body>
</html>

In above code, we have used different href like abc, xyz, blank, 123 but even then above links will work in the same way as it worked in the previous code. Copy above code in notepad and run to find the difference.

Creating Download Links in HTML

You can create text link to make your PDF, or DOC or ZIP files downloadable. This is very simple; you just need to give complete URL of the downloadable file as follows :

<!DOCTYPE html>
<html>
<head>
      <title>Hyperlink Example</title>
</head>
<body>
<a href = "write complete URL of downloadable file">Click to download</a>
</body>
</html>

Making File Download Dialog Box

While writing your HTML code it is sometime desired that you want to give an option where a user will click a link and it will pop up as a “File Download box” to the user instead of displaying actual content. This can be easily achieved by file download dialog box. This is very easy and can be achieved using an HTTP header in your HTTP response.