Linking External Resources

Understanding the <link> Element

The <link> element establishes a relationship between an HTML document and another resource, such as an external CSS stylesheet or website icon.

The <link> element is most commonly placed in the document's <head> and uses attributes to describe the relationship and identify the resource. Unlike the <a> element, it does not create a hyperlink that users click within the page content.

Link Element Syntax

The link element is a void element, which means it does not contain content and does not use an end tag.

<link rel="stylesheet" href="/css/styles.css">

The rel attribute describes the relationship between the HTML document and the resource, while the href attribute identifies the resource's URL.

Because link is a void element, it is not written with a closing tag:

<link rel="stylesheet" href="/css/styles.css">

Where to Place the <link> Element

The link element is commonly placed inside the document's head.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Webpage</title>
    <link rel="stylesheet" href="/css/styles.css">
  </head>
  <body>
    <h1>My Webpage</h1>
  </body>
</html>

Placing a stylesheet link in the head allows the browser to discover and load the CSS needed to render the page.

Some link relationships have additional placement rules, but the document head is where beginners will encounter the element most often.

The rel Attribute

The rel attribute describes the relationship between the current HTML document and the resource identified by href.

<link rel="stylesheet" href="/css/styles.css">

In this example, rel="stylesheet" tells the browser that the linked resource is a stylesheet associated with the document.

Different rel values describe different relationships. For example:

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

Here, rel="icon" identifies the linked resource as an icon representing the webpage or website.

The value of rel is important because the browser needs to know how the linked resource relates to the current document.

The href Attribute

The href attribute specifies the URL of the linked resource.

<link rel="stylesheet" href="/css/styles.css">

The URL can be written using an appropriate relative, root-relative, or absolute URL.

Relative URL

<link rel="stylesheet" href="css/styles.css">

Root-Relative URL

<link rel="stylesheet" href="/css/styles.css">

Absolute URL

<link rel="stylesheet" href="https://www.example-web.site/css/styles.css">

The correct URL form depends on where the resource is located and how the website is organized.

Linking External Stylesheets

One of the most common uses of the link element is connecting an HTML document to an external CSS stylesheet.

<link rel="stylesheet" href="/css/styles.css">

The HTML document contains the page's structure and content, while the external CSS file contains styling rules.

For example, the external file styles.css might contain:

body {
  font-family: Arial, sans-serif;
}
h1 {
  font-size: 2rem;
}

When the browser encounters the stylesheet link, it retrieves the CSS resource and applies the relevant rules to the HTML document.

Using external stylesheets is especially useful because one CSS file can be shared by many HTML pages, making a website's design easier to maintain and update.

The example below uses an external stylesheet linked to the HTML document. Experiment with the HTML and CSS to see how the stylesheet affects the page.

Play in Editor

Linking Website Icons

The link element can identify an icon associated with a webpage or website.

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

Browsers may display the icon in places such as browser tabs, bookmarks, favorites, or other parts of the browser interface.

An image format and size can also be identified when appropriate:

<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">

Websites may provide more than one icon resource so browsers and devices can choose an appropriate version for a particular use.

The <link> vs <a> Element

The link and a elements both work with URLs, but they serve different purposes.

The link element establishes a relationship between the document and another resource:

<link rel="stylesheet" href="/css/styles.css">

The a element creates a hyperlink that users can follow:

<a href="/html5/tutorials/elements.html">HTML Elements</a>

The link element does not create visible linked text in the webpage. The a element contains link content and is used within the page when users need to navigate to another location or resource.

A simple way to remember the distinction is that link connects the document with a resource, while a creates a hyperlink within the document that a user can follow.

Using Multiple <link> Elements

Unlike the base element covered in the previous tutorial, an HTML document can contain multiple link elements.

<link rel="stylesheet" href="/css/layout.css">
<link rel="stylesheet" href="/css/tutorial.css">
<link rel="icon" href="/favicon.ico">

Each link element establishes its own relationship with a resource.

A website can therefore use multiple external stylesheets, icons, or other linked resources when needed.

Complete Example

The following document uses link elements for an external stylesheet and a website icon:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Webpage</title>
    <link rel="stylesheet" href="/css/styles.css">
    <link rel="icon" href="/favicon.ico">
  </head>
  <body>
    <h1>My Webpage</h1>
    <p>This webpage uses an external stylesheet.</p>
  </body>
</html>

The first link tells the browser that /css/styles.css is a stylesheet for the document, while the second identifies /favicon.ico as a website icon.

Common <link> Element Mistakes

Most problems with the link element involve incorrect URLs, missing relationship information, or confusion between link and other HTML elements.

Using an incorrect path in the href attribute.
Forgetting the rel="stylesheet" relationship when linking a CSS file.
Trying to place visible link text inside the link element.
Adding a closing </link> tag even though link is a void element.
Confusing the link element with the a element used for hyperlinks.
Assuming every linked resource uses the same rel value.
Adding specialized link relationships without understanding what they do.

When an external stylesheet or icon does not load, checking the rel value and the URL in href is a good place to begin troubleshooting.

<link> Element Best Practices

Clear link relationships and accurate resource URLs make the document head easier to understand and help browsers process external resources correctly.

Use the correct rel value for the relationship being established.
Use an accurate href URL for the linked resource.
Place stylesheet links in the document head.
Use external stylesheets when styles need to be shared across multiple pages.
Remember that link is a void element and does not use an end tag.
Use the a element rather than link when creating hyperlinks for users.
Add specialized link relationships only when they serve a clear purpose.

For a typical beginner webpage, an external stylesheet is the most important use of the link element to understand.

Summary

The link element establishes relationships between an HTML document and external resources. It is a void element commonly placed in the document's head, with the rel attribute describing the relationship and the href attribute identifying the resource.

External CSS stylesheets and website icons are common uses of the link element. Other relationships can support additional purposes, but they should be added only when needed. Unlike the a element, link does not create a hyperlink that users click within the page.