Imagine you are reading a website and see “Visit our website”. You click it, and another page opens. That clickable text is called a hyperlink or simply a link. In HTML, we create links using the <a> element.
Let’s start HTML Hyperlinks with the simplest example.
Creating a Hyperlink
The basic syntax is:
<a href="URL">Link Text</a>
For example:
<a href="https://www.google.com">Visit Google</a>
Here:
<a>creates the link.hreftells the browser where the link should go.Visit Googleis the text the user clicks.
Your First Complete Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Hyperlink</title>
</head>
<body>
<h1>My Website</h1>
<p>
Visit
<a href="https://www.google.com">Google</a>
to search the web.
</p>
</body>
</html>
Output
My Website
Visit Google to search the web.
When you click Google, the browser opens Google’s website.
Understanding href
href is one of the most important parts of a link. It tells HTML the destination of the link. For example:
<a href="https://www.example.com">Visit Example</a>
Think of it this way:
href → Where should I go?
Text → What should I click?
Linking to Another HTML Page
Links are not only used for other websites. You can use them to connect pages of your own website. Suppose you have:
my-website/
│
├── index.html
└── about.htmlIn index.html, you can write:
<a href="about.html">About Me</a>
Complete Example
index.html
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>
<a href="about.html">About Me</a>
</p>
</body>
</html>
about.html
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
</head>
<body>
<h1>About Me</h1>
<p>Hi! I am learning HTML.</p>
</body>
</html>
Output
On the home page:
Welcome to My Website
About Me
Clicking About Me opens about.html.
This is how different pages of a website are connected.
Opening a Link in a New Tab
Sometimes you don’t want the current page to disappear when someone clicks a link. You can ask the browser to open the link in a new tab using target="_blank".
<a href="https://www.google.com" target="_blank">
Open Google
</a>
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>New Tab Link</title>
</head>
<body>
<h1>Useful Website</h1>
<a href="https://www.google.com" target="_blank">
Open Google in a New Tab
</a>
</body>
</html>
Output
Useful Website
Open Google in a New Tab
When clicked, the link opens in a new browser tab.
Email Link
You can also create a link that opens the user’s email application.
Use mailto: inside href.
<a href="mailto:hello@example.com">Send us an Email</a>
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>Email Link</title>
</head>
<body>
<h1>Contact Us</h1>
<p>
<a href="mailto:hello@example.com">
Send us an Email
</a>
</p>
</body>
</html>
Output
Contact Us
Send us an Email
When clicked, the browser can open the user’s default email application.
Phone Number Link
You can also make a phone number clickable.
Use tel: inside href.
<a href="tel:+911234567890">Call Us</a>
This is especially useful on mobile phones.
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>Phone Link</title>
</head>
<body>
<h1>Contact Us</h1>
<p>
<a href="tel:+911234567890">
Call Us
</a>
</p>
</body>
</html>
Output
Contact Us
Call Us
On a supported device, clicking the link can start a phone call.
Link to a Specific Part of the Same Page
You can also make a link that takes the user to a particular part of the same page.
For this, we use an id.
First, give the section an id:
<h2 id="contact">Contact Us</h2>
Then create a link to it:
<a href="#contact">Go to Contact</a>
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>Page Navigation</title>
</head>
<body>
<h1>My Website</h1>
<a href="#contact">Go to Contact</a>
<p>This is some content on my website.</p>
<p>Here is some more content.</p>
<p>Keep scrolling...</p>
<h2 id="contact">Contact Us</h2>
<p>Email: hello@example.com</p>
</body>
</html>
Output
My Website
Go to Contact
This is some content on my website.
Here is some more content.
Keep scrolling…
Contact Us
Email: hello@example.com
When you click Go to Contact, the browser moves to the section with id="contact". The # tells the browser that you are linking to an id on the same page.
Link Text Should Make Sense
Try to use clear text for your links.
Instead of:
<a href="about.html">Click Here</a>
it is usually better to write:
<a href="about.html">Read About Me</a>
The second one tells the user what they will find after clicking.
Quick Recap
<a>is used to create hyperlinks.hreftells the browser where the link goes.- You can link to another website or your own HTML page.
target="_blank"opens a link in a new tab.mailto:creates an email link andtel:creates a phone link.- An
idand#can be used to jump to a specific part of a page.
Frequently Asked Questions (FAQs)
Q1. How do you add a link in HTML?
You can add a link using the <a> tag and the href attribute. For example, <a href="https://example.com">Visit Website</a> creates a clickable link.
Q2. What is the <a> tag in HTML?
The <a> tag, also called the anchor tag, is used to create hyperlinks. It can connect your page to another website, another HTML page, or a specific section of the same page.
Q3. What is href in HTML?
href specifies the destination of a link. It tells the browser which webpage, file, email address, phone number, or page section should open when the link is clicked.
Q4. How do you open an HTML link in a new tab?
Use target="_blank" inside the <a> tag to open the linked page in a new browser tab. For example: <a href="https://example.com" target="_blank">Visit</a>.
Q5. How do you link one HTML page to another?
Use the filename of the other HTML page in the href attribute. For example, <a href="about.html">About Me</a> will open the about.html page.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
