Movatterモバイル変換


[0]ホーム

URL:


MDN Web Docs

HTML attribute: rel

Therel attribute defines the relationship between a linked resource and the current document. Valid on<link>,<a>,<area>, and<form>, the supported values depend on the element on which the attribute is found.

The type of relationships is given by the value of therel attribute, which, if present, must have a value that is an unordered set of unique space-separated keywords. Differently from aclass name, which does not express semantics, therel attribute must express tokens that are semantically valid for both machines and humans. The current registries for the possible values of therel attribute are theIANA link relation registry, theHTML Living Standard, and the freely-editableexisting-rel-values page in the microformats wiki,as suggested by the Living Standard. If arel attribute not present in one of the three sources above is used some HTML validators (such as theW3C Markup Validation Service) will generate a warning.

The following table lists some of the most important existing keywords. Every keyword within a space-separated value should be unique within that value.

rel valueDescription<link><a> and<area><form>
alternateAlternate representations of the current document.LinkLinkNot allowed
authorAuthor of the current document or article.LinkLinkNot allowed
bookmarkPermalink for the nearest ancestor section.Not allowedLinkNot allowed
canonicalPreferred URL for the current document.LinkNot allowedNot allowed
compression-dictionaryLink to acompression dictionary that can be used to compress future downloads for resources on this site.LinkNot allowedNot allowed
dns-prefetchTells the browser to preemptively perform DNS resolution for the target resource's origin.External ResourceNot allowedNot allowed
externalThe referenced document is not part of the same site as the current document.Not allowedAnnotationAnnotation
expectAllows the page to berender-blocked until the essential parts of the document are parsed so it will render consistently.LinkNot allowedNot allowed
helpLink to context-sensitive help.LinkLinkLink
iconAn icon representing the current document.External ResourceNot allowedNot allowed
licenseIndicates that the main content of the current document is covered by the copyright license described by the referenced document.LinkLinkLink
manifestWeb app manifest.LinkNot allowedNot allowed
meIndicates that the current document represents the person who owns the linked content.LinkLinkNot allowed
modulepreloadTells to browser to preemptively fetch the script and store it in the document's module map for later evaluation. Optionally, the module's dependencies can be fetched as well.External ResourceNot allowedNot allowed
nextIndicates that the current document is a part of a series and that the next document in the series is the referenced document.LinkLinkLink
nofollowIndicates that the current document's original author or publisher does not endorse the referenced document.Not allowedAnnotationAnnotation
noopenerCreates 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 appropriatetarget attribute value).Not allowedAnnotationAnnotation
noreferrerNoReferer header will be included. Additionally, has the same effect asnoopener.Not allowedAnnotationAnnotation
openerCreates 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" astarget attribute value).Not allowedAnnotationAnnotation
pingbackGives the address of the pingback server that handles pingbacks to the current document.External ResourceNot allowedNot allowed
preconnectSpecifies that the user agent should preemptively connect to the target resource's origin.External ResourceNot allowedNot allowed
prefetchSpecifies that the user agent should preemptively fetch and cache the target resource as it is likely to be required for a followup navigation.External ResourceNot allowedNot allowed
preloadSpecifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination given by theas attribute (and the priority associated with the corresponding destination).External ResourceNot allowedNot allowed
prerenderSpecifies 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.External ResourceNot allowedNot allowed
prevIndicates that the current document is a part of a series and that the previous document in the series is the referenced document.LinkLinkLink
privacy-policyGives a link to a information about the data collection and usage practices that apply to the current document.LinkLinkNot allowed
searchGives a link to a resource that can be used to search through the current document and its related pages.LinkLinkLink
stylesheetImports a style sheet.External ResourceNot allowedNot allowed
tagGives a tag (identified by the given address) that applies to the current document.Not allowedLinkNot allowed
terms-of-serviceLink to the agreement, or terms of service, between the document's provider and users who wish to use the document.LinkLinkNot allowed

Therel attribute is relevant to the<link>,<a>,<area>, and<form> elements, but some values only relevant to a subset of those elements. Like all HTML keyword attribute values, these values are case-insensitive.

Therel attribute has no default value. If the attribute is omitted or if none of the values in the attribute are supported, then the document has no particular relationship with the destination resource other than there being a hyperlink between the two. In this case, on<link> and<form>, if therel attribute is absent, has no keywords, or if not one or more of the space-separated keywords above, then the element does not create any links.<a> and<area> will still created links, but without a defined relationship.

Value

alternate

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 thestylesheet keyword on a<link>, it creates analternate stylesheet.

    html
    <!-- a persistent style sheet --><link rel="stylesheet" href="default.css" /><!-- alternate style sheets --><link  rel="alternate stylesheet"  href="highcontrast.css"  title="High contrast" />
  • With anhreflang attribute that differs from the document language, it indicates a translation.

  • With thetype attribute value of"application/rss+xml" or"application/atom+xml", it creates a hyperlink referencing a syndication feed.

    html
    <link  rel="alternate"  type="application/atom+xml"  href="posts.xml"  title="Blog" />
  • Otherwise, it creates a hyperlink referencing an alternate representation of the current document, whose nature is given by thehreflang andtype attributes.

    • Ifhreflang is given alongsidealternate, and the value ofhreflang is different from the current document's language, it indicates that the referenced document is a translation.
    • Iftype is given alongsidealternate, it indicates that the referenced document is an alternative format (such as a PDF).
    • Thehreflang andtype attributes may both be given alongsidealternate.
    html
    <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" />
author

Indicates the referenced document provides further information about the author of the current document or article. Relevant for<link>,<a>, and<area> elements.

With<a> and<area>, it indicates the linked document (ormailto:) provides information about the author of the nearest<article> ancestor if there is one, otherwise the entire document.

With<link>, it represents the author of the entire document.

Note:For historical reasons, the obsolete attribute valuerev="made" is treated asrel="author".

bookmark

Relevant as therel attribute value for the<a> and<area> elements. Gives a permalink for the nearest ancestor<article> element, if there is one. If there is no ancestor<article> element, gives a permalink for the section the linking element is most closely associated with.

canonical

Valid for<link>, it defines the preferred URL for the current document, which helps search engines reduce duplicate content.

compression-dictionaryExperimental

Valid for<link>, it defines acompression dictionary that can be used to compress future downloads for resources on this site so the download sizes of those resources are smaller than standard compression.

dns-prefetch

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. Seedns-prefetch described inresource hints.

external

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.

expectExperimental

Allows the page to berender-blocked until the essential parts of the document are parsed so it will render consistently. Note that render-blocking occurs only when supplemented with theblocking="render" attribute.

help

Relevant to<form>,<link>,<a>, and<area>, thehelp 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 defaultcursor will behelp instead ofpointer.

icon

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 theicon value is the favicon:

html
<link rel="icon" href="favicon.ico" />

If there are multiple<link rel="icon">s, the browser uses theirmedia,type, andsizes 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:Thecrossorigin attribute is not supported forrel="icon" in Chromium-based browsers. See theopen Chromium issue.

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

Note:Theshortcut link type is often seen beforeicon, but this link type is non-conforming, ignored andweb authors must not use it anymore.

license

Valid on the<a>,<area>,<form>,<link> elements, thelicense 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.

html
<link rel="license" href="#license" />

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

manifest

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

modulepreload

Useful for improved performance, and relevant to the<link> anywhere in the document, settingrel="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 alsomodulepreload.

next

Relevant to<form>,<link>,<a>, and<area>, thenext 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.

nofollow

Relevant to<form>,<a>, and<area>, thenofollow 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.

noopener

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 appropriatetarget attribute value). In other words, it makes the link behave as ifwindow.opener were null andtarget="_parent" were set.

This is the opposite ofopener.

noreferrer

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

opener

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" astarget attribute value). Effectively, the opposite ofnoopener.

pingback

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

preconnect

Provides a hint to the browser suggesting that it open a connection to the linked website in advance, without disclosing any private information or downloading any content, so that when the link is followed the linked content can be fetched more quickly.

prefetch

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

preload

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

prerenderDeprecatedNon-standard

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, for example by fetching its subresources or performing some rendering.

prev

Similar to thenext keyword, relevant to<form>,<link>,<a>, and<area>, theprev 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 synonymprevious is incorrect and should not be used.

privacy-policy

Valid for<a>,<area>, and<link> elements, theprivacy-policy value indicates that the referenced document is the Privacy Policy which describes the data collection and usage practices of the current document.

search

Relevant to<form>,<link>,<a>, and<area> elements, thesearch 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 thetype attribute is set toapplication/opensearchdescription+xml the resource is anOpenSearch plugin that can be easily added to the interface of Firefox.

stylesheet

Valid for the<link> element, it imports an external resource to be used as a stylesheet. Thetype attribute is not needed if it's atext/css stylesheet, as that is the default value. If it's not a stylesheet of typetext/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 thealternate keyword, it defines an alternative style sheet. In this case, include a non-emptytitle.

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

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

tag

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 thetag value of therel attribute is for a single document.

terms-of-service

Valid for<a>,<area>, and<link> elements, theterms-of-service value indicates that the referenced document is the Terms of Service that describes the agreements between the current document's provider and users who wish to use the document provided.

Non-standard values

apple-touch-icon

Specifies the icon for a web application on an iOS device.

Specifications

Specification
HTML
# linkTypes
HTML
# attr-hyperlink-rel
HTML
# attr-form-rel

Browser compatibility

html.elements.link.rel

html.elements.a.rel

html.elements.area.rel

html.elements.form.rel

See also

Help improve MDN

Learn how to contribute.

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp