A Complete Guide to HTML Link Attributes (In a Nutshell)

If you run an active blog or website, you probably do a lot of linking within your posts. For example, you might link to other pages on your site or third-party content. However, you’ll want to make sure that you’re using the right HTML link attributes to make things a little clearer for Google and your readers.

Fortunately, most HTML link attributes are pretty straightforward. Once you learn what they mean and how to use them, you can provide accurate information about the type of link you’re using and the page it leads to.

What are HTML link attributes?

HTML link attributes are elements that define the type of hyperlink within a web page. Typically, they provide essential information about the link, such as how it is displayed, what it contains, and where it leads to.

Link attributes play a crucial role in web development as they help create a seamless user experience. However, they can also be used in blog writing. For example, if you’re promoting a brand in a post, you might want to mark the link as “sponsored:”

One of the most fundamental link attributes is “href”, which stands for “hypertext reference.” This specifies the URL to which the link points, which can include another web page, a file, an image, an email address, or even a specific location within the same page.

Another common attribute is “target.” This determines how the linked page is displayed when clicked on (e.g., in a new browser tab or in the same window).

👉 If you have a WordPress site, you can add this attribute with a simple click:

There’s also the “title” attribute, which provides users with additional information about the link when they hover over it. However, you’ll want to be careful about using this attribute as using it improperly can cause issues with web accessibility.

As you can see, HTML link attributes enable you to specify the destination and behavior of the hyperlink, and provide information about the content that it contains. By using these attributes effectively, you can create a more user-friendly experience for site visitors.

However, HTML link attributes can also improve your rankings in search results. This is because search engines like Google use these attributes to crawl and index web pages effectively.

For example, attributes like “rel” can indicate the relationship between the current page and the linked page. This helps Google understand the structure and relevance of the website.

Common link attributes (and when to use them)

Now, let’s look at the most common types of HTML link attributes (and when to use them).

Rel attributes

As mentioned earlier, rel attributes define the relationship between the current page and the linked resource.

👉 Here’s an example of a link with a rel attribute:

<a href="https://example.com/product" rel="sponsored">Product X</a>

Now, let’s look at the most common types of “rel” attributes.

nofollow

This instructs search engines not to follow the linked URL. It is typically used to prevent search engine bots from passing link equity to the linked page, thus preserving the authority of the current page.

sponsored

The sponsored attribute is used to identify links that are part of a paid partnership. It helps search engines understand the nature of the link and can impact SEO rankings. Google may penalize you if you do not disclose a sponsored link.

about

You can use this attribute to specify the subject or topic of the linked content. For example, you might provide additional information about the linked resource.

mentions

The mentions attribute is used to indicate that the linked content mentions a particular entity or subject. For example, if you’re writing an article about non-profits, you can use this attribute when linking to their respective websites.

UGC (User-Generated Content)

This attribute can be used to mark links that lead to user-generated content. This may include comments, posts, and media.

Target attributes

Target attributes tell the browser how to display the linked content. Typically, you’ll use one of the following:

_blank. The _blank target attribute opens the linked content in a new browser tab or window. You can use it to keep users on your site while allowing them to access third-party content in a new tab.

_self. This is the default behavior for links. It opens the linked content in the current browser tab or window.

👉 Here’s an example of a target attribute:

<a href="https://partnerwebsite.com" target="_blank">Partner Website</a>

If you’re a blogger, instructing the browser to open third-party links in a new browser can be very useful. It does not interrupt the user experience and can help keep readers engaged with your content.

Referrerpolicy

These attributes control how the browser sends the “referrer” information (the URL of the page that contains the link) when a user clicks on a link.

👉 Here’s an example of a referrerpolicy attribute in a link:

<a href="https://myshop.com" referrerpolicy="no-referrer">Visit MyShop</a>

Let’s look at a few common options.

no-referrer

This setting indicates that no referrer information will be sent to the linked resource. This means that, when the user clicks the link, the target URL will not receive information about the referring page.

no-referrer-when-downgrade

This is the default setting. It means that the referrer information is sent when navigating from a secure (HTTPS) page to a less secure (HTTP) page, but not when moving from an HTTPS page to another HTTPS site.

origin

With this attribute, only the origin part of the referrer URL is sent to the linked resource. The origin information consists of the protocol (HTTP or HTTPS), domain, and port number.

origin-when-cross-origin

When the link is visited from the same origin (same domain), the full referrer information is sent. However, if the link leads to a different domain, only the origin part of the referrer URL is sent.

same-origin

In this case, the full referrer information is sent only when the link leads to a page of the same origin (same domain). For example, you might use this attribute in your internal linking strategy.

unsafe-url

This setting sends the full referrer URL, regardless of the origin and security context. However, using this attribute is not recommended, as it can potentially leak sensitive information.

Other attributes

Let’s wrap up by looking at a few other HTML link attributes that you could use.

download

The download attribute is used to specify that the target of the link should be downloaded when clicked, rather than navigating to it. You can use this attribute for files like PDFs, images, or documents.

Example: <a href="https://example.com/files/document.pdf" download>Download PDF Document</a>

href

As mentioned earlier, the href attribute is the most critical link attribute. It specifies the URL that the link points to, and it is required for all anchor (<a>) elements.

Example: <a href="https://example.com"</a>

media

This specifies the media type for which the linked resource is intended (e.g., mobile phone screens). Web developers typically use it in the <head> section of the page, along with <link> elements for stylesheets.

👉 Here’s an example:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://themeisle.com/blog/html-link-attributes/styles.css" media="screen and (min-width: 768px)">
</head>
<body>
    <!-- Your web content here -->
</body>
</html>

In this case, the stylesheet in question is applied when the screen width of the user’s device is 768 pixels or more.

type

Like the media attribute, the type attribute is used with a <link> element. It defined the type of linked resource, typically a CSS or JavaScript file.

👉 Let’s look at an example:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://themeisle.com/blog/html-link-attributes/styles.css">
</head>
<body>
    <!-- Your web content here -->
</body>
</html>

Here, the type attribute tells us that the linked resource is a CSS file. You can use “text/javascript” for JavaScript files and “application/xml” for XML files.

Start using HTML link attributes the right way 🏁

For example, you can use the sponsored rel attribute to let users know that you were paid to display that link. Meanwhile, the _blank target attribute opens the link in a new tab so as not to interrupt the browsing experience. You can also use the referrerpolicy attribute to specify what information about your site is transferred to the linked resource.

Do you still have any questions about using HTML link attributes? Let us know in the comments section below!