The <link> tag loads a linked resource into a page.
This tag is used to include a stylesheet or a favicon into a page.
Links are placed in the <head> section of the page.
This example <link> brings a stylesheet into the page.
<head>
<link rel="stylesheet" type="text/css" href="/tutorial/style.css">
</head>
The <link> tag specifies the relationship between a page and an external source.
It is primarily used to bring stylesheets and site icons (favicon) into a page.
But it can also be used to preload and prefetch other resources.
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; }
This table lists the <link> tag attributes.
| Attribute | Value | Description |
|---|---|---|
| href | URL | Linked document location |
| rel |
stylesheet icon 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.
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 |
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">
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, they 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. |
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 |
