HTML attribute: rel – HTML: HyperText Markup Language | MDN

Indicates an alternate representation of the current document. Valid for <link>, <a>, and <area>, the meaning depends on the values of the other attributes.

  • With the stylesheet keyword on a <link>, it creates an alternate stylesheet.
     
    

    <

    link

    rel

    =

    "

    stylesheet

    "

    href

    =

    "

    default.css

    "

    />

    <

    link

    rel

    =

    "

    alternate stylesheet

    "

    href

    =

    "

    highcontrast.css

    "

    title

    =

    "

    High contrast

    "

    />

  • With an hreflang attribute that differs from the document language, it indicates a translation.
  • With the type attribute, it indicates that the referenced document is the same content in a different format. For example, with type="application/rss+xml" it creates a hyperlink referencing a syndication feed.

    <

    link

    rel

    =

    "

    alternate

    "

    type

    =

    "

    application/atom+xml

    "

    href

    =

    "

    posts.xml

    "

    title

    =

    "

    Blog

    "

    />

  • Both the hreflang and type attributes specify links to versions of the document in an alternative format and language, intended for other media:

    <

    link

    rel

    =

    "

    alternate

    "

    href

    =

    "

    /fr/html/print

    "

    hreflang

    =

    "

    fr

    "

    type

    =

    "

    text/html

    "

    media

    =

    "

    print

    "

    title

    =

    "

    French HTML (for printing)

    "

    />

    <

    link

    rel

    =

    "

    alternate

    "

    href

    =

    "

    /fr/pdf

    "

    hreflang

    =

    "

    fr

    "

    type

    =

    "

    application/pdf

    "

    title

    =

    "

    French PDF

    "

    />

Note: The obsolete rev="made" is treated as rel="alternate"

Indicates the author of the current document or article. Relevant for <link>, <a>, and <area> elements, the author keyword creates a hyperlink. With <a> and <area>, it indicates the linked document (or mailto:) provides information about the author of the nearest <article> ancestor if there is one, otherwise the entire document. For <link>, it represents the author of the entire document.

Relevant as the rel attribute value for the <a> and <area> elements, the bookmark provides a permalink for ancestor section, which is the nearest ancestor <article> or <section>, if there is at least one, otherwise, the nearest heading sibling or ancestor descendant, to the next.

Valid for <link>, it defines the preferred URL for the current document, which is useful for search engines.

Relevant for the <link> element both in the <body> and <head>, it tells the browser to preemptively perform DNS resolution for the target resource’s origin. Useful for resources the user will likely need, it helps reduce latency and thereby improves performance when the user does access the resources as the browser preemptively performed DNS resolution for the origin of the specified resource. See dns-prefetch described in resource hints.

Relevant to <form>, <a>, and <area>, it indicates the referenced document is not part of the current site. This can be used with attribute selectors to style external links in a way that indicates to the user that they will be leaving the current site.

Relevant to <form>, <link>, <a>, and <area>, the help keyword indicates that the linked to content provides context-sensitive help, providing information for the parent of the element defining the hyperlink, and its children. When used within <link>, the help is for the whole document. When included with <a> and <area> and supported, the default cursor will be help instead of pointer.

Valid with <link>, the linked resource represents the icon, a resource for representing the page in the user interface, for the current document.

The most common use for the icon value is the favicon:

<

link

rel

=

"

icon

"

href

=

"

favicon.ico

"

/>

If there are multiple <link rel="icon">s, the browser uses their media attribute, type, and sizes attributes to select the most appropriate icon. If several icons are equally appropriate, the last one is used. If the most appropriate icon is later found to be inappropriate, for example because it uses an unsupported format, the browser proceeds to the next-most appropriate, and so on.

Note: Prior to Firefox 83 the crossorigin attribute was not supported for rel="icon" there is also an open issue for Chrome.

Note: Apple’s iOS does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a webpage icon for Web Clip or a start-up placeholder.
Instead it uses the non-standard apple-touch-icon and apple-touch-startup-image respectively.

Note: The shortcut link type is often seen before icon, but this link type is non-conforming, ignored and web authors must not use it anymore.

Valid on the <a>, <area>, <form>, <link> elements, the license value indicates that the hyperlink leads to a document describing the licensing information; that the main content of the current document is covered by the copyright license described by the referenced document. If not inside the <head> element, the standard doesn’t distinguish between a hyperlink applying to a specific part of the document or to the document as a whole. Only the data on the page can indicate this.

<

link

rel

=

"

license

"

href

=

"

#license

"

/>

Note: Although recognized, the synonym copyright is incorrect and must be avoided.

Web app manifest. Requires the use of the CORS protocol for cross-origin fetching.

Useful for improved performance, and relevant to the <link> anywhere in the document, setting rel="modulepreload" tells the browser to preemptively fetch the script (and dependencies) and store it in the document’s module map for later evaluation. modulepreload links can ensure network fetching is done with the module ready (but not evaluated) in the module map before it is necessarily needed. See also link types: modulepreload.

Relevant to <form>, <link>, <a>, and <area>, the next values indicates that the current document is a part of a series, and that the next document in the series is the referenced document. When included in a <link>, browsers may assume that document will be fetched next, and treat it as a resource hint.

Relevant to <form>, <a>, and <area>, the nofollow keyword tells search engine spiders to ignore the link relationship. The nofollow relationship may indicate the current document’s owner does not endorse the referenced document. It is often included by Search Engine Optimizers pretending their link farms are not spam pages.

Relevant to <form>, <a>, and <area>, creates a top-level browsing context that is not an auxiliary browsing context if the hyperlink would create either of those to begin with (i.e., has an appropriate target attribute value). In other words, it makes the link behave as if window.opener were null and target="_parent" were set.

This is the opposite of opener.

Relevant to <form>, <a>, and <area>, including this value makes the referrer unknown (no Referer header will be included), and creates a top-level browsing context as if noopener were also set.

Creates an auxiliary browsing context if the hyperlink would otherwise create a top-level browsing context that is not an auxiliary browsing context (i.e., has “_blank” as target attribute value). Effectively, the opposite of noopener.

Gives the address of the pingback server that handles pingbacks to the current document.

Specifies that the user agent should preemptively connect to the target resource’s origin.

Specifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation.

Specifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by the as attribute (and the priority associated with the corresponding destination).

Specifies that the user agent should preemptively fetch the target resource and process it in a way that helps deliver a faster response in the future.

Similar to the next keyword, relevant to <form>, <link>, <a>, and <area>, the prev values indicates that the current document is a part of a series, and that the link references a previous document in the series is the referenced document.

Note: The synonym previous is incorrect and should not be used.

Relevant to <form>, <link>, <a>, and <area> elements, the search keywords indicates that the hyperlink references a document whose interface is specially designed for searching in the current document, site, and related resources, providing a link to a resource that can be used to search.

If the type attribute is set to application/opensearchdescription+xml the resource is an OpenSearch plugin that can be easily added to the interface of some browsers like Firefox or Internet Explorer.

Valid for the <link> element, it imports an external resource to be used as a stylesheet. The type attribute is not needed as it’s a text/css stylesheet, as that is the default value. If it’s not a stylesheet of type text/css it is best to declare the type.

While this attribute defines the link as being a stylesheet, the interaction with other attributes and other key terms within the rel value impact whether the stylesheet is downloaded and/or used.

When used with the alternate keyword, it defines an alternative style sheet. In this case, include a non-empty title.

The external stylesheet will not be used or even downloaded if the media does not match the value of the media attribute.

Requires the use of the CORS protocol for cross-origin fetching.

Valid for the <a>, and <area> elements, it gives a tag (identified by the given address) that applies to the current document. The tag value denotes that the link refers to a document describing a tag applying to the document on which it is located. This link type is not meant for tags within a tag cloud, as those tags apply to a group of pages, whereas the tag value of the rel attribute is for a single document.

Rate this post