How To

How to create a hyperlink in HTML?

Updated On: 2024-06-02

Hyperlink is very important for the web as it makes the web pages linked with each other. This article provides a detailed understanding on hyperlink, its attributes, types, examples, video tutorial and resources to learn more. 

Hyperlink syntax

<a href="w3codehub.com/hyperlink">hyperlink</a>]

By default, links will appear as follows in most of the browsers:

1) Underlined and blue color when it is unvisited

2) Underlined and purple color when it is visited

3) Underlined and red when it is active. 

However, you can overwrite this using CSS.


Various usages of hyperlinks 

1) Basic hyperlinks

External Link

<a href="https://www.example.com">Visit Example</a>

Internal Link

<a href="about.html">About Us</a>

2) Email link

<a href="mailto:someone@example.com">Send Email</a>

Email link Creates a link that opens the user's default email client to send an email.

3) Telephone Link

<a href="tel:+1234567890">Call Us</a>
Telephone link creates a link that initiates a phone call on devices with telephony capabilities.

4) Download Link

<a href="files/myfile.pdf" download>Download PDF</a>
Download link creates a link that prompts the user to download a file.

5) Anchor Links

Within the Same Page

<a href="#section1">Go to Section 1</a>

<h2 id="section1">Section 1</h2>

This link links to a specific section within the same page using an ID.

Between Different Pages

<a href="otherpage.html#section2">Go to Section 2 on Another Page</a>
This link links to a specific section on another page using an ID.

Various attributes of hyperlinks

1) Target Attribute

Target attributes tells the browser where the linked document will be opened. There are four defined targets attributes and each starts with underscore sign.

_blank attribute example

<a href="https://www.google.com/" target="_blank">W3codehub</a>
It will open the document in new window. Try it

_parent attribute example

<a href="images/sky.jpg" target="_parent">
    <img src="sky-thumb.jpg" alt="Cloudy Sky">
</a>
_parent attribute will Open the linked document in the parent window.

_self attribute example

  <a href="https://www.example.com" target="_self">Open Example in Same Tab</a>

_top attribute example

 <a href="https://www.example.com" target="_top">Open Example in Full Window</a>


2) Rel Attribute

Defines the relationship between the current document and the linked document.


No Referrer link example

<a href="https://www.example.com" rel="noreferrer">No Referrer</a>
It prevents the browser from sending the HTTP referrer header.

No follow link example

<a href="https://www.example.com" rel="nofollow">No Follow</a>

External link example

<a href="https://www.example.com" rel="external">External Link</a>

Opener link example

<a href="https://www.example.com" target="_blank" rel="noopener">No Opener</a>

3) Title Attribute

Title Attribute provides additional information about the link, displayed as a tooltip.

<a href="https://www.example.com" title="Visit Example Website">Example</a>


Complete HTML Example with Various Hyperlinks

Related video

Related Resources

For more information, you can use the following resources:

HTML links at Tutorial Republic

HTML Links Hyperlinks at Geeksforgeeks

Creating hyperlinks at Mozilla

How to Create Hyperlinks with HTML at Semrush

HTML Links at W3schools

Related Reads