HTML Link Tag

HTML link tag or hyperlink is a relation between one web page to another web page. Links are very useful during navigating from one page to the other web page.

Followings are the properties of the link.

An unvisited link is underlined and blue.
A visited link is underlined and purple.
An active link is underlined and red.

HTML Link Syntax

Links are created in HTML using <a> tag. Anything between opening <a> tag and closing </a> tag is a link and it is visible to the screen.

General Syntax Of Creating HTML Links

<a href="....">Link Text </a>

HTML link or hyperlink is a relation between one web page to another web page. Links are very useful during navigating from one page to another web page.

Creating HTML Link

Source Code

          <a href="https://www.google.com" target="_blank">Google Search</a>
<a href="https://sudhakarinfotech.com" target="_blank">sudhakarinfotech</a>

Try it now

Note: Here, URL denotes either absolute URL or relative URL. Absolute URL is the full path of the web page while is relative URL is the relative path of the web page. Please note that https://www.google.com and https://sudhakarinfotech.com is an absolute URL while about.php, contact.php is the relative path.

Target Attribute Of HTML Links

Target attributes the value of the HTML links to decide where to open the linked document. There are four values of the target attribute and every value of the target attribute starts with an underscore(_) character.

_blank - Opens the HTML-linked document in a new window or tab & changes the color of the linked element.

<a href="https://sudhakarinfotech.com" target="_blank">Result</a>

Source Code

          <a href="https://sudhakarinfotech.com" target="_blank">sudhakarinfotech</a>

Try it now

Note Link attribute _blank - Opens the Html linked document in a new window.

_parent - Opens the Html linked document in the parent window & changes the color of the linked element.

<a href="https://sudhakarinfotech.com" target="_parent">Result</a>

Source Code

          <a href="https://sudhakarinfotech.com" target="_parent">sudhakarinfotech </a>

Try it now

Note: Link attribute _parent opens the Html linked document in the parent window.

_self - Opens the HTML linked document in the same window & change the color of the linked element

<a href="https://sudhakarinfotech.com" target="_self">Result</a>

Source Code

          <a href="https://www.sudhakarinfotech.com/" target="_self">sudhakarinfotech </a>

Try it now

Note: Link attribute _self opens the Html linked document in the same window.

_top- Opens the HTML linked document in the full browser window & changes the color of the linked element

<a href="https://sudhakarinfotech.com" target="_top">Result</a>

Source Code

          <a href="https://sudhakarinfotech.com" target="_top">sudhakarinfotech </a>

Try it now

Note: Link attribute _top opens the Html linked document in the full browser window.

How To Create HTML Link -Image/Title/Download

Image Link- To link an image, just put HTML element <img> tag within <a> tag.

    
		   
			<a href="https://sudhakarinfotech.com" target="_blank"><img src="...." alt="test result"></a>

Source Code

          <a href="https://www.sudhakarinfotech.com/" target="_top"> 
   <img src="https://picsum.photos/200/300" alt="image" />
</a>

Try it now

Note: Place the image inside the link element & provide path detail to href attribute of the link element.

Title Link-Just put any HTML heading tag within <a> tag.


    <a href="sudhakarinfotech.com" target="_blank"><h5>sudhakarinfotech</h5></a>

Source Code

          <a href="https://www.sudhakarinfotech.com/" target="_top"> 
  <h5>sudhakarinfotech</h5>
</a>

Try it now

Note: Place header element inside <a> element & provide path detail to href attribute of the link element.

Download Link

A download link can be created, by just pointing the download link to the href of the anchor tag. Here is an example of creating download links for zip, pdf, and png files.

Source Code

          <a href="downloads/result.pdf">Download PDF file</a> <br />
<a href="downloads/question.zip">Download Zip file</a><br />
<a href="downloads/image.jpg">Download Image file</a><br />

Try it now

Note: Place link text inside <a> element & provide path detail to href attribute of the link element.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4