HTML Link

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 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

Statement   <a href="url">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

General Syntax

    <a href="https://www.google.com/" target="_blank">Google Search</a>
<a href="https://www.shapeyourpath.com/" target="_blank">Shape Your Path</a>

Source Code

      
        <a href="https://www.google.com/" target="_blank">Google Search</a>
<a href="https://www.shapeyourpath.com/" target="_blank">Shape Your Path</a>

Source Code: Output

Google Search Shape Your Path

Code Explanation

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://www.shapeyourpath.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 decides where to open the linked document. There are four values of target attribute and every value of targets 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.

General Syntax

    <a href="https://www.shapeyourpath.com/" target="_blank">Shape Your Path</a>

Source Code

      
        <a href="https://www.shapeyourpath.com/" target="_blank">Shape Your Path</a>

Source Code: Output

Shape Your Path

Code Explanation

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.

General Syntax

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

Source Code

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

Source Code: Output

sudhakarinfotech

Code Explanation

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

General Syntax

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

Source Code

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

Source Code: Output

sudhakarinfotech

Code Explanation

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

General Syntax

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

Source Code

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

Source Code: Output

sudhakarinfotech

Code Explanation

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.

General Syntax

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

Source Code

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

Source Code: Output

Code Explanation

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.

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

General Syntax

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

Source Code

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

Source Code: Output

shapeyourpath

Code Explanation

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, just pointing the download link to href of anchor tag.Here is the example of creating download link of zip,pdf and png files.

General Syntax

    <a href="#">Download PDF file</a>
<a href="#">Download Zip file</a>
<a href="#">Download Image file</a>

Code Explanation

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

Online Test / Quiz

Question set 1

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS