HTML <hyperlink> tags assist outline relationships between assets in your web site.
On this submit, we’ll discover what HTML hyperlink tags are, the right 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 assets (recordsdata or different property).
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="kinds.css">
</head>
<physique>
<!-- The content material of your webpage goes right here -->
</physique>
</html>
Browsers that at present help HTML hyperlink tags embrace:
- Chrome
- Edge
- Safari
- Opera
- Firefox
Browsers that don’t help HTML hyperlink tags won’t render them correctly. That means they may 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 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 format of a webpage—like background coloration.
For a mode sheet to work, you need 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 supposed.
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 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) supposed area of a doc. Which is beneficial when you’ve got content material in numerous languages.
Why?
As a result of with the hreflang attribute, serps can show essentially the most related search outcomes to customers in numerous nations.
For instance, for those who Google “semrush weblog” in the USA, you’ll see this outcome:
However for those who’re in Spain, you’ll see this:
You’ll be able to 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 might enhance a web site’s efficiency, velocity, and person 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’ll be able to set assets to preload on a page-by-page foundation.
A Actually Easy Syndication (RSS) feed is a method for web sites to share content material and updates.
And customers can subscribe to totally different web sites by means 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 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 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 right 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 monitor video employee |
Specifies the sort or function 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 right way to fetch assets. Which might 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/kinds.css”> |
|
hreflang |
You could use ISO 639-1 or the ISO 3166-1 alpha-2 nation and language codes |
Signifies the language (and presumably the supposed nation) of the linked useful resource |
<hyperlink rel=”alternate” hreflang=”fr” href=”https://instance.com/fr/web page”> |
|
imagesizes |
Top x width or % 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 acceptable 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 |
Offers a hash worth for verifying the integrity of the linked useful resource. Which may give you an additional layer of safety when loading assets. |
<hyperlink rel=”stylesheet” href=”kinds.css” integrity=”sha256-BBq2K8ntPke0J1Xy2ftV07cHJZaMjRZEmmgvsq81IB4=”> |
|
media |
all display screen speech aspect-ratio coloration color-index grid peak monochrome orientation decision scan width |
Specifies the kind of system 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=”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 peak x width measurement |
Used to point sizes of icons. It may 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 monitor of linked model sheets. It doesn’t have an effect on how the browser applies them. |
<hyperlink rel=”stylesheet” href=”kinds.css” title=”Primary Model Sheet”> |
|
sort |
Numerous 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=”kinds.css” sort=”textual content/css”> |
Listed here are errors individuals often make when including the <hyperlink> tag to their web site. By avoiding them, you may be sure 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 response to semantic HTML, the <head> part of an HTML doc is the place metadata ought to go. (Metadata is info that describes information. And HTML hyperlink tags are thought of metadata components.)
An HTML hyperlink tag could not work as anticipated for those who add it to the <physique>.
As an illustration, 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’ll be able to examine 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 may as well search </head> to search out the place the <head> part ends.)
Look by means 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 net developer for assist.
Utilizing Incorrect Attributes or Values
You’ll be able to solely use particular values related to every attribute. And a few attributes can solely work with different attributes.
For instance, for those who use “rel=preload” in your hyperlink tag, you should additionally use the as attribute.
Check with our record of HTML hyperlink tag attributes and their values above to make sure you’re utilizing the suitable ones.
Incorporating Deprecated Attributes
Deprecated—that means outdated—attributes could not work. As a result of trendy browsers sometimes section out help for them.
Organizations just like the World Extensive Internet Consortium (W3C) could resolve 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 individuals 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 embrace:
- charset: Defines the encoding of the linked useful resource
- strategies: Offers 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
Examine your code for any of those attributes. And substitute them with one thing extra appropriate if wanted.
Examine for HTML Hyperlink Tag Points on Your Web site
Use a diagnostic instrument like Semrush’s Web site 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 Web 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 Web site Audit.”
As soon as your audit is full, you’ll obtain an in depth report of what you could 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.
Web site Audit additionally spots hreflang errors, canonical tag errors, and sluggish pages. (Sluggish pages may profit from utilizing the fetchpriority attribute inside your HTML hyperlink tag.)
You’ll be able to click on “Why and the right way to repair it” subsequent to every challenge to raised perceive and handle the issue.
Cleansing up these points helps you create a fantastic person expertise in your web site. And optimize your pages so serps can simply crawl, index, and rank them in search outcomes.
Strive Web site Audit without spending a dime.
