Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to make page links in HTML Page?
A link is a connection from one web page to another web page. We can add page links to a web page using HTML links, which are hyperlinks. The <a> tag defines a hyperlink and is used to link from one page to another. The href attribute is used with the <a> tag, which indicates the link's destination.
To create page links in an HTML page, we need to use the href attribute of the <a> and </a> tag. Make sure that the <a></a> tag is placed within the <body>?</body> tags.
The link text is visible. Clicking on the link text will navigate to the specified URL address. By default, links will appear as follows on the web page of the browser −
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
Syntax
Following is the syntax to make a page link on the web page −
<a href="URL">Link Text</a>
Where URL is the destination address and Link Text is the clickable text that appears on the page.
Creating Basic Text Links
Example − External Link
Following example program creates a page link to an external website −
<!DOCTYPE html> <html> <head> <title>HTML Links Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h1>HTML Article on Links</h1> <p><a href="https://www.google.com/">Click this to navigate to the Google home page</a></p> </body> </html>
The output displays a clickable link that navigates to Google when clicked −
HTML Article on Links Click this to navigate to the Google home page (blue, underlined link)
Example − TutorialsPoint Link
In the example below, we link to the official TutorialsPoint website −
<!DOCTYPE html> <html> <head> <title>HTML Links</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h1>Click the link below and navigate to the official page of TutorialsPoint</h1> <a href="https://www.tutorialspoint.com/index.htm">TUTORIALSPOINT</a> </body> </html>
When you click on the "TUTORIALSPOINT" link, it will redirect you to the TutorialsPoint home page. After visiting, the link will appear purple instead of blue −
Click the link below and navigate to the official page of TutorialsPoint TUTORIALSPOINT (blue link, becomes purple after visiting)
Using an Image as a Hyperlink
We can add an image as a link by placing the <img> tag inside the <a> tag. This makes the entire image clickable.
Syntax
Following is the syntax to add an image as a link −
<a href="link_address"><img src="image_source" alt="description"></a>
Example
Following example creates a clickable image that links to Google −
<!DOCTYPE html>
<html>
<head>
<title>Image Link Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>HTML Article on Links</h1>
<p>Click the image below to visit Google:</p>
<a href="https://www.google.com/">
<img src="https://www.tutorialspoint.com/javafx/images/javafx-mini-logo.jpg"
alt="TutorialsPoint Logo"
style="width:80px; height:80px; border: 2px solid #ccc;">
</a>
</body>
</html>
The output displays a clickable image. Clicking on the image navigates to Google −
HTML Article on Links Click the image below to visit Google: [TutorialsPoint Logo Image - 80x80 pixels, with gray border]
Types of HTML Links
HTML supports several types of links based on their destination −
| Link Type | Description | Example |
|---|---|---|
| External Links | Links to other websites | href="https://www.google.com" |
| Internal Links | Links to other pages on the same website | href="/about.html" |
| Anchor Links | Links to sections within the same page | href="#section1" |
| Email Links | Opens email client with recipient | href="mailto:user@example.com" |
| Phone Links | Initiates phone call on mobile devices | href="tel:+1234567890" |
Link Attributes
The <a> tag supports several useful attributes −
Example − Target Attribute
The target attribute specifies where to open the linked document −
<!DOCTYPE html> <html> <head> <title>Link Target Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Link Target Examples</h2> <p><a href="https://www.tutorialspoint.com" target="_blank">Open in New Tab</a></p> <p><a href="https://www.tutorialspoint.com" target="_self">Open in Same Tab</a></p> <p><a href="mailto:support@tutorialspoint.com">Send Email</a></p> </body> </html>
The first link opens in a new tab, the second opens in the same tab, and the third opens the email client −
Link Target Examples Open in New Tab (opens in new browser tab) Open in Same Tab (opens in current tab) Send Email (opens email client)
Conclusion
HTML links are created using the <a> tag with the href attribute to specify the destination. Links can contain text, images, or other HTML elements, and support various attributes like target for controlling link behavior. Understanding link states and proper syntax is essential for creating effective web navigation.
84K+ Views
