What Is The HTML Link Tag?

An HTML link connects one page to another within a website. The HTML link redirects you to other pages when you click on it. When we mouse over the text, images, and other elements it shows a little hand which means it is an HTML link.

Syntax of HTML link:

HTML link tags are denoted by <a> tag

Here is HTML Link with simple syntax

<a href="url of webpage">link text here</a>

HTML link tag has one most important attributes which is href, which takes the URL of the web page where the user will redirect. And the Link text is shown to the user when the user clicks and after that the user redirect to a specific URL.

Suppose that you want to redirect the user to HTML Heading and paragraph we use the following way:

<p>Click here to view </p>
<a href="https://techpedia.site/html-heading-and-paragraph/">HTML Heading and Paragraph</a>

OUTPUT:

Click here to view

HTML Heading and Paragraph

HTML Link Color: 

Here is the default color of the HTML link

• An unvisited HTML Link is blue and underlined.
• A visited HTML link is purple and also underlined.
• An active HTML link is in red and underlined.

Here is an example you can click on the link

Click here to visit JavaScript Array

Click here to visit React Components

Click here to visit HTML Table

HTML Link Target Attributes:

When someone clicks on a link it redirects and opens the new page in the current window. So to open the new page in the new tab or window we use other attributes which is target attributes.

1. Self: opens the new page in the same window or tab.
2. Parent: opens the new page in the parent frame.
3. Blank: opens the new page in the new tab window.
4. Top: open the new page in the full body of the window.

By default, the target is set to self. 

  Target self:

<a href="https://en.wikipedia.org/wiki/Hyperlink" target="_self">Hyperlink</a>

 Target Parent:

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

 Target blank:

<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link" target="_blank">developer mozilla</a>

 Target top:

<a href="https://techpedia.site" target="_top">techpedia</a>

HTML Link image:

We use the image as a link when someone clicks on an image it redirects it to the URL of the anchor tag, as we use <img> tag instead of link text

Here is an example of a link image, just click on the image it redirects you to the home page of Techpedia

<a href="https://techpedia.site">
<img src="techpedia.webp" alt="techpedia" style="width:100%;height:100%;">
</a>

Absolute URLs vs Relative URLs

An absolute URL is a full web address like https://www.google.com or another other website address while the relative URL is the path of the directory or URL within the directly

Here is an example of an absolute and relative path

<p>Absolute URLs</p>
<a href="https://www.wikipedia.org/">wikipedia</a>
<p>Relative URLs</p>
<a href="https://techpedia.site/about-us/">about us</a>
<a href="https://techpedia.site/contact/">contact us</a>

HTML Link Email address:

Sometimes we want to redirect our user directly to the email address to send us an email then we use mailto into the href attributes in this way

<p>Email us just click on the link</p>
<a href="mailto:support@techpedia.site">email us</a>

HTML Link phone number:

We also redirect the user by using tel into the hre tag as follows

<p>Call us</p>
<a href="tel:+9230290...">contact us</a>

HTML File download:

Suppose that we want to share the file with the user then we use the .pdf, .img, .docs and etc files all the files become downloadable 

Here is an example

<a href="index.pdf">download</a>

HTML link button:

A button can also work as a link due to the javascript. we use events such as onclick, and onchange to make the button linkable

Here is an example of a button

<button onclick="document.location='https://techpedia.site'">techpedia</button>

HTML Link Title:

HTML Link title is used  as an attribute in the anchor tag and it contains little information about the link text when mouse over it shows the information

<a href="https://techpedia.site/html-heading-and-paragraph/" title="click here to see the detail about heading and paragraph">HTML Heading and paragraph</a>

About Author

Muhammad Rashid Iqbal

My name is Muhammad Rashid Iqbal. I belong to Muzaffargarh,Punjab,Pakistan .My graduation in bachelor in Information Technology. Am expert in Web designing, web development ,Mern Stack developer, Email Marketing ,content writing, guest posting and lead generation.

See author's posts