Scroll to top
Read Time: 2 min

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!



<!DOCTYPE html>
<html lang="en">
  <link rel="stylesheet" href="styles.css" type="text/css">

Browser Support

The <link> element is supported in all modern browsers. Read more on


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).

A link element must have either a 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 for rel="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 (for rel="preload" and rel="modulepreload").
  • blocking: Whether the element is potentially render-blocking.
  • color: Color to use when customizing a site's icon (for rel="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:

<link rel="alternate" href="/en/page.html" hreflang="en" type="text/html">
<link rel="alternate" href="/fr/page.html" hreflang="fr" type="text/html">
<link rel="alternate" href="/es/page.html" hreflang="es" type="text/html">


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:

  • input
  • keygen
  • link
  • meta
  • param
  • source
  • track
  • wbr
  • 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

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.