Syntax
<link rel="stylesheet" href="styles.css">Examples
Linking a Stylesheet
The most common use — connecting an external CSS file.
<link rel="stylesheet" href="/css/main.css">Favicon
Setting the small icon shown in browser tabs.
<link rel="icon" type="image/png" href="/favicon.png">Preloading a Font
Hinting the browser to fetch a critical resource earlier.
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>Attributes
- rel (stylesheet | icon | preload | canonical): The relationship between the current document and the linked resource
- href (URL): The path to the linked resource
- type (string): The MIME type of the linked resource
Best practices
- Place stylesheet <link> tags in <head> so styles are ready before content renders, avoiding a flash of unstyled content
- Use rel="preload" sparingly, only for genuinely critical above-the-fold resources
- Always include a favicon link — browsers will request /favicon.ico by default even without one, so being explicit avoids wasted requests
- Use rel="canonical" to tell search engines the preferred URL when the same content is reachable from multiple paths
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<meta>
The <meta> element provides metadata about the HTML document that is not displayed on the page itself — used for things like character encoding, viewport configuration, page descriptions for search engines, and social media preview data. Meta tags live inside the <head> and are void (self-closing) elements.<base>
The <base> element specifies a base URL and/or target for all relative URLs in a document. It must appear inside <head>, and a document should have no more than one <base> element. Once set, every relative link, image src, and form action on the page resolves against it unless individually overridden.<style>
The <style> element contains embedded CSS rules that apply directly to the current document, as an alternative to linking an external stylesheet with <link>. It normally lives inside <head>, though the scoped nature of modern CSS means it can technically appear in body content too.<title>
The <title> element defines the title of the document, shown in the browser tab, bookmarks, and search engine results. Every HTML document should have exactly one <title>, placed inside <head>. It must contain only text — no nested elements.
The <meta> element provides metadata about the HTML document that is not displayed on the page itself — used for things like character encoding, viewport configuration, page descriptions for search engines, and social media preview data. Meta tags live inside the <head> and are void (self-closing) elements.<base>
The <base> element specifies a base URL and/or target for all relative URLs in a document. It must appear inside <head>, and a document should have no more than one <base> element. Once set, every relative link, image src, and form action on the page resolves against it unless individually overridden.<style>
The <style> element contains embedded CSS rules that apply directly to the current document, as an alternative to linking an external stylesheet with <link>. It normally lives inside <head>, though the scoped nature of modern CSS means it can technically appear in body content too.<title>
The <title> element defines the title of the document, shown in the browser tab, bookmarks, and search engine results. Every HTML document should have exactly one <title>, placed inside <head>. It must contain only text — no nested elements.