The HTML <link> element defines a relationship between the current document and other resources, such as stylesheets or scripts. You’ll find at least one on almost every webpage you ever come across!
Example
Syntax
1 |
<!DOCTYPE html>
|
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<link rel="stylesheet" href="styles.css" type="text/css"> |
5 |
</head>
|
6 |
</html>
|
Browser Support
The <link> element is supported in all modern browsers. Read more on caniuse.com.
Attributes
A link element supports Global Attributes in HTML. Global Attributes are common to all HTML elements and can be used on all of them (though they may not have much of an effect on some of them).
rel attribute or an itemprop attribute, but not both.There are a number of additional attributes supported:
-
href: Address of the hyperlink -
crossorigin: How the element handles crossorigin requests. -
rel: Relationship between the document containing the hyperlink and the destination resource being fetched. -
media: Applicable media. -
integrity: Integrity metadata used in Subresource Integrity checks. -
hreflang: Language of the linked resource. -
type: Hint for the type of referenced resource. -
referrerpolicy: Referrer policy for fetches initiated by the element. -
sizes: Sizes of icons forrel="icon". -
imagesrcset: Images to use in different situations for screen resolutions. -
imagesizes: Image sizes for different page layouts. -
as: Potential destination for a preload request (forrel="preload"andrel="modulepreload"). -
blocking: Whether the element is potentially render-blocking. -
color: Color to use when customizing a site's icon (forrel="mask-icon") -
disabled: Whether the link is disabled.
Attribute Example
Here’s an example of how a <link> uses the rel="" and hreflang="" attributes to establish a relationship between the current document and versions in other languages:
1 |
<link rel="alternate" href="/en/page.html" hreflang="en" type="text/html"> |
2 |
<link rel="alternate" href="/fr/page.html" hreflang="fr" type="text/html"> |
3 |
<link rel="alternate" href="/es/page.html" hreflang="es" type="text/html"> |
Content
The link element is a void element, which means it supports no content model and you can’t pass it any type of content.
Here’s a list of all void elements:
Related HTML Elements
- Whilst the
<link>element is a type of hyperlink, it shouldn’t be confused with the<a>(anchor) element; the hyperlinks by which we navigate HTML documents and files. - The
<base>element is related in that it provides the base URL for all relative URLs within a document.
Learn More
HTML Elements
