HTML <link> Tag
The <link> tag contains a link pointing to the external file with the CSS styles or scripts. Tag description, attributes and using examples.
HTML <link> Tag
The <link> tag sets the relationship between the current document and an external resource. It is generally used to link to an external CSS stylesheet.
The <link> tag can be used to link different versions of a page. This is useful if there are several translations of content.
An HTML document can have several <link> elements for loading different types of resources, such as stylesheets, icons, or preloaded content. All these <link> elements should be placed in the <head> section of the document (commonly before the closing </head> tag). Multiple <link> elements can be used in a single document.
Syntax
The <link> tag is empty, which means that the closing tag isn’t required. It contains only attributes. But in XHTML, the <link> tag must be closed (<link/>).
Example of the HTML <link> tag:
HTML <link> Tag
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>The appearance of the header is determined by the CSS styles specified in the external file.</h1>
<p>The appearance of the paragraph is determined by the CSS styles specified in the external file.</p>
</body>
</html>Result
Attributes
| Attribute | Value | Description |
|---|---|---|
| as | content_type | Specifies the type of content being loaded. Required when rel="preload". |
| charset | char_encoding | Defines the coding of the linked document. Obsolete in HTML5. |
| crossorigin | anonymous use-credentials | Configures CORS settings for the linked resource. |
| href | URL | Defines the URL of the external file. |
| hreflang | language_code | Defines the text language of the linked document. |
| integrity | hash_value | Enables subresource integrity to verify fetched resources. |
| media | media_query | Defines the device, for which the styles will be applied. |
| rel | alternate author bookmark dns-prefetch first help icon last license next nofollow noreferrer pingback preload prefetch prev search stylesheet tag preconnect manifest modulepreload | Defines the relationship between the current document and the linked file. Common values: stylesheet (links a CSS file), icon (links a favicon), preload (preloads a resource), alternate (links to an alternate version of the document). |
| rev | reversed relationship | Defines the relationship between the current and linked documents. Obsolete in HTML5. |
| sizes | Width x Height | Sets the size of associated icons. Used only with rel="icon". |
| type | media_type | Defines the MIME-type (specification for network transfer of various types of files) of the linked document. Note: When linking a stylesheet, type="text/css" is optional and defaults to CSS. |
The <link> tag also supports Global Attributes and the Event Attributes.
Practice
What are the attributes of the HTML <a> tag?