Where does the link tag go in HTML?

The link element belongs in the head section. It is metadata — not visible page content — and tells the browser about resources the page needs.

What is the difference between link and a tags?

The link tag loads document resources such as CSS and icons in the head. The a tag creates clickable hyperlinks in the body for user navigation.

What does rel="stylesheet" do?

It tells the browser that the linked file is a CSS stylesheet. Combined with href pointing to the CSS file URL, the browser fetches and applies those styles to the page.

Is type="text/css" required on link?

No. In HTML5, type is optional for stylesheets because CSS is the default. You can write link rel="stylesheet" href="styles.css" without a type attribute.

Is the link tag supported in all browsers?

Yes. The link element is a core HTML metadata tag with universal browser support, including legacy Internet Explorer.

HTML <link> Tag

Q: What is the HTML link tag used for?

The HTML link element connects external resources to a document. It is most commonly used for stylesheets, favicons, preloading assets, and defining relationships between documents.

Beginner

⏱️ 6 min read

📚 Updated: Jun 2026

🎯 3 Examples

Document Head & Resources

HTML link tag tutorial — stylesheets, favicons, and preload in the document head

Overview

What You’ll Learn

By the end of this tutorial, you’ll connect external CSS, favicons, and preloaded assets with <link> in the document head.

Core Syntax

Use rel and href to declare linked resources.

Stylesheets

Load external CSS with rel="stylesheet".

Favicons

Set tab icons with rel="icon".

Preload

Fetch critical fonts and assets early.

link vs a

Know when to use head resources vs body links.

Best Practices

Place links in <head> and pick correct rel values.

Fundamentals

What Is the `<link>` Tag?

The link element (<link>) connects external resources to an HTML document. It lives in the <head> and tells the browser about stylesheets, icons, fonts, and other assets the page needs — without displaying content on the page itself.

💡

Not the same as <a>

The <link> tag loads document resources in the head. The <a> tag creates clickable hyperlinks in the body for users to navigate. Do not confuse them.

Every modern website uses <link> for CSS files and favicons. Performance-focused sites also use it for preloading fonts, preconnecting to CDNs, and declaring canonical URLs.

Foundation

📝 Syntax

<link> is a void element placed inside <head>:

syntax.html

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Syntax Rules

Place <link> inside <head>, not in the body.
It is a void element — no closing tag in HTML5.
Always include a meaningful rel attribute describing the relationship.
Use href to point to the resource URL or path.

Cheat Sheet

⚡ Quick Reference

rel value	Code Snippet	Purpose
`stylesheet`	`<link rel="stylesheet" href="styles.css">`	External CSS
`icon`	`<link rel="icon" href="favicon.ico">`	Browser tab icon
`preload`	`<link rel="preload" href="font.woff2" as="font">`	Early asset fetch
`preconnect`	`<link rel="preconnect" href="https://fonts.gstatic.com">`	Early connection to origin
`canonical`	`<link rel="canonical" href="https://…">`	Preferred URL for SEO
`alternate`	`<link rel="alternate" hreflang="fr" href="…">`	Language or feed alternate

Comparison

⚖️ `<link>` vs `<a>`

Both involve URLs, but they serve completely different roles:

Feature	`<link>`	`<a>`
Location	`<head>`	`<body>`
Purpose	Load resources (CSS, icons, fonts)	User navigation hyperlinks
Visible	No — metadata only	Yes — clickable content
Key attribute	`rel` + `href`	`href`
Element type	Void (self-closing)	Container with closing tag

Comparison

⚖️ External `<link>` vs Inline `<style>`

Approach	When to use	Notes
`<link rel="stylesheet">`	Shared CSS across pages	Cached by browser, best for production
`<style>`	Page-specific or critical CSS	Inline in head, not cached separately
Both together	Critical CSS inline + main CSS linked	Common performance pattern

Reference

🧰 Attributes

The <link> element uses relationship and resource attributes plus globals:

rel Required

Defines the relationship: stylesheet, icon, preload, preconnect, canonical, and more.

rel="stylesheet"

href Required*

URL or path to the linked resource.

href="/css/main.css"

type Optional

MIME type of the resource. Optional for CSS in HTML5.

type="image/png"

as preload

Required with rel="preload" — tells the browser the asset type: font, script, style, etc.

as="font"

crossorigin CORS

Required for cross-origin font preloads. Use anonymous or use-credentials.

crossorigin="anonymous"

media Responsive

Apply a stylesheet only for matching media queries, e.g. print or mobile layouts.

media="(max-width: 768px)"

* href is required for most rel values that reference an external resource.

Hands-On

Examples Gallery

Stylesheets, favicons, and font preloading — the three most common <link> patterns.

Live Preview

A styled card demonstrating CSS loaded via an external stylesheet link:

External CSS Applied

The <link rel="stylesheet"> tag connects CSS files to your HTML document.

Linking a Stylesheet

The most common use of <link> — connecting an external CSS file. The type attribute is optional in HTML5.

stylesheet.html

<head>
  <link rel="stylesheet" href="styles.css">
</head>

Try It Yourself

📚 Common Use Cases

Use <link> for external CSS, favicons, font preloading, CDN preconnect hints, canonical URLs for SEO, alternate language pages, and web app manifest files.

Favicon

Set the small icon shown in browser tabs and bookmarks with rel="icon".

favicon.html

<link rel="icon" type="image/png" href="favicon.png">

Try It Yourself

Preloading Resources

Fetch critical assets early with rel="preload". Use as to declare the resource type and crossorigin for cross-origin fonts.

preload.html

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Try It Yourself

Design

How <link> Affects Page Styling

The <link> tag itself has no visual appearance. It loads external CSS that styles your page content:

rel="stylesheet" Loads external CSS

media Conditional stylesheets

preload Faster font/CSS load

preconnect Early CDN connection

responsive-link.css

/* Main stylesheet for all screens */
<link rel="stylesheet" href="main.css">

/* Print-only stylesheet */
<link rel="stylesheet" href="print.css" media="print">

/* Mobile layout stylesheet */
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">

Styled card (simulates linked CSS result)

Typography & Colors

External CSS controls fonts, spacing, colors, and layout across your entire site.

A11y

♿ Accessibility

Although <link> is not interactive, it affects how users experience your page:

Stylesheets affect readability — linked CSS controls contrast, font size, and focus styles.
Use media thoughtfully — load print or mobile stylesheets without hiding essential content from any user group.
Favicons aid recognition — help users identify your site in tabs and bookmark lists.
Do not use link for navigation — use <a> in the body for user-facing links so keyboard and screen reader users can interact with them.

🧠 How <link> Works

Author adds link in head

Declare rel and href for each external resource.

Markup

Browser parses rel

Determines whether to fetch CSS, an icon, or preload an asset.

Parsing

Resource is fetched

Browser downloads the file from href and applies or stores it.

Network

Styled, branded, optimized page

CSS styles the layout, favicons brand the tab, and preloaded assets render faster.

Compatibility

Universal Browser Support

The <link> element is fully supported in all browsers. Modern rel values like preload and preconnect are supported in all current browsers.

✓ Baseline · Since HTML 2

Resource linking that works everywhere

Stylesheets, favicons, and document relationships via <link> are supported from legacy IE through the latest mobile browsers.

100% Core tag support

Google Chrome All versions · Desktop & Mobile

Full support

Mozilla Firefox All versions · Desktop & Mobile

Full support

Apple Safari All versions · macOS & iOS

Full support

Microsoft Edge All versions · Chromium & Legacy

Full support

Internet Explorer IE 6+ · Legacy environments

Full support

Opera All modern versions

Full support

<link> tag 100% supported

Bottom line: Use <link> confidently for CSS, favicons, and resource hints in every production environment today.

Wrap Up

Conclusion

The <link> tag is essential for connecting external resources to your HTML documents. From stylesheets and favicons to performance hints like preload and preconnect, it keeps your head metadata organized and your pages fast and styled.

Remember: place links in <head>, choose the correct rel value, and use <a> — not <link> — for user-facing navigation.

View Examples Gallery Try a stylesheet link

Pro Tips

💡 Best Practices

✅ Do

Place all <link> elements inside <head>
Use rel="stylesheet" for external CSS files
Add crossorigin when preloading cross-origin fonts
Use root-relative paths like /css/main.css on your site

❌ Don’t

Confuse <link> with <a> for navigation
Put <link> in the body for standard resources
Preload every asset — only critical ones
Rely on deprecated type="text/css" as if it were required

Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about `<link>`

Bookmark these before you ship — they’ll keep your head metadata correct and your pages fast.

Core concepts

🔗 01

Head Resource

<link> connects external files to a document.

Foundation

🎨 02

Stylesheets

rel="stylesheet" loads external CSS.

CSS

⚖️ 03

Not <a>

Link is for resources; anchor is for navigation.

Comparison

🖼️ 04

Favicons

rel="icon" sets the browser tab icon.

Branding

⚡ 05

Preload

Fetch critical fonts and assets early.

Performance

✓ 06

Universal Support

Works in every browser, including legacy IE.

Compatibility

❓ Frequently Asked Questions

What is the HTML link tag used for?

It connects external resources such as CSS, favicons, and fonts to an HTML document via the <head>.

Where does the link tag go?

Inside <head>. It is metadata, not visible page content.

What is the difference between link and a?

<link> loads resources in the head. <a> creates clickable links in the body for users.

Is type="text/css" required?

No. In HTML5, type is optional for stylesheets because CSS is the default.

What does rel="preload" do?

It tells the browser to fetch a resource early. Use with as to specify the asset type, such as font or script.

Is link supported in all browsers?

Yes. Full universal support for core link functionality in all modern and legacy browsers.

Practice HTML Link Tags

Try stylesheets, favicons, and font preloading in the interactive editor.

Try It Yourself →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML li Tag HTML listing Tag

HTML <link> Tag

What You’ll Learn

Core Syntax

Stylesheets

Favicons

Preload

link vs a

Best Practices

What Is the <link> Tag?

📝 Syntax

Syntax Rules

⚡ Quick Reference

⚖️ <link> vs <a>

⚖️ External <link> vs Inline <style>

🧰 Attributes

Examples Gallery

Live Preview

Linking a Stylesheet

📚 Common Use Cases

Favicon

Preloading Resources

How <link> Affects Page Styling

♿ Accessibility

🧠 How <link> Works

Author adds link in head

Browser parses rel

Resource is fetched

Styled, branded, optimized page

Universal Browser Support

Resource linking that works everywhere

Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Six truths every developer should know about <link>

Head Resource

Stylesheets

Not <a>

Favicons

Preload

Universal Support

❓ Frequently Asked Questions

🧩 Related HTML Topics

HTML <li> Tag

HTML listing Tag

HTML <a> Tag

HTML <head> Tag

Practice HTML Link Tags

About the author

What Is the `<link>` Tag?

⚖️ `<link>` vs `<a>`

⚖️ External `<link>` vs Inline `<style>`

Six truths every developer should know about `<link>`