What Is an Href Link?
An href link (also called an “a href link”) is an HTML attribute within an <a> tag that creates a clickable hyperlink and specifies the link’s URL.
Href links connect webpages, guide users, and help search engines discover content that might be used for search results.
Below is an example of an href link that creates the clickable text “Semrush.”
Href values can include:
- Relative URLs (e.g., href=”/about”): Relative URLs are partial URLs that are often useful for internal links (links to other pages on your site). They’re useful if you ever change your domain name because you won’t need to update your internal links.
- Absolute URLs (e.g., href=”https://example.com”): Absolute URLs are full web addresses and are required when linking to external sites
- Anchor links (e.g., href=”https://example.com/#section”): Anchor links jump to specific sections on a page that have CSS IDs (unique identifiers added to HTML elements). They help users skip to relevant content. Like links to subheadings shown in a table of contents.
- Mailto links (e.g., href=”mailto:info@example.com”): Mailto links open a new email draft in the user’s default email client. So they can contact you directly without copying and pasting your email address.
- Tel links (e.g., href=”tel:+1234567890″): Tel links dial a phone number on supported devices and are ideal for mobile users who want to initiate a call with a single tap
Content management systems (like WordPress) have tools that eliminate the need to code href links manually.
But it’s helpful to know these details in case you want to make manual adjustments.
Common Attribute-Value Combinations for <a> Tags
The <a> tag includes several attributes (instructions that control how a link behaves) and values (the specific settings for those instructions) that together define how a link works for users and search engines.
target=“_blank”
Using target=“_blank” opens a link in a new browser tab, which can help keep users on your site for longer (when linking to an external site).
Zachary Rischitelli, Founder and Managing Director at Real FiG Advertising + Marketing, recommends using this attribute for external links and when linking to larger files or documents. So readers don’t lose your page if they click away.
The World Wide Web Consortium (an organization that develops guidelines to help people build an accessible web) advises adding warning text beside links that open in new tabs like this. Such as adding “(opens in new tab.)”
That way, users who have difficulty perceiving visual content won’t be surprised when they click your links.
Example:
<a href="https://example.com" target="_blank">Visit Example (opens in new tab)</a>
rel=“nofollow”
A rel=“nofollow” attribute tells search engines not to follow the link or pass any SEO value (link equity) to the linked page.
Dorian Menard, Founder and Director at Search Scope, says,
“We use this with user-generated comment sections or sponsored content to ensure we stay within Google’s guidelines.”
Dorian also mentions that “rel=”nofollow” is good to use when linking to untrusted content where you don’t want to endorse the destination. Like if you need to cite a questionable source.
Example:
<a href="https://example.com" rel="nofollow">Visit Example</a>
You can also use rel=”UGC” and rel=”sponsored” for linking to user-generated content like comments or sponsored content. These attributes are more specific and transparent for search engines.
rel=“noopener”
The rel=”noopener” attribute-value combination is a security feature that prevents pages opened in new tabs from interacting with the original page and helps protect users from potential security threats.
For example, say you accidentally link to a malicious site from a secure page where a user is logged in. And you don’t use rel=”noopener.”
Zachary clarifies you run some risks by doing so:
“Without rel=”noopener,” a malicious site could change your page’s URL or run a script when the user interacts with it.”
And the original tab may no longer be safe when users return to it.
Because this type of attack only happens when links open in a new tab, rel=”noopener” should always be used alongside target=”_blank.”
Example:
<a href="https://example.com" target="_blank" rel="noopener">Visit Example</a>
rel=“noreferrer”
Use rel=”noreferrer” to prevent the destination site from seeing which URL traffic came from to maintain user and site privacy.
For example, say a user is reading an article about a specific anxiety disorder that’s mentioned in the URL and follows a link in the piece to a therapist’s website. Without rel=”noreferrer” added, the external therapist site can see the full URL that referred the visitor.
That URL might not include personal details. But it can still reveal private health concerns, which may pose a potential privacy issue for users.
You might also use rel=”noreferrer” if you don’t want sites (like a competitor) to know you’ve linked to them.
Example:
<a href="https://example.com" target="_blank" rel="noreferrer">Visit Example</a>
4 Best Practices for Href Links
Follow these best practices for href links to ensure your hyperlinks work properly.
1. Use Correct Syntax
Using the correct syntax ensures your href links work as intended, so search engines and users find the information they need.
Here are the main steps to build an href link using proper syntax:
- Start the a href link with “<a”
- Add correctly formatted attributes inside the start tag (e.g., href=”https://example.com“)
- Leave a space before each anchor tag attribute (e.g., <a href=”https://example.com” target=”_blank”>, not <a href=”https://example.com”target=”_blank”>)
- Close the start tag with > (e.g., <a href=”https://example.com”>)
- Add your anchor content to form the clickable part of the link (e.g., <a href=”https://example.com”>Visit our site</a>)
- End the tag with </a>
2. Use Descriptive Anchor Text
Anchor text is the clickable text that helps search engines and users understand what the linked page is about.
Instead of using generic text like “click here,” use descriptive text that helps users (and search engines) understand context about the linked page.
3. Limit the Number of Links on a Page
Including a thoughtful number of links helps people find the resources they need and provides a better user experience.
Whereas excessive links can make a page look spammy and potentially hurt your rankings.
Here’s an example from Google of what unnatural linking looks like:
4. Audit Links Regularly
Regularly checking your href links ensures every path on your site leads somewhere useful.
And catching small errors can help you avoid broken links that lead visitors (and crawlers) to a dead end.
Check for link issues at scale with Semrush’s Site Audit tool.
After setting it up, find the “Internal Linking” report and click “View details.”
Then, look at the “Internal Link Issues” to see whether you have:
- Broken links (links that point to a nonexistent destination)
- Too many on-page links (more than 3,000 links on a single page)
- Internal links with nofollow attributes
- Links with missing or non-descriptive anchor text
And many other issues.
Click “Learn more” or “Why and how to fix it” alongside any issue for more context.
Or click the “# issues” button to see the affected URLs.
Try Site Audit today.
