HTML Hyperlink
An HTML Hyperlink connects one webpage to another using the <a> (anchor) tag. Hyperlinks are the foundation of the web — they let users navigate between pages, websites, files, emails and even page sections.
What is a Hyperlink?
- Hyperlinks navigate users from one resource to another.
- Created using the
<a>tag with anhrefattribute. - Can point to a webpage, email, phone or even an in-page anchor.
- Use
target="_blank"to open the link in a new tab.
Why Use Hyperlinks?
Navigation
Connect pages within a website or to external sites.
Mailto
Open the user's email client with a pre-filled address.
Tel Links
Trigger phone calls on mobile devices.
Anchors
Jump to a specific section within the same page.
Downloads
Use download attribute to offer files.
SEO
Search engines follow links to discover content.
Hyperlink Syntax
- Basic:
<a href="https://pbainst.in">Visit</a> - New tab:
<a href="#" target="_blank">Open</a> - Email:
<a href="mailto:hi@x.com">Email</a> - Phone:
<a href="tel:+9112345">Call</a> - Anchor:
<a href="#section1">Jump</a> - Download:
<a href="file.pdf" download>Download</a>
Hyperlink Example
<!DOCTYPE html> <html> <body> <p><a href="https://pbainst.in">Visit PBA Institute</a></p> <p><a href="https://google.com" target="_blank">Open Google</a></p> <p><a href="mailto:contact@pbainst.in">Email Us</a></p> <p><a href="tel:+919876543210">Call Us</a></p> <p><a href="#footer">Go to Footer</a></p> </body> </html>
Code Explanation
| HTML Part | Meaning |
|---|---|
| <a> | Defines a hyperlink. |
| href | Specifies the destination URL or path. |
| target="_blank" | Opens the link in a new browser tab. |
| mailto: | Opens the user's email program. |
| tel: | Initiates a phone call on supported devices. |
| #id | Jumps to an element with the given id. |
Hyperlink Types
Use Cases
- Site navigation: Menus and breadcrumbs.
- External resources: Reference articles and tools.
- Contact actions: Email, phone, WhatsApp.
- Table of contents: In-page jump links.
Practice Questions
- Create a link to your favorite website.
- Open the link in a new tab using
target="_blank". - Add an email link using
mailto:. - Create an in-page anchor link to a section.
Frequently Asked Questions
What does the href attribute do?
It specifies the URL or path the link points to.
How to open a link in a new tab?
Add target='_blank' to the <a> tag.
How to create an email link?
Use href='mailto:email@example.com'.
What is an anchor link?
A link that jumps to a specific id on the same page using #.
Conclusion
Hyperlinks form the web — they connect pages, sites, and resources. Master the <a> tag with href, target and special schemes like mailto and tel to create rich, navigable user experiences.
Additional Tips
- Use rel='noopener': Add when using target='_blank' for security.
- Descriptive text: Avoid 'click here' — use meaningful link text.
- Style hover: Provide hover and focus styles via CSS.
- Internal vs external: Indicate external links with an icon.