HTML rel Attribute

HTML <link>

rel

Attribute

❮ HTML <link> tag

Example

Import an external stylesheet:

<link rel=”stylesheet” href=”styles.css”>

Try it Yourself »

More examples below.

Definition and Usage

The required rel attribute specifies the relationship between the current document and the linked document/resource.

Browser Support

Attribute

rel
Yes
Yes
Yes
Yes
Yes

Syntax

<link rel=”value“>

Attribute Values

Value
Description

alternate
Provides a link to an alternate version of the document (i.e. print page, translated or mirror).
Example: <link rel=”alternate” type=”application/atom+xml” title=”W3Schools News” href=”/blog/news/atom”>

author
Provides a link to the author of the document

dns-prefetch
Specifies that the browser should preemptively perform DNS resolution for the target resource’s origin

help
Provides a link to a help document. Example: <link rel=”help” href=”/help/”>

icon
Imports an icon to represent the document.
Example: <link rel=”icon” href=”favicon.ico” type=”image/x-icon”>

license
Provides a link to copyright information for the document

next
Provides a link to the next document in the series

pingback
Provides the address of the pingback server that handles pingbacks to the current document

preconnect
Specifies that the browser should preemptively connect to the target resource’s origin.

prefetch
Specifies that the browser should preemptively fetch and cache the target resource as it is likely to be required for a follow-up navigation

preload
Specifies that the browser agent must preemptively fetch and cache the target resource for current navigation according to the destination given by the “as” attribute (and the priority associated with that destination).

prerender
Specifies that the browser should pre-render (load) the specified
webpage in the background. So, if the user navigates to this page, it speeds
up the page load (because the page is already loaded). Warning!
This wastes the user’s bandwidth! Only use prerender if you are absolutely sure
that the webpage is required at some point in the user’s journey

prev
Indicates that the document is a part of a series, and that the previous document in the series is the referenced document

search
Provides a link to a resource that can be used to search through the current document and its related pages.

stylesheet
Imports a style sheet

More Examples

Example

Here is how to add a favicon to a website:

<!DOCTYPE html>
<html>
<head>
  <title>My Page
Title</title>
  <link rel=”icon” type=”image/x-icon” href=”favicon.ico”>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

❮ HTML <link> tag