HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

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>

Output

Browser Output

html

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
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

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.

PreviousHTML <base> TagNextHTML <meta> Tag