In this section, we will learn what HTML <link> element is and how to use it.

What is <link> Tag in HTML and How to Link a CSS File to HTML?

We use HTML <link> element in documents to create a link to an external resource.

The external resources will be added to the current document then.

You might be asking, what’s the difference between HTML <a> and <link> elements here?

Well, the difference lies in the way they are executed:

For HTML <a> element, browsers simply just render the link on a webpage and as long as that link is not clicked by users or programmatically by languages like JavaScript, browsers won’t send a request to get the external document.

But in case of HTML <link>, this is the job of browsers to automatically call the external resource and load its data in the current document.

There are different types of external resources that we can use HTML <link> element to load them in a document, but for the majority of cases, we use the <link> element to load external CSS stylesheets into a webpage.

HTML <link> Tag Syntax:

<link href = “external resource URL”>

HTML <link> Tag Values

HTML <link> element is a single element and we mainly work with its attributes!

For example, in order to set the address of an external resource, we use the “href” attribute.

Linking to a stylesheet

As mentioned, HTML <link> element is mainly used to import an external CSS file.

For this to happen, we mainly use three attributes of HTML <link> element.

• href: using href attribute, we can set the address (URL) of the target CSS file.
• type: this attribute is used to set the type of the external file so that browsers know what type of file they are dealing with.
• rel: This attribute is used to set the relation between the current document and the external file. For example, if the external file is the stylesheet of the current document, thus the value for this attribute would be “stylesheet”.

Example: Link CSS in HTML

See the Pen Link CSS in HTML by Omid Dehghan (@odehghan) on CodePen.

HTML <link> Tag Attributes

Name	Description
crossorigin	With this attribute, we can specify how cross-origin requests should be handled.
href	With this attribute, we specify the location (URL) of the target external resource.
hreflang	With this attribute, we can specify the language of the target document (the document that the current document is linked to)
media	This attribute specifies what media or device the target document is optimized for.
referrerpolicy	With this attribute, we can specify if the target server should know the address of the current document where the request is sent from. If yes, under what conditions.
rel	This attribute specifies the relation between the current document and the target document. For example, if the target document is a CSS file, thus the relation would be “stylesheet” because that document contains the style of the current document.
sizes	This attribute specifies the size of the target linked resource. Use this attribute only when the target resource is an image, and the rel is set to the icon.
title	With this attribute, we can set a title for the target linked document. The content of this attribute is mainly informational that describes the target linked document.
type	This attribute specifies the type of the linked document.