HTML Link Code: How to Create Hyperlinks on Your Site
6 Steps to Get AI to Recommend Your Brand
Links have a lot of power, both in terms of user experience and your site’s SEO.
So, understanding how to code HTML links properly is key if you want to create links that help (not hinder) your website’s performance.
The Components of an HTML Link
You create an HTML link using the anchor element: <a>. You then use attributes and values to change how the link functions.
Here’s what the complete HTML code for a clickable link looks like:
<a href="https://example.com" target="_blank" rel="noopener">Visit Example.com for more info.</a>
Let’s break that down:
- The anchor tag () is the foundation of every link. It tells browsers “this is a clickable link.”
- The href attribute defines where your link goes. This can be a web address, a file path, or even a specific section on the current page.
- The target attribute controls how the link opens. The default is to open in the same window, but _blank makes it open in a new tab.
- The rel attribute defines the relationship between the linking page and the linked page. It’s particularly important for SEO.
- The anchor text is what users see and click. In the example above, it’s “Visit Example.com for more info.”
- The closing tag () indicates where the link ends.
How to Add Links with HTML Code
The basic method of adding links with HTML code involves placing the URL you want to link to within a link anchor tag.
Text Links
Text links are the most common type of hyperlink. You can use them to link to other pages on your site or on other sites.
Here’s the standard implementation:
<a href="https://example.com">Visit our website</a>
Image Links to Make Images Clickable
The basic structure for an HTML image link wraps an <img> tag inside an anchor tag:
<a href="https://example.com">
<img src="logo.png" alt="Company Logo">
</a>
Email Links
Email links use a special protocol that launches the user’s default email client. Use the mailto: protocol to create email links:
<a href="mailto:contact@example.com">Email Us</a>
Phone Links
For phone numbers, use the tel: protocol:
<a href="tel:+15555555555">Call (555) 555-5555</a>
Jump Links (Anchor Links) for Internal Page Navigation
Jump links, also known as anchor links, help users navigate to specific sections within the same page.
Button Links for Calls to Action
HTML links over buttons combine the functionality of an <a> tag with the appearance of a button:
<a href="yourdomain.com/signup" class="button-link">Get Started</a>
Download Links
Download links let your users easily save files from your website to their devices:
<a href="report.pdf" download>Download PDF Report</a>
Other Important HTML Link Code for SEO
Canonical Tags
Canonical tags tell search engines which version of a page is the primary one when you have similar or duplicate content across multiple URLs:
<head>
<link rel="canonical" href="https://example.com/original-page">
</head>
Hreflang
The hreflang HTML link attribute helps search engines understand the language and regional targeting of your pages:
<head>
<link rel="alternate" hreflang="en-us" href="https://example.com/en-us/page">
<link rel="alternate" hreflang="es" href="https://example.com/es/page">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/">
</head>
HTML Link Code Best Practices
Syntax
Here’s the correct syntax for an HTML link:
<a href="url">Anchor Text</a>
Anchor Text
Good anchor text clearly tells users what to expect when they click a link.
Target
The target attribute determines how your link opens when a user clicks on it:
<a href="https://example.com" target="_blank">Example</a>
Relationships (rel=)
The rel attribute defines the relationship between your current page and the page you’re linking to. Some common values include:
- Sponsored links for affiliate links or paid placements:
<a href="https://example.com" rel="sponsored">Paid link</a>
- Nofollow links to prevent search engines from following:
<a href="https://example.com" rel="nofollow">Link to a site you don’t endorse</a>
Using the correct rel values can help manage your SEO and security effectively.