HTML Link Tags Explained (+ All Attributes and Values)

saimmalik

8 months ago

HTML <hyperlink> tags assist outline relationships between assets in your web site.

On this publish, we’ll discover what HTML hyperlink tags are, the way to use them, and customary errors to keep away from when including them to your website or webpage.

What Is an HTML Hyperlink Tag?

The HTML <hyperlink> tag is an HTML tag (a chunk of code) that establishes connections between the doc you’re on and its exterior assets (recordsdata or different belongings).

You must place HTML hyperlink tags in an HTML doc’s <head> part. Like this:

<!DOCTYPE html> <html lang="en"> <head> <hyperlink rel="stylesheet" sort="textual content/css" href="kinds.css"> </head> <physique>  </physique> </html>

Browsers that at present assist HTML hyperlink tags embody:

Chrome
Edge
Safari
Opera
Firefox

Browsers that don’t assist HTML hyperlink tags may not render them correctly. That means they could ignore the tag altogether and show nothing in any respect.

7 Makes use of of the HTML Hyperlink Tag

Let’s have a look at just a few widespread examples of hyperlink tags in HTML.

1. Hyperlink an Exterior Model Sheet

An exterior model sheet is a file with Cascading Model Sheets (CSS) code. This code defines the kinds and structure of a webpage—like background shade.

For a mode sheet to work, it’s essential to hyperlink it to the web page you’d prefer to model. In any other case, the browser received’t find out about it and received’t show as you’ve meant.

Right here’s how you should use the HTML hyperlink tag to hyperlink to the model sheet:

2. Show a Favicon

A favicon is a small icon displayed within the browser’s tab or bookmark.

Right here’s one:

Use the HTML hyperlink tag like within the instance under to show your favicon throughout varied browsers:

<!DOCTYPE html> <html lang="en"> <head> <hyperlink rel="icon" href="favicon.png"> </head> <physique>  </physique> </html>

3. Set a Canonical URL

A canonical URL signifies the first model of a webpage when duplicate content exists throughout the location. And tells engines like google which web page to prioritize and rank in natural (unpaid) search outcomes.

To specify a canonical web page, use the HTML hyperlink tag like this:

<!DOCTYPE html> <html lang="en"> <head> <hyperlink rel="canonical" href="https://www.instance.com/canonical-page"> </head> <physique>  </physique> </html>

4. Set the Language of a Web page

The hreflang attribute specifies the language and (optionally) meant area of a doc. Which is beneficial you probably have content material in numerous languages.

Why?

As a result of with the hreflang attribute, engines like google can show essentially the most related search outcomes to customers in numerous international locations.

For instance, if you happen to Google “semrush weblog” in the US, you’ll see this outcome:

However if you happen to’re in Spain, you’ll see this:

You may outline pages for various international locations and languages utilizing the HTML hyperlink tag as proven under (this one has alternate Spanish and French variations):

<!DOCTYPE html> <html lang="en"> <head> <hyperlink rel="alternate" hreflang="en" href="https://instance.com/web page"> <hyperlink rel="alternate" hreflang="es" href="https://instance.com/es/web page"> <hyperlink rel="alternate" hreflang="fr" href="https://instance.com/fr/web page"> </head> <physique>  </physique> </html>

5. Preload Particular Sources

Preloading instructs browsers to request and retailer a useful resource in its cache proper when (or quickly after) the web page begins loading. Which may enhance a web site’s efficiency, pace, and consumer expertise.

A typical preload request is for fonts. And you’ll set a font to preload with an HTML hyperlink tag like this:

<!DOCTYPE html> <html lang="en"> <head>  <hyperlink rel="preload" as="font" sort="font/woff2" href="your-font.woff2">  <hyperlink rel="stylesheet" sort="textual content/css" href="kinds.css"> </head> <physique>  </physique> </html>

You may set assets to preload on a page-by-page foundation.

A Actually Easy Syndication (RSS) feed is a manner for web sites to share content material and updates.

And customers can subscribe to totally different web sites by way of RSS feed readers like this one:

This lets them see when websites publish new content material.

Use the HTML hyperlink tag to hyperlink to your RSS feed so a consumer can subscribe to your feed.

