The
<link>tag defines the relationship between the current HTML document and an external resource.
It is most commonly used to link external CSS stylesheets, but can also be used for favicons, preconnect, alternate languages, and RSS feeds.This tag always appears inside the
<head>element and does not have a closing tag.
Syntax
<link rel="stylesheet" href="styles.css">Attributes:
- rel – Specifies the relationship between the current document and the linked resource.
- href – The URL of the external file (CSS, favicon, etc.).
- type – Defines the MIME type (optional, e.g.,
text/css). - media – Specifies the media type for which the linked document is optimized (e.g.,
screen,print).
Example
<!DOCTYPE html>
<html>
<head>
<title>Link Tag Example</title>
<link rel="stylesheet" href="https://html5andcss3.org/wp-content/uploads/2025/10/example.css">
</head>
<body>
<h1>This heading is styled with an external CSS file.</h1>
</body>
</html>Output
Browser Output
There is no direct output of the link tag but it can be used to call the stylesheet, which will impact on output style. Please use our tryit editor to see the output.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
All major browser supports <link> tag.
Notes
- The
<link>tag is self-closing and does not require an end tag. - It must be placed inside the
<head>section, before visible content. - Commonly used for CSS, favicons, and preloading resources.
- Unlike the
<style>tag, the<link>tag connects to an external file instead of embedding styles directly in HTML. - You can include multiple
<link>tags to load multiple resources.
Conclusion
The <link> tag is essential for separating content from design, allowing external files like CSS or icons to be linked to your HTML document.
It helps maintain cleaner, modular, and reusable code — a best practice in modern web development.
