Purpose and content model
Link connects a document to another resource or describes a relationship; style contains an embedded stylesheet; base changes how relative URLs are resolved. These elements belong to metadata workflows and have different consequences. A stylesheet link can affect the whole page, while a base URL can silently redirect every relative image, script, and hyperlink.
Link and base are void elements. Style contains CSS text. In ordinary pages, place these elements in head. Use an external stylesheet for shared rules across many pages and a small style element when a self-contained example is genuinely useful.
Syntax and working example
<head>
<link rel="stylesheet" href="/assets/site.css">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<style>body { margin: 0; font-family: system-ui; }</style>
</head>Supported attributes and behavior
Link commonly uses rel, href, media, type, crossorigin, integrity, referrerpolicy, and, for resource hints, as and fetchpriority where applicable. A stylesheet normally needs rel="stylesheet" and href. Style supports media and nonce in addition to global attributes; text/css need not be repeated. Base uses href and target; only the first relevant base declaration takes effect. A preload needs the correct destination and request settings to be reused by the later request.
Another practical pattern
<head>
<base href="https://example.org/guides/">
<link rel="stylesheet" href="guide.css">
</head>
<!-- guide.css resolves to https://example.org/guides/guide.css -->Accessibility and browser notes
Ensure content remains usable while styles load or fail. Print styles can remove navigation without removing the document's essential meaning. If a restrictive Content Security Policy is deployed, authorize styles using its intended nonce or hash mechanism rather than weakening the policy to make an example work.
Common mistakes
Base affects fragment-only links too, so a link to #details can resolve against the base document instead of the current URL. Excessive preloads compete with important resources. Integrity hashes must match exact resource bytes and suitable cross-origin behavior.
Verify your implementation
Use the browser Network panel to inspect resolved URLs, response types, and duplicate downloads. Disable the stylesheet once to review source order. Test relative links after adding base; the correct visual appearance does not prove the navigation still targets the intended page.
Standard status and sources
Standard; browser availability must be checked independently of specification status.