<!DOCTYPE html> <html lang="en"> <head> <hyperlink rel="alternate" sort="software/rss+xml" title="RSS Feed" href="rss-feed.xml"> </head> <physique>  </physique> </html>

7. Hyperlink to Exterior Fonts

HTML hyperlink tags allow you to hyperlink to exterior fonts (like these in Google Fonts) to make use of in your website.

Right here’s the code to make use of:

<!DOCTYPE html> <html lang="en"> <head>  <hyperlink rel="stylesheet" href="https://fonts.googleapis.com/css?household=Open+Sans"> </head> <physique>  </physique> </html>

Extra HTML Hyperlink Tag Attributes and Values

Hyperlink tag attributes present further data and go between the opening and shutting tag.

And values point out the precise content material assigned to an attribute.

Each attributes and their values information the HTML hyperlink tag in performing its designated duties. In different phrases, they inform it the way to behave.

Listed here are present HTML hyperlink tag attributes and their widespread values:

Attribute	Values	Definition	Instance
as	audio doc embed fetch font picture object script model observe video employee	Specifies the kind or position of the linked useful resource. It’s required when utilizing the “preload” attribute.	<hyperlink rel=”preload” as=”audio” href=”audio.mp3″>
crossorigin	nameless use-credentials	Signifies whether or not the browser ought to fetch the crossorigin request as nameless—i.e., with out sending credentials (like cookies)	<hyperlink rel=”stylesheet” href=”https://instance.com/kinds.css” crossorigin=”nameless”>
fetchpriority	excessive low auto	Helps browsers prioritize the way to fetch assets. Which may enhance your website’s efficiency when dealt with appropriately.	<hyperlink rel=”stylesheet” href=”https://fonts.googleapis.com/css?household=Open+Sans” fetchpriority=”excessive”>
href	URL	Signifies the URL in absolute or relative phrases of the linked useful resource	<hyperlink rel=”stylesheet” href=”https://instance.com/kinds.css”>
hreflang	It’s possible you’ll use ISO 639-1 or the ISO 3166-1 alpha-2 nation and language codes	Signifies the language (and probably the meant nation) of the linked useful resource	<hyperlink rel=”alternate” hreflang=”fr” href=”https://instance.com/fr/web page”>
imagesizes	Peak x width or P.c of viewport width (vw)	Helps preload responsive photographs. Used solely with rel=”preload” and as=”picture.”	<hyperlink rel=”preload” as=”picture” href=”instance.jpg” imagesrcset=”example_300px.jpg 300w, example_600px.jpg 600w, example_1200px.jpg 1200w” imagesizes=”50vw”>
imagesrcset	URL	Specifies a listing of photographs. The browser will choose essentially the most applicable picture to show. Used solely with rel=”preload” and as=”picture.”	<hyperlink rel=”preload” as=”picture” href=”instance.jpg” imagesrcset=”example_300px.jpg 300w, example_600px.jpg 600w, example_1200px.jpg 1200w” imagesizes=”50vw”>
integrity	cryptographic hash worth	Gives a hash worth for verifying the integrity of the linked useful resource. Which can provide you an additional layer of safety when loading assets.	<hyperlink rel=”stylesheet” href=”kinds.css” integrity=”sha256-BBq2K8ntPke0J1Xy2ftV07cHJZaMjRZEmmgvsq81IB4=”>
media	all print display speech aspect-ratio shade color-index grid top monochrome orientation decision scan width	Specifies the kind of machine or display measurement that the linked useful resource is designed for	<hyperlink rel=”stylesheet” href=”styles-mobile.css” media=”display and (max-width: 600px)”>
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url	Specifies how a lot referrer data to incorporate when fetching the useful resource	<hyperlink rel=”stylesheet” href=”kinds.css” referrerpolicy=”no-referrer”>
rel	alternate creator canonical dns-prefetch assist icon license subsequent pingback preconnect prefetch preload prerender prev search stylesheet	Specifies the connection between the present doc and the linked useful resource	<hyperlink rel=”icon” href=”favicon.png”>
sizes	Any top x width measurement	Used to point sizes of icons. It will possibly solely be used with rel=”icon.”	<hyperlink rel=”icon” sort=”picture/png” sizes=”16×16″ href=”favicon.png”>
title	textual content	Defines the default or alternate model sheet to maintain observe of linked model sheets. It doesn’t have an effect on how the browser applies them.	<hyperlink rel=”stylesheet” href=”kinds.css” title=”Predominant Model Sheet”>
sort	Varied media varieties like: textual content/css textual content/javascript picture/svg+xml	Describes the media sort for the linked useful resource	<hyperlink rel=”stylesheet” href=”kinds.css” sort=”textual content/css”>

Listed here are errors folks regularly make when including the <hyperlink> tag to their website. By avoiding them, you may be certain that your hyperlink tags work nicely and that browsers can learn them.

Including the Tag to Web page’s Physique Part

The HTML hyperlink tag belongs within the <head> part of your HTML doc.

Why?

As a result of in line with semantic HTML, the <head> part of an HTML doc is the place metadata ought to go. (Metadata is data that describes knowledge. And HTML hyperlink tags are thought of metadata parts.)

An HTML hyperlink tag could not work as anticipated if you happen to add it to the <physique>.

As an example, putting your model sheet HTML hyperlink tag within the <physique> part might trigger a delay in loading the model of that internet web page.

You may test the place your hyperlink tag is by viewing your web page’s supply code. Proper-click on the web page within the browser and choose “View Web page Supply.”

Then, press Ctrl+F (Command+F on Mac) and search <head>.

(You too can search </head> to seek out the place the <head> part ends.)

Look by way of the code to make sure the hyperlink tags in your HTML are throughout the <head> and </head> tags. In the event that they aren’t, both transfer them or attain out to your internet developer for assist.

Utilizing Incorrect Attributes or Values

You may solely use particular values related to every attribute. And a few attributes can solely work with different attributes.

For instance, if you happen to use “rel=preload” in your hyperlink tag, you should additionally use the as attribute.

Confer with our checklist of HTML hyperlink tag attributes and their values above to make sure you’re utilizing the proper ones.

Incorporating Deprecated Attributes

Deprecated—which means outdated—attributes could not work. As a result of trendy browsers sometimes section out assist for them.

Organizations just like the World Extensive Internet Consortium (W3C) could determine to deprecate attributes for varied causes. Like altering expertise.

For instance, the rev attribute was beforehand used to point out the reverse relationship between the present doc and the linked doc. For instance:

<hyperlink rev="made" href="related-document.html">

This HTML hyperlink tag indicated that the linked doc (related-document.html) was made by the present doc.

However as a result of the rev attribute solely accounts for reverse relationships, the W3C deprecated it. It now advises folks to make use of the rel attribute as an alternative, which is extra versatile.

Right here’s the way you’d rework the instance above utilizing the present rel attribute:

<hyperlink rel="creator" href="related-document.html">

Different deprecated attributes for the HTML hyperlink tag embody:

charset: Defines the encoding of the linked useful resource
strategies: Gives details about the capabilities or actions that might be carried out on a linked object
goal: Specifies whether or not the linked doc ought to load in a window or body

Verify your code for any of those attributes. And substitute them with one thing extra appropriate if wanted.

Verify for HTML Hyperlink Tag Points on Your Website

Use a diagnostic device like Semrush’s Site Audit to trace technical points in your website. Together with ones that come up from errors inside your HTML hyperlink tags.

Right here’s how.

Open Site Audit. Enter your area URL and click on “Begin Audit.”

This opens a menu the place you may configure all of your settings.

Subsequent, click on “Begin Website Audit.”

As soon as your audit is full, you’ll obtain an in depth report of what that you must enhance.

Click on on the “Points” tab.

This shows a listing of technical points along with your website.

For instance, pages with duplicate content material—which might profit from an HTML hyperlink tag with a canonical attribute.

Website Audit additionally spots hreflang errors, canonical tag errors, and gradual pages. (Gradual pages may profit from utilizing the fetchpriority attribute inside your HTML hyperlink tag.)

You may click on “Why and the way to repair it” subsequent to every subject to raised perceive and deal with the issue.

Cleansing up these points helps you create an excellent consumer expertise in your website. And optimize your pages so engines like google can simply crawl, index, and rank them in search outcomes.

Attempt Website Audit totally free.