Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Insert Hyperlink in HTML Page?
To insert a hyperlink in a HTML page, we have to utilize the anchor tags <a> and </a> labels, which are used to characterize the connections. The <a> tag demonstrates where the hyperlink begins and the < / a> tag shows where it closes. Whatever text gets added inside these labels, will function as a hyperlink. Add the URL for the connection in the <a href = " ">
Following is the usage of hyperlinks −
< html> <head> ... </head> <body> -- <a href = " url "> text < / a> </body> </html>
In the HTML, all the links are considered to be hyperlink. These hyperlinks allow user to click on that and move to the another page/document. We cannot let the text as link because it will not allow to click. So, we need to use hyperlink on the text.
Syntax
Following is the syntax to insert hypertext in HTML −
<a href="url"> Your text for link </a>
Example
Using different links in HTML −
<!DOCTYPE html> <html> <body> <h2>Here is the text Hyperlink</h2> <p><a href="https://www.tutorialspoint.com">Text URL</a></p> <h2>Here is the Image hyperlink</h2> <p><a href="https://www.tutorialspoint.com/images/cbse-class-6-maths-notes_icon.svg">Dummy image</a></p> </body> </html>
When we run the above program, we see three hyperlinks (text, image and email respectively) with three headings, each one has a specified URL.
Let us discuss about how to insert the email link, image link, text link in detailed −
Using image as a link
We can use image as a link by simply placing <img> tag inside the anchor tag <a>.
Example
Following is the example which shows how to use an image as a link −
<!DOCTYPE html>
<html>
<body>
<a href="https://www.tutorialspoint.com/statistics/index.htm">
<img src="https://www.tutorialspoint.com/images/statistics_icon.svg" alt="HTML tutorial" style="width:300px; height:250px;">
</a>
</body>
</html>
When we run the above program, we see a png image, when clicked on it, you’ll be re-directed to the specified URL.
Using email address as a link
To link an email address we need to use mailto: inside the href attribute, which opens the user email program.
Example
Let’s see an example for better understanding −
<!DOCTYPE html> <html> <body> <h1> Links to Email Address</h1> <p><a href="mailto:abc@example.com">Send Email </a> </p> </body> </html>
When we execute the above program, we see a hyperlink with send email text. On clicking the link, it will re-direct you to the default mail address that is specified, which enables users to send mails directly from the webpage.
Using button as a link
If you are using button as a link try to add some script code to it, it helps us to specify what to do after clicking the button −
Example
Let’s see an example for better understanding −
<!DOCTYPE html> <html> <body> <h2>Button as a Links</h2> <p>Click the button to go to the tutorialsPoint </p> <button onclick="document.location='https://www.tutorialspoint.com/html/html_text_links.htm'">HTML Tutorial</button> </body> </html>
When we run the above code, we see a form with heading “Button as a links”, in which the paragraph element is “Click the button to go to the tutorialsPoint”. Then, a button labeled as “HTML Tutorial” is displayed, when clicked on the button, it will navigate to another page as specified.
After clicking the button, it will navigate to another page which is shown as below −
Some more links matching specific URL’s are −
Link to a specific location inside the current web page. This syntax is used to link to index on the same page.
<a href="#index">
Link to a page on a local machine using an absolute path −
<a href="http://www.welcome.com">
Absolute paths always include the domain name of the website, including http://www.
Link to another web page on the same local machine using a relative path −
<a href="C:/Users/bhanu/Desktop/index.html">
Relative paths only point to a file or a file path on a local machine.
Link to a web page on another website
<a href="mypage.html">
This syntax is used to link to a web page "mypage.html".
156K+ Views
