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>
<!-- The content material of your webpage goes right here -->
</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:
<!DOCTYPE html>
<html lang="en">
<head>
<hyperlink rel="stylesheet" sort="textual content/css" href="kinds.css">
</head>
<physique>
<!-- The content material of your webpage goes right here -->
</physique>
</html>
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>
<!-- The content material of your webpage goes right here -->
</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>
<!-- The content material of your webpage goes right here -->
</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>
<!-- The content material of your webpage goes right here -->
</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>
<!-- Preload fonts -->
<hyperlink rel="preload" as="font" sort="font/woff2" href="your-font.woff2">
<!-- Hyperlink to the exterior model sheet utilizing the font -->
<hyperlink rel="stylesheet" sort="textual content/css" href="kinds.css">
</head>
<physique>
<!-- The content material of your webpage goes right here -->
</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>
<!-- The content material of your webpage goes right here -->
</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 to an exterior font from Google Fonts -->
<hyperlink rel="stylesheet" href="https://fonts.googleapis.com/css?household=Open+Sans">
</head>
<physique>
<!-- The content material of your webpage goes right here -->
</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 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.
