HTML <hyperlink> tags assist outline relationships between sources in your web site.
On this publish, we’ll discover what HTML hyperlink tags are, the best way to use them, and customary errors to keep away from when including them to your web site or webpage.
What Is an HTML Hyperlink Tag?
The HTML <hyperlink> tag is an HTML tag (a bit of code) that establishes connections between the doc you’re on and its exterior sources (recordsdata or different belongings).
It’s best to 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="types.css">
</head>
<physique>
<!-- The content material of your webpage goes right here -->
</physique>
</html>
Browsers that at the moment assist HTML hyperlink tags embrace:
- Chrome
- Edge
- Safari
- Opera
- Firefox
Browsers that don’t assist HTML hyperlink tags may not render them correctly. Which means they could ignore the tag altogether and show nothing in any respect.
7 Makes use of of the HTML Hyperlink Tag
Let’s take a look at just a few frequent examples of hyperlink tags in HTML.
1. Hyperlink an Exterior Fashion Sheet
An exterior model sheet is a file with Cascading Fashion Sheets (CSS) code. This code defines the types and structure of a webpage—like background coloration.
For a mode sheet to work, you should hyperlink it to the web page you’d prefer to model. In any other case, the browser received’t learn about it and received’t show as you’ve meant.
Right here’s how you need to 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="types.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 material exists throughout the location. And tells serps 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 when you have content material in several languages.
Why?
As a result of with the hreflang attribute, serps can show essentially the most related search outcomes to customers in several nations.
For instance, if you happen to Google “semrush weblog” in the US, you’ll see this consequence:
However if you happen to’re in Spain, you’ll see this:
You may outline pages for various nations 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 Assets
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 person expertise.
A standard 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="types.css">
</head>
<physique>
<!-- The content material of your webpage goes right here -->
</physique>
</html>
You may set sources to preload on a page-by-page foundation.
A Actually Easy Syndication (RSS) feed is a means for web sites to share content material and updates.
And customers can subscribe to totally different web sites by 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 person can subscribe to your feed.
<!DOCTYPE html>
<html lang="en">
<head>
<hyperlink rel="alternate" sort="utility/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 web site.
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>
Further HTML Hyperlink Tag Attributes and Values
Hyperlink tag attributes present further info and go between the opening and shutting tag.
And values point out the particular 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 best way to behave.
Listed below are present HTML hyperlink tag attributes and their frequent values:
Attribute |
Values |
Definition |
Instance |
as |
audio doc embed fetch font picture object script model observe video employee |
Specifies the sort 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/types.css” crossorigin=”nameless”> |
fetchpriority |
excessive low auto |
Helps browsers prioritize the best way to fetch sources. Which may enhance your web site’s efficiency when dealt with accurately. |
<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/types.css”> |
hreflang |
You might use ISO 639-1 or the ISO 3166-1 alpha-2 nation and language codes |
Signifies the language (and presumably 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 pictures. 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 pictures. 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 |
Supplies a hash worth for verifying the integrity of the linked useful resource. Which may give you an additional layer of safety when loading sources. |
<hyperlink rel=”stylesheet” href=”types.css” integrity=”sha256-BBq2K8ntPke0J1Xy2ftV07cHJZaMjRZEmmgvsq81IB4=”> |
media |
all display screen speech aspect-ratio coloration color-index grid top monochrome orientation decision scan width |
Specifies the kind of machine or display screen measurement that the linked useful resource is designed for |
<hyperlink rel=”stylesheet” href=”styles-mobile.css” media=”display screen and (max-width: 600px)”> |
referrerpolicy |
no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url |
Specifies how a lot referrer info to incorporate when fetching the useful resource |
<hyperlink rel=”stylesheet” href=”types.css” referrerpolicy=”no-referrer”> |
rel |
alternate writer 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 may 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=”types.css” title=”Predominant Fashion Sheet”> |
sort |
Varied media sorts like: textual content/css textual content/javascript picture/svg+xml |
Describes the media sort for the linked useful resource |
<hyperlink rel=”stylesheet” href=”types.css” sort=”textual content/css”> |
Listed below are errors folks continuously make when including the <hyperlink> tag to their web site. By avoiding them, you may be sure that your hyperlink tags work properly 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 response to semantic HTML, the <head> part of an HTML doc is the place metadata ought to go. (Metadata is info that describes knowledge. And HTML hyperlink tags are thought of metadata components.)
An HTML hyperlink tag could not work as anticipated if you happen to add it to the <physique>.
For example, putting your model sheet HTML hyperlink tag within the <physique> part might trigger a delay in loading the model of that net 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>.
(It’s also possible to search </head> to search out the place the <head> part ends.)
Look by the code to make sure the hyperlink tags in your HTML are inside the <head> and </head> tags. In the event that they aren’t, both transfer them or attain out to your net 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 listing of HTML hyperlink tag attributes and their values above to make sure you’re utilizing the best ones.
Incorporating Deprecated Attributes
Deprecated—that means outdated—attributes could not work. As a result of trendy browsers sometimes part out assist for them.
Organizations just like the World Huge Internet Consortium (W3C) could determine to deprecate attributes for varied causes. Like altering expertise.
For instance, the rev attribute was beforehand used to indicate 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="writer" href="related-document.html">
Different deprecated attributes for the HTML hyperlink tag embrace:
- charset: Defines the encoding of the linked useful resource
- strategies: Supplies details about the features or actions that may very well be carried out on a linked object
- goal: Specifies whether or not the linked doc ought to load in a window or body
Test your code for any of those attributes. And change them with one thing extra appropriate if wanted.
Test for HTML Hyperlink Tag Points on Your Website
Use a diagnostic instrument like Semrush’s Website Audit to trace technical points in your web site. Together with ones that come up from errors inside your HTML hyperlink tags.
Right here’s how.
Open Website 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 it is advisable to enhance.
Click on on the “Points” tab.
This shows a listing of technical points along with your web site.
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. (Sluggish pages would possibly profit from utilizing the fetchpriority attribute inside your HTML hyperlink tag.)
You may click on “Why and the best way to repair it” subsequent to every subject to higher perceive and deal with the issue.
Cleansing up these points helps you create an amazing person expertise in your web site. And optimize your pages so serps can simply crawl, index, and rank them in search outcomes.
Strive Website Audit free of charge.