HTML <link> Tag

The <link> tag sets the relationship between the current page and a linked resource. This tag is mostly used to include a stylesheet or a favicon into a page. Links are placed in the <head> section of the page.

HTML Tag

Example

#

A <link> that includes a stylesheet into a page.

<head>
  <link rel="stylesheet" type="text/css" href="/tutorial/style.css">
</head>

Using <link>

The <link> tag specifies the relationship between the current page and an external source.

This element is primarily used to bring stylesheets and site icons (favicon) into a page.

The <link> tag is placed in the <head> section of the page.

The <link> element can also be used to preload and prefetch other resources.

More Examples

A <link> that adds a stylesheet to the page.
The paragraph uses one of the included CSS classes.

This paragraph is styled with external CSS.

<!DOCTYPE html>
<html lang="en">
 <head>
  <link rel="stylesheet" type="text/css" href="/tutorial/style.css">
 </head>
 <body>
  <p class="papaya">This paragraph is styled with external CSS.</p>
 </body>
</html>


Here is the content of the stylesheet:

.aliceblue { background-color: aliceblue; color: steelblue; padding: 10px; }
.papaya { background-color: papayawhip; color: indianred; padding: 10px; }

Attributes for <link>

This table lists the <link> tag attributes.

Attribute Value Description
href URL Linked document location
rel stylesheet
icons
canonical
dns-prefetch
author
help
license
prev
next
search
alternate
Required. Refers to the relationship between the current document and an external source.
type media-type Linked document media type
id    identifier Defines a unique identifier for the link element.
media media-query Indicates what device the linked document will be displayed to
sizes height x width
any
For rel="icon", this represents the icon size
hreflang language-code Linked document language
crossorigin anonymous,
use-credentials
Indicates how the element handles cross-origin requests

For additional global attributes see our global attributes list.


Obsolete Attributes

Do not use the attributes listed below.  They are no longer valid on the link tag in HTML5.

Attribute Description Alternative
charset Sets character encoding of linked URL. Content-Type HTTP header
rev Specifies a reverse link. The opposite of rel. n/a

Did you know?

Did you know?

Using <link> to set the page icon

To configure the page icon set the rel attribute to icon.

A <link> that sets the web page favicon:

<link rel="icon" href="/favicon.ico">

Page Tags

The <link> tag is part of a group of tags that define the structure of a web page. This group is referred to as the Page tag group. Together, these tags allow you to create solid, well-structured web pages.

Here is the complete list.

Element Description
<!DOCTYPE> Must appear on the first line of a page. Specifies the HTML version
<html> Defines the root container for an HTML document
<head> Creates a head container that holds page-level metadata elements
<meta> Provides metadata about a web page
<link> Defines a link to an external source, such as a style sheet
<base> Sets the base URL for all relative URLs on a page
<script> Adds JavaScript to a page. Either client- or server-side
<style> Adds CSS style elements to a page
<title> Specifies the page title that displays in the browser's tab
<body> Specifies a container for the content of the page, with text, links, images, etc.

Browser support

Here is when <link> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

Guides