HTML Free Codes<a>
Establishes clickable navigation links
Definition and Usage
The <a> element creates hyperlinks enabling navigation between documents and resources.
The critical href attribute specifies the target destination for link navigation.
By default, links will appear as follows in all browsers:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
<a> tag has no href attribute, it is only a placeholder for a hyperlink.
target attribute.
Browser Support
The <a> tag is supported in all major browsers:
Attributes
| Attribute | Value | Description |
|---|---|---|
| href | URL | Specifies the URL of the page the link goes to |
| target | _blank _self _parent _top |
Specifies where to open the linked document |
| download | filename | Specifies that the target will be downloaded when a user clicks on the hyperlink |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag |
Specifies the relationship between the current document and the linked document |
| type | media_type | Specifies the media type of the linked document |
| hreflang | language_code | Specifies the language of the linked document |
Examples
Basic Link
Create a simple hyperlink to another page:
Example
<a href="https://www.example.com">Visit Example.com</a>Link Opens in New Tab
Use the target="_blank" attribute to open the link in a new tab:
Example
<a href="https://www.example.com" target="_blank">Open in New Tab</a>target="_blank", always add rel="noopener noreferrer" for security reasons.
Email Link
Create a link that opens the user's email client:
Example
<a href="mailto:info@example.com">Send Email</a>Phone Link
Create a link that allows users to call a phone number:
Example
<a href="tel:+1234567890">Call Us: +1 234 567 890</a>Download Link
Create a download link using the download attribute:
Example
<a href="document.pdf" download>Download PDF</a>Jump to Section (Anchor Link)
Create a link that jumps to a specific section on the same page:
Example
<!-- Link -->
<a href="#section1">Jump to Section 1</a>
<!-- Target section -->
<h2 id="section1">Section 1</h2>Link with Title (Tooltip)
Add a tooltip that appears when hovering over the link:
Example
<a href="https://www.example.com" title="Go to Example.com">Hover over me</a>Button-Style Link
Style a link to look like a button using CSS:
Example
<style>
.button-link {
display: inline-block;
padding: 12px 24px;
background-color: #745af2;
color: white;
text-decoration: none;
border-radius: 6px;
transition: background-color 0.3s;
}
.button-link:hover {
background-color: #5a3fd8;
}
</style>
<a href="https://www.example.com" class="button-link">Click Me</a>Try it Yourself
Interactive Example
Click the links below to see how they work: