HTML-Attribut: rel
Das rel
-Attribut definiert die Beziehung zwischen einer verlinkten Ressource und dem aktuellen Dokument. Es ist gültig auf <link>
, <a>
, <area>
und <form>
. Die unterstützten Werte hängen vom Element ab, auf dem das Attribut gefunden wird.
Die Art der Beziehung wird durch den Wert des rel
-Attributs festgelegt. Wenn es vorhanden ist, muss der Wert eine ungeordnete Menge von eindeutigen, durch Leerzeichen getrennten Schlüsselwörtern sein. Anders als ein class
-Name, der keine Semantik ausdrückt, muss das rel
-Attribut Tokens ausdrücken, die semantisch sowohl für Maschinen als auch für Menschen gültig sind. Die aktuellen Register für die möglichen Werte des rel
-Attributs sind das IANA-Link Relations-Register, der HTML Living Standard und die frei bearbeitbare existing-rel-values page im Microformats-Wiki, wie vorgeschlagen vom Living Standard. Wenn ein rel
-Attribut verwendet wird, das in einer der drei oben genannten Quellen nicht vorhanden ist, werden einige HTML-Validierer (wie der W3C Markup Validation Service) eine Warnung generieren.
Die folgende Tabelle listet einige der wichtigsten existierenden Schlüsselwörter auf. Jedes Schlüsselwort innerhalb eines durch Leerzeichen getrennten Wertes sollte einzigartig sein.
rel -Wert |
Beschreibung | <link> |
<a> und <area> |
<form> |
---|---|---|---|---|
alternate |
Alternative Darstellungen des aktuellen Dokuments. | Link | Link | Nicht erlaubt |
author |
Autor des aktuellen Dokuments oder Artikels. | Link | Link | Nicht erlaubt |
bookmark |
Permalink für den nächstgelegenen übergeordneten Abschnitt. | Nicht erlaubt | Link | Nicht erlaubt |
canonical |
Bevorzugte URL für das aktuelle Dokument. | Link | Nicht erlaubt | Nicht erlaubt |
dns-prefetch |
Weist den Browser an, die DNS-Auflösung für den Ursprung der Zielressource vorab durchzuführen. | Externe Ressource | Nicht erlaubt | Nicht erlaubt |
external |
Das referenzierte Dokument gehört nicht zur selben Website wie das aktuelle Dokument. | Nicht erlaubt | Annotation | Annotation |
expect |
Ermöglicht es der Seite, render-blocked zu sein, bis die wesentlichen Teile des Dokuments geparst sind, sodass es konsistent gerendert wird. | Link | Nicht erlaubt | Nicht erlaubt |
help |
Link zu kontextsensitiver Hilfe. | Link | Link | Link |
icon |
Ein Icon, das das aktuelle Dokument repräsentiert. | Externe Ressource | Nicht erlaubt | Nicht erlaubt |
license |
Gibt an, dass der Hauptinhalt des aktuellen Dokuments durch die im referenzierten Dokument beschriebene Urheberrechtslizenz abgedeckt ist. | Link | Link | Link |
manifest |
Web App Manifest. | Link | Nicht erlaubt | Nicht erlaubt |
me |
Gibt an, dass das aktuelle Dokument die Person repräsentiert, die die verlinkte Ressource besitzt. | Link | Link | Nicht erlaubt |
modulepreload |
Weist den Browser an, das Skript vorab zu holen und es in der Modulkarte des Dokuments für eine spätere Auswertung zu speichern. Optional können auch die Abhängigkeiten des Moduls geholt werden. | Externe Ressource | Nicht erlaubt | Nicht erlaubt |
next |
Gibt an, dass das aktuelle Dokument Teil einer Serie ist und das nächste Dokument in der Serie das referenzierte Dokument ist. | Link | Link | Link |
nofollow |
Gibt an, dass der ursprüngliche Autor oder Herausgeber des aktuellen Dokuments das referenzierte Dokument nicht befürwortet. | Nicht erlaubt | Annotation | Annotation |
noopener |
Erstellt einen Top-Level-Browsingkontext, der kein Hilfsbrowsingkontext ist, wenn der Hyperlink einen dieser Kontexte erstellen würde (d.h. hat einen passenden target -Attributwert). |
Nicht erlaubt | Annotation | Annotation |
noreferrer |
Kein Referer -Header wird inkludiert. Zusätzlich hat es denselben Effekt wie noopener . |
Nicht erlaubt | Annotation | Annotation |
opener |
Erstellt einen Hilfsbrowsingkontext, wenn der Hyperlink andernfalls einen Top-Level-Browsingkontext erzeugen würde, der kein Hilfsbrowsingkontext ist (d.h. hat "_blank" als target -Attributwert). |
Nicht erlaubt | Annotation | Annotation |
pingback |
Gibt die Adresse des Pingback-Servers an, der die Pingbacks zum aktuellen Dokument verarbeitet. | Externe Ressource | Nicht erlaubt | Nicht erlaubt |
preconnect |
Gibt an, dass der Benutzeragent sich vorab mit dem Ursprung der Zielressource verbinden soll. | Externe Ressource | Nicht erlaubt | Nicht erlaubt |
prefetch |
Gibt an, dass der Benutzeragent die Zielressource vorab holen und zwischenspeichern soll, da sie wahrscheinlich für eine nachfolgende Navigation benötigt wird. | Externe Ressource | Nicht erlaubt | Nicht erlaubt |
preload |
Gibt an, dass der Benutzeragent die Zielressource vorab holen und zwischenspeichern muss, um die aktuelle Navigation entsprechend dem potenziellen Ziel anzugeben, das durch das as -Attribut gegeben wird (und der Priorität, die mit dem entsprechenden Ziel verbunden ist). |
Externe Ressource | Nicht erlaubt | Nicht erlaubt |
prerender |
Gibt an, dass der Benutzeragent die Zielressource vorab holen und verarbeiten soll, um in der Zukunft eine schnellere Reaktion zu ermöglichen. | Externe Ressource | Nicht erlaubt | Nicht erlaubt |
prev |
Gibt an, dass das aktuelle Dokument Teil einer Serie ist und das vorherige Dokument in der Serie das referenzierte Dokument ist. | Link | Link | Link |
privacy-policy |
Gibt einen Link zu Informationen über die Datenerfassungs- und Nutzungspraktiken, die für das aktuelle Dokument gelten, an. | Link | Link | Nicht erlaubt |
search |
Gibt einen Link zu einer Ressource an, die zum Durchsuchen des aktuellen Dokuments und seiner verwandten Seiten verwendet werden kann. | Link | Link | Link |
stylesheet |
Importiert ein Stylesheet. | Externe Ressource | Nicht erlaubt | Nicht erlaubt |
tag |
Gibt ein Tag (identifiziert durch die angegebene Adresse) an, das für das aktuelle Dokument gilt. | Nicht erlaubt | Link | Nicht erlaubt |
terms-of-service |
Link zu den Geschäftsbedingungen zwischen dem Anbieter des Dokuments und den Benutzern, die das Dokument nutzen möchten. | Link | Link | Nicht erlaubt |
Das rel
-Attribut ist relevant für die Elemente <link>
, <a>
, <area>
und <form>
. Einige Werte sind jedoch nur für eine Teilmenge dieser Elemente relevant. Wie alle HTML-Schlüsselwort-Attributwerte sind diese Werte nicht case-sensitiv.
Das rel
-Attribut hat keinen Standardwert. Wenn das Attribut weggelassen wird oder wenn keine der Werte im Attribut unterstützt werden, hat das Dokument keine bestimmte Beziehung mit der Zielressource außer der Existenz eines Hyperlinks. In diesem Fall erstellen <link>
und <form>
keine Links, wenn das rel
-Attribut fehlt, keine Schlüsselwörter hat oder wenn nicht eins oder mehrere der oben genannten Leerzeichen-getrennten Schlüsselwörter vorhanden sind. <a>
und <area>
erstellen weiterhin Links, jedoch ohne eine definierte Beziehung.
Werte
alternate
-
Gibt an, dass es eine alternative Darstellung des aktuellen Dokuments gibt. Gültig für
<link>
,<a>
und<area>
, hängt die Bedeutung von den Werten der anderen Attribute ab.-
Mit dem Schlüsselwort
stylesheet
auf einem<link>
wird ein altes Stylesheet erstellt.html<!-- a persistent style sheet --> <link rel="stylesheet" href="default.css" /> <!-- alternate style sheets --> <link rel="alternate stylesheet" href="highcontrast.css" title="High contrast" />
-
Mit einem
hreflang
-Attribut, das sich von der Dokumentsprache unterscheidet, wird eine Übersetzung angezeigt. -
Mit dem
type
-Attributwert"application/rss+xml"
oder"application/atom+xml"
wird ein Hyperlink erstellt, der auf ein Syndikations-Feed verweist.html<link rel="alternate" type="application/atom+xml" href="posts.xml" title="Blog" />
-
Andernfalls wird ein Hyperlink erstellt, der auf eine alternative Darstellung des aktuellen Dokuments verweist, deren Art durch die Attribute
hreflang
undtype
angegeben wird.- Wenn
hreflang
nebenalternate
angegeben ist und der Wert vonhreflang
sich von der Sprache des aktuellen Dokuments unterscheidet, zeigt es an, dass das referenzierte Dokument eine Übersetzung ist. - Wenn
type
nebenalternate
angegeben ist, zeigt es an, dass das referenzierte Dokument ein alternatives Format hat (z.B. ein PDF). - Die Attribute
hreflang
undtype
können beide nebenalternate
angegeben werden.
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" />
- Wenn
-
-
Gibt an, dass das referenzierte Dokument weitere Informationen über den Autor des aktuellen Dokuments oder Artikels liefert. Relevant für
<link>
,<a>
und<area>
-Elemente.Mit
<a>
und<area>
gibt es an, dass das verlinkte Dokument (odermailto:
) Informationen über den Autor des nächsten<article>
-Vorfahren enthält, falls es einen gibt, andernfalls über das gesamte Dokument.Mit
<link>
repräsentiert es den Autor des gesamten Dokuments.Hinweis: Aus historischen Gründen wird der veraltete Attributwert
rev="made"
wierel="author"
behandelt. bookmark
-
Relevant als
rel
-Attributwert für die<a>
und<area>
-Elemente. Gibt einen Permalink für das nächste<article>
-Vorfahren-Element, falls vorhanden, an. Falls kein Vorfahre<article>
-Element existiert, wird ein Permalink für den Abschnitt angegeben, mit dem das verlinkende Element am engsten verbunden ist. canonical
-
Gültig für
<link>
, es definiert die bevorzugte URL für das aktuelle Dokument, was Suchmaschinen hilft, doppelte Inhalte zu reduzieren. dns-prefetch
-
Relevant für das
<link>
-Element sowohl im<body>
als auch im<head>
, es weist den Browser an, die DNS-Auflösung für den Ursprung der Zielressource vorab durchzuführen. Nützlich für Ressourcen, die der Benutzer wahrscheinlich benötigt, hilft es, Latenz zu reduzieren und dadurch die Leistung zu verbessern, wenn der Benutzer auf die Ressourcen zugreift, da der Browser die DNS-Auflösung für den Ursprung der angegebenen Ressource vorab durchgeführt hat. Siehe dns-prefetch beschrieben in resource hints. external
-
Relevant für
<form>
,<a>
und<area>
, es zeigt an, dass das referenzierte Dokument nicht Teil der aktuellen Website ist. Dies kann mit Attributselektoren verwendet werden, um externe Links so zu gestalten, dass sie dem Benutzer anzeigen, dass sie die aktuelle Seite verlassen. expect
Experimentell-
Ermöglicht es der Seite, render-blocked zu sein, bis die wesentlichen Teile des Dokuments geparst sind, sodass es konsistent gerendert wird. Beachten Sie, dass Render-Blocking nur auftritt, wenn es durch das
blocking="render"
-Attribut ergänzt wird.Hinweis: Siehe Den Seitenstatus stabilisieren, um konsistente Übergänge zwischen Dokumenten zu ermöglichen für weitere Informationen zu seiner Verwendung.
help
-
Relevant für
<form>
,<link>
,<a>
und<area>
, das Schlüsselworthelp
zeigt an, dass der verlinkte Inhalt kontext-sensitive Hilfe bietet und Informationen für das übergeordnete Element des Hyperlink-definierenden Elements und seine Kinder bereitstellt. Wenn innerhalb von<link>
verwendet, bezieht sich die Hilfe auf das gesamte Dokument. Wenn es mit<a>
und<area>
enthalten ist und unterstützt wird, wird der Standard-cursor
help
anstelle vonpointer
sein. icon
-
Gültig mit
<link>
, repräsentiert die verlinkte Ressource das Icon, eine Ressource zur Darstellung der Seite in der Benutzeroberfläche, für das aktuelle Dokument.Die häufigste Verwendung für den
icon
-Wert ist das Favicon:html<link rel="icon" href="favicon.ico" />
Wenn es mehrere
<link rel="icon">
gibt, verwendet der Browser derenmedia
,type
undsizes
-Attribute, um das geeignetste Icon auszuwählen. Wenn mehrere Icons gleich geeignet sind, wird das letzte verwendet. Wenn das am besten geeignete Icon später als ungeeignet befunden wird, weil beispielsweise ein nicht unterstütztes Format verwendet wird, fährt der Browser mit dem nächstbesten geeigneten fort, und so weiter.Hinweis: Das
crossorigin
-Attribut wird fürrel="icon"
in Chromium-basierten Browsern nicht unterstützt. Siehe das offene Chromium-Thema.Hinweis: Apples iOS verwendet diesen Linktyp nicht, noch das
sizes
-Attribut, wie andere mobile Browser, um ein Webseitenicon für Web Clip oder ein Start-Placeholder auszuwählen. Stattdessen verwendet es die nicht standardmäßigenapple-touch-icon
undapple-touch-startup-image
entsprechend.Hinweis: Der
shortcut
-Link-Typ wird oft voricon
gesehen, aber dieser Link-Typ ist nicht konform, ignoriert und Webautoren dürfen ihn nicht mehr verwenden. license
-
Gültig auf den
<a>
,<area>
,<form>
,<link>
Elementen, gibt derlicense
-Wert an, dass der Hyperlink zu einem Dokument führt, das die Lizenzinformationen beschreibt; dass der Hauptinhalt des aktuellen Dokuments durch die im referenzierten Dokument beschriebene Urheberrechtslizenz abgedeckt ist. Wenn es sich nicht im<head>
-Element befindet, unterscheidet der Standard nicht zwischen einem Hyperlink, der auf einen spezifischen Teil des Dokuments oder auf das gesamte Dokument angewendet wird. Nur die Daten auf der Seite können das angeben.html<link rel="license" href="#license" />
Hinweis: Obwohl erkannt, ist das Synonym
copyright
falsch und muss vermieden werden. manifest
-
Web App Manifest. Erfordert die Verwendung des CORS-Protokolls für Cross-Origin-Fetching.
modulepreload
-
Nützlich für verbesserte Leistung und relevant für das
<link>
überall im Dokument, informiertrel="modulepreload"
den Browser, das Skript vorab zu holen (und Abhängigkeiten) und es in der Modulkarte des Dokuments für eine spätere Auswertung zu speichern.modulepreload
Links können sicherstellen, dass das Netzwerk-Fetching durchgeführt wird, mit dem Modul bereit (aber nicht ausgewertet) in der Modulkarte, bevor es notwendigerweise benötigt wird. Siehe auchmodulepreload
. next
-
Relevant für
<form>
,<link>
,<a>
und<area>
, gibt dernext
-Wert an, dass das aktuelle Dokument Teil einer Serie ist und das nächste Dokument in der Serie das referenzierte Dokument ist. Wenn es in einem<link>
enthalten ist, können Browser annehmen, dass das Dokument als nächstes abgerufen wird, und es als Ressourcentipp behandeln. nofollow
-
Relevant für
<form>
,<a>
und<area>
, sagt das Schlüsselwortnofollow
Suchmaschinen-Crawlern, die Link-Beziehung zu ignorieren. Die nofollow-Beziehung kann angeben, dass der Eigentümer des aktuellen Dokuments das referenzierte Dokument nicht befürwortet. Es wird oft von Suchmaschinenoptimierern inkludiert, die so tun, als wären ihre Linkfarm keine Spam-Seiten. noopener
-
Relevant für
<form>
,<a>
und<area>
, erstellt einen Top-Level-Browsingkontext, der kein Hilfsbrowsingkontext ist, wenn der Hyperlink einen dieser Kontexte erstellen würde (d.h. hat einen passendentarget
-Attributwert). Mit anderen Worten, es lässt den Link verhalten, als obwindow.opener
null wäre undtarget="_parent"
gesetzt wäre.Dies ist das Gegenteil von
opener
. noreferrer
-
Relevant für
<form>
,<a>
und<area>
, inklusive dieses Wertes wird der Referrer unbekannt gemacht (keinReferer
-Header wird inkludiert) und erstellt einen Top-Level-Browsingkontext, als ob auchnoopener
gesetzt wäre. opener
-
Erstellt einen Hilfsbrowsingkontext, wenn der Hyperlink andernfalls einen Top-Level-Browsingkontext erzeugen würde, der kein Hilfsbrowsingkontext ist (d.h. hat
"_blank"
alstarget
-Attributwert). Praktisch das Gegenteil von noopener. pingback
-
Gibt die Adresse des Pingback-Servers an, der die Pingbacks zum aktuellen Dokument verarbeitet. Siehe die Pingback Specification.
preconnect
-
Bietet einen Hinweis an den Browser, dass er im Voraus eine Verbindung zur verlinkten Website öffnen soll, ohne private Informationen preiszugeben oder Inhalte herunterzuladen, sodass das verlinkte Inhalte schneller abgerufen werden können, wenn der Link gefolgt wird.
prefetch
-
Gibt an, dass der Benutzeragent die Zielressource vorab holen und zwischenspeichern soll, da sie wahrscheinlich für eine nachfolgende Navigation benötigt wird. Siehe prefetch für mehr Informationen.
preload
-
Gibt an, dass der Benutzeragent die Zielressource vorab holen und zwischenspeichern muss, für die aktuelle Navigation entsprechend dem potenziellen Ziel, das durch das
as
-Attribut angegeben wird (und der Priorität, die mit dem entsprechenden Ziel verbunden ist). Siehe die Seite für denpreload
-Wert. prerender
Veraltet Nicht standardisiert-
Gibt an, dass der Benutzeragent die Zielressource vorab holen und auf eine Weise verarbeiten soll, die hilft, in der Zukunft eine schnellere Antwort zu liefern, beispielsweise indem er seine Unterressourcen holt oder ein Rendering vornimmt.
prev
-
Ähnlich wie das Schlüsselwort
next
, relevant für<form>
,<link>
,<a>
und<area>
, gibt derprev
-Wert an, dass das aktuelle Dokument Teil einer Serie ist und dass der Link ein vorheriges Dokument in der Serie referenziert.Hinweis: Das Synonym
previous
ist nicht korrekt und sollte nicht verwendet werden. privacy-policy
-
Gültig für
<a>
,<area>
und<link>
-Elemente gibt derprivacy-policy
-Wert an, dass das referenzierte Dokument die Datenschutzerklärung ist, die die Datenerfassungs- und Nutzungspraktiken des aktuellen Dokuments beschreibt. search
-
Relevant für
<form>
,<link>
,<a>
und<area>
-Elemente, dassearch
-Schlüsselwörter gibt an, dass der Hyperlink ein Dokument referenziert, dessen Schnittstelle speziell zum Durchsuchen im aktuellen Dokument, der Website und den verwandten Ressourcen gestaltet wurde, und bietet einen Link zu einer Ressource, die zum Suchen verwendet werden kann.Wenn das
type
-Attribut aufapplication/opensearchdescription+xml
gesetzt ist, ist die Ressource ein OpenSearch-Plugin, das einfach zur Benutzeroberfläche von Firefox hinzugefügt werden kann. stylesheet
-
Gültig für das
<link>
-Element, importiert es eine externe Ressource, die als Stylesheet verwendet werden soll. Dastype
-Attribut ist nicht erforderlich, wenn es sich um eintext/css
-Stylesheet handelt, da dies der Standardwert ist. Wenn es sich nicht um ein Stylesheet des Typstext/css
handelt, ist es am besten, den Typ zu deklarieren.Während dieses Attribut den Link als Stylesheet definiert, beeinflusst die Interaktion mit anderen Attributen und anderen Schlüsselbegriffen innerhalb des
rel
-Wertes, ob das Stylesheet heruntergeladen und/oder verwendet wird.Wenn es mit dem Schlüsselwort
alternate
verwendet wird, definiert es ein alternatives Stylesheet. In diesem Fall sollte ein nicht-leerertitle
enthalten sein.Das externe Stylesheet wird weder verwendet noch heruntergeladen, wenn Medien nicht mit dem Wert des
media
-Attributs übereinstimmen.Erfordert die Verwendung des CORS-Protokolls für Cross-Origin-Fetching.
tag
-
Gültig für die
<a>
und<area>
-Elemente, gibt es ein Tag (identifiziert durch die angegebene Adresse) an, das für das aktuelle Dokument gilt. Der Tag-Wert bedeutet, dass der Link auf ein Dokument verweist, das ein Tag beschreibt, das für das Dokument gilt, auf dem es sich befindet. Dieser Link-Typ ist nicht für Tags innerhalb einer Tag-Wolke gedacht, da diese Tags für eine Gruppe von Seiten gelten, während dertag
-Wert desrel
-Attributs für ein einzelnes Dokument gedacht ist. terms-of-service
-
Gültig für
<a>
,<area>
und<link>
-Elemente gibt derterms-of-service
-Wert an, dass das referenzierte Dokument die Nutzungsbedingungen sind, die die Vereinbarungen zwischen dem Anbieter des aktuellen Dokuments und den Benutzern beschreiben, die das bereitgestellte Dokument nutzen möchten.
Nicht standardmäßige Werte
apple-touch-icon
-
Gibt das Icon für eine Webanwendung auf einem iOS-Gerät an.
Spezifikationen
Specification |
---|
HTML # linkTypes |
HTML # attr-hyperlink-rel |
HTML # attr-form-rel |
Browser-Kompatibilität
html.elements.link.rel
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
rel | ||||||||||||
rel="alternate stylesheet" | ||||||||||||
rel=dns-prefetch | ||||||||||||
rel=expect | ||||||||||||
rel=icon | ||||||||||||
rel=manifest | ||||||||||||
rel=modulepreload | ||||||||||||
rel=preconnect | ||||||||||||
rel=prefetch | ||||||||||||
rel=preload | ||||||||||||
as=fetch | ||||||||||||
as=font | ||||||||||||
as=image | ||||||||||||
as=script | ||||||||||||
as=style | ||||||||||||
as=track | ||||||||||||
rel=prerender |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Non-standard. Check cross-browser support before using.
- Deprecated. Not for use in new websites.
- See implementation notes.
- User must explicitly enable this feature.
- Has more compatibility info.
html.elements.a.rel
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
rel | ||||||||||||
noopener | ||||||||||||
noreferrer |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
html.elements.area.rel
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
rel | ||||||||||||
noopener | ||||||||||||
noreferrer |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.
html.elements.form.rel
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
rel |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support