HTML links are essential for navigating between different pages or sections of a website. Links are created using the <a> (anchor) tag. The most important attribute of the <a> element is the href attribute, which indicates the destination of the link.
A basic HTML link is created using the <a> tag and the href attribute. The text or content inside the <a> tag is what users will click on to follow the link.
Example
<a href="https://www.lets-coding.com">Click here</a>
In this example, the text "Click here" is the clickable link, and it will navigate to "https://www.example.com" when clicked.
Links can navigate to various destinations, including other webpages, sections within the same page, email addresses, and more.
| Destination | Description | Example |
|---|---|---|
| External Links | Links that navigate to other websites. |
Try yourself
|
| Internal Links | Links that navigate to other pages within the same website. |
Try yourself
|
| Anchor Links | Links that navigate to sections within the same page. |
Try yourself
|
| Email Links | Links that open the user's email client to send an email. |
Try yourself
|
| Phone Links | Links that open the user's phone dialer to make a call. |
Try yourself
|
To open a link in a new tab, use the target attribute with the value _blank. This is useful for external links where you don't want users to navigate away from your site.
Example
<a href="https://www.lets-coding.com" target="_blank">Open in New Tab</a>
In this example, clicking the link will open "https://www.example.com" in a new tab.
Links can be styled using CSS to make them more visually appealing. Common styles include changing the link color, removing the underline, and adding hover effects.
Example
a {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
This example shows how to style links with different colors and effects when hovered over.
Sometimes, you might want to disable a link, preventing it from being clicked. This can be done using JavaScript or by styling it to look disabled.
Example
<a href="lets-coding.com" onclick="return false;" style="pointer-events: none; color: gray;">Disabled Link</a>
In this example, the link appears disabled and cannot be clicked.
Here are some important notes and best practices when using links in HTML: