HTML Tags
HTML <link> Tag
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.
Syntax
html
<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
html
<!DOCTYPE html>
<html>
<head>
<title>Link Tag Example</title>
<link rel="stylesheet" href="https://ik.imagekit.io/html5andcss3/wordpress-imports/2025/10/example.css">
</head>
<body>
<h1>This heading is styled with an external CSS file.</h1>
</body>
</html>Browser Support
Chrome | Edge | Firefox | 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.