link
link
(resource link) elements allow a document to reference other resources, such as stylesheets, icons and images of different sizes.
Content category
- Metadata
- If allowed in the body (has an
itemprop
attribute or arel
attribute with only body-ok values:dns-prefetch
,modulepreload
,pingback
,preconnect
,prefetch
,preload
,prerender
andstylesheet
):
Pseudo-classes
N/A
Attributes
href
sets the address of the resource.crossorigin
configures CORS behaviour.rel
specifies the nature of the relationship:alternate
has a meaning that changes based on other attributes:- When combined with
stylesheet
, indicates that the stylesheet is an alternate sheet. In this case, thetitle
attribute is required. - If
type="application/(?:atom|rss)+xml
, references a syndication feed. All such links should follow this format. - In all other cases, it creates a link to an alternate representation of the current document:
- When combined with the
hreflang
attribute, indicates that a translation is available. - When combined with the
type
attribute, indicates that a conversion of the document to a different format is available.
- When combined with the
- When combined with
canonical
sets the preferred URL for the document.author
references the other of the document.help
links to context-sensitive help.icon
references an icon to reference the document.manifest
links to the web application manifest.modulepreload
hints that the browser should pre-emptively fetch the specified module and keep it in the module map.license
references the document's license.next
andprev
link to the next and previous documents in a series.pingback
specifies the URL of a pingback server to handle pingbacks to the document.preload
hints that the browser must pre-emptively fetch the resource specified in thehref
attribute, treating it as the type specified in theas
attribute. This can help prevent resource fetches from blocking the rendering of the document.search
links to a resource that facilitates searching the document.stylesheet
imports a stylesheet.- Resource hints:
dns-prefetch
hints that the browser should pre-emptively resolve the specified resource's origin.preconnect
hints that the browser should pre-emptively connect to the resource's origin.prefetch
hints that the browser should pre-emptively fetch and cache the resource.prerender
is similar to preload, except for navigation to another document. It hints that the browser should fetch the linked resource and any subresources.
media
specifies which media the resource is relevant to, in the form of a media query list.integrity
specifies integrity metadata for SRI.hreflang
specifies the language of the linked resource as a BCP 47 language tag.type
advises the browser of the linked resource's MIME type.referrerpolicy
indicates how to set theReferer
HTTP header:no-referrer
never sends it.no-referrer-when-downgrade
means the header won't be sent when downgrading from HTTPS.origin
sends just the of the resource (roughly the scheme, host and port).origin-when-cross-origin
will include the path only for resources on the same origin.unsafe-url
always includes the origin and path, and is unsafe because it may leak the origin and path to insecure origins.
- If
rel="preload"
orrel="prefetch"
:as
specifies the type of resource, used to specify theAccept
HTTP header:style
forrel="stylesheet"
.image
for `img` (Private) and `picture` (Private) elements withsrcset
orimageset
attributes, SVGimage
elements or CSS*-image
rules.font
for CSS@font-face
.script
for `script` elements (Private) or WorkerimportScripts
.worker
for Worker and SharedWorker.audio
for `audio` elements (Private).video
for `video` elements (Private).document
for `frame` (Private) and `iframe` (Private) elements.embed
for `embed` elements (Private).fetch
for fetch and XHR.object
for `object` elements (Private).track
for `track` elements (Private).]].
- If
rel
references an icon (e.g.icon
, or a non-standard variety):sizes
denotes the sizes of visual media in the resource:any
indicates the icon can scale to any size as it's a vector.<pixel width>x<pixel height>
indicates a specific size. Though not often used as most image formats store only a single image, it can be a space-separated list of sizes.
- If
rel="preload"
andas="image"
:imagesizes
specifies the size of the image using media queries (likeimg
'ssizes
attribute).imagesrcset
specifies a set of sources that are specific to different display pixel densities (likeimg
'ssrcset
attribute).
- If
rel="stylesheet"
:disabled
specifies that the stylesheet should not be loaded during page load and will be loaded on-demand if the attribute is later removed or changed tofalse
.title
semantics are altered: it defines an alternate stylesheet, and the attribute value is its name.
References
Backlinks