The **`<link>`** element in HTML defines relationships between the current document and an external source. The `<link>` element is mostly used to link [stylesheets](https://developer.mozilla.org/en-US/docs/Glossary/CSS) or site icons. The `<link>` element is an empty element that only contains attributes.

All major browsers support the `<link>` element when used for linking stylesheets.

# Attributes

The `<link>` element includes the following attributes:

* **`crossorigin`**: Defines how [cross-origin](https://developer.mozilla.org/en-US/docs/Glossary/CORS) requests are to be handled.
* **`href`**: The absolute or relative #key# URL: Uniform Resource Locator #key# of the linked resource.
* **`hreflang`**: The language of the text in the linked resource; this attribute should only be used if `href` is present.
* **`media`**: The type of device the linked document will be displayed on.
* **`referrerpolicy`**: Defines which [referrer](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer) should be used when fetching the resource.
* **`rel`**: A required attribute that specifies the relationship between the current document and the linked resource.
* **`sizes`**: The dimensions of the linked resource; this is only applicable when an icon is linked.
* **`title`**: A preferred or alternate stylesheet.
* **`type`**: The media type of the linked resource.

> Note: You can view an exhaustive list of attributes [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link).

# Usage

Generally, the `<link>` tag is nested under the `<head>` tag. The code below shows how to use the `<link>` tag:

```HTML
<head>
     <link href="main.css" rel="stylesheet">
</head>
```

The above code will import all the style rules defined in the linked stylesheet. These rules can be overridden by using the `<style>` element directly in the current document.

You can also use the `<link>` element to provide alternate stylesheets, as shown below:

```HTML
<link href="first.css" rel="stylesheet" title="First Stylesheet">
<link href="second.css" rel="alternate stylesheet" title="Second Stylesheet">
<link href="third.css" rel="alternate stylesheet" title="Third Stylesheet">
```

The first `<link>` tag is the default stylesheet used in the example shown above. The other `<link>` tags have their `rel` attribute set to `alternate stylesheet`, which specifies to the document that these stylesheets are alternatives to the default. Thus, viewers of a page can choose which particular stylesheet they wish to see.

> Note: You can find further examples of the `<link>` element's usage [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link).

# Example

The code below shows how the `<link>` element works:

 

<html>
 <head>
   <link href="main.css" rel="stylesheet">
 </head>
 <body>
   <p>This text should be blue.</p>
 </body>
</html>

codemirror

# Explanation

The `<link>` element in `line 3` of the HTML code links the CSS file to the current document. As a result, the styling rules are imported, and the output text appears to be blue in color. 

What is the <link> element in HTML?

The <link> element in HTML defines relationships between documents primarily for linking stylesheets, with various attributes for customization.