HTML attribute: rel

Esboço
Esta página está incompleta.

O atributo rel define a relação entre um recurso ligado e o documento atual. É válido em <link>, <a>, <area>, e <form>. Os valores suportados dependem do elemento em que o atributo é usado.

O tipo de relação (da ligação) é definido pelo atributo rel que, se existir, tem de ter um valor que é um conjunto de palavras-chave (keywords) únicas, desordenadas, e separadas por espaços. As palavras-chave possíveis estão na tabela em baixo.

Valores possíves para o atributo rel, e os elementos em que são relevantes
rel (valor) Descrição <link> <a> e <area> <form>
alternate Representações alternativas do documento atual. Link Link Não permitido
author Autor do documento ou artigo atual. Link Link Não permitido
bookmark Permalink para a secção antecessora mais próxima. Não permitido Link Não permitido
canonical URL ideal para o documento atual. Link Não permitido Não permitido
dns-prefetch Pede ao browser para antecipadamente efetuar a resolução de DNS para o link em questão. Recurso externo Não permitido Não permitido
external O documento referenciado não pertence ao site do documento atual. Não permitido Anotação Anotação
help Link para material de apoio sobre o contexto atual. Link Link Link
icon Um ícone representativo do documento atual. Recurso externo Não permitido Não permitido
license O conteúdo principal do documento atual está protegido pela licença de direitos de autor referida no link. Link Link Link
manifest Web app manifest Link Não permitido Não permitido
modulepreload Pede ao browser para antecipadamente descarregar o script e guardá-lo no mapa de módulos do documento, para avaliar depois. As dependências do módulo também podem ser descarregadas, opcionalmente. Recurso externo Não permitido Não permitido
next Indica que o documento atual pertence a uma série de documentos, e que o documento referenciado por este link é o seguinte. Link Link Link
nofollow Indica que o autor ou editor do documento atual não aprova o documento referenciado. Não permitido Anotação Anotação
noopener Cria um contexto de navegação de nível superior e não é "auxiliar" (não está relacionado com outro contexto de navegação), mesmo que a hiperligação estivesse configurada para criar outro tipo de contexto (atribuindo um certo valor ao atributo target, por exemplo). Não permitido Anotação Anotação
noreferrer Comporta-se do mesmo modo que noopener, mas exclui o header Referer do pedido. Não permitido Anotação Anotação
opener Cria um contexto de navegação auxiliar, mesmo que a hiperligação fosse criar um contexto de navegação de nível superior que não fosse auxiliar  (por exemplo, no caso de um link com  "_blank" como valor do atributo target). Não permitido Anotação Anotação
pingback Indica o endereço do servidor pingback que controla pingbacks para o document atual. Recurso externo Não permitido Não permitido
preconnect Informa o user agent de que este deve ligar-se antecipadamente à origem do recurso apontado pelo link. Recurso externo Não permitido Não permitido
prefetch Informa o user agent de que este deve antecipadamente descarregar o recurso apontado e guardá-lo em cache, porque é provável que este seja necessário numa futura navegação. Recurso externo Não permitido Não permitido
preload

Informa o user agent de que este deve antecipadamente descarregar o recurso apontado e guardá-lo em cache. Tal deverá ocorrer para para que o recurso seja usado na navegação atual, com base no atributo as (e na prioridade associada ao recurso apontado).

Recurso externo Não permitido Não permitido
prerender Informa o user agent de que este deve antecipadamente descarregar o recurso apontado e futuramente responder mais rapidamente ao mesmo pedido. Recurso externo Não permitido Não permitido
prev Indica que o documento atual pertence a uma série de documentos, e que o documento referenciado por este link é o anterior. Link Link Link
search Aponta para um recurso onde se pode pesquisar por conteúdo do documento atual e de páginas relacionadas. Link Link Link
stylesheet Importa uma style sheet. Recurso externo Não permitido Não permitido
tag Fornece uma tag (identificada pelo endereço referido) a ser usada no documento atual. Não permitido Link Não aplicado

O atributo rel é relevate para os elementos <link>, <a>, <area>, e <form>. No entanto, alguns dos valores só são relevantes para casos específicos deste grupo de elementos. Para o valor de rel, não há diferenciação entre maiúsculas e minúsculas, tal como em nos atributos HTML em geral.

rel não tem um valor por defeito. Se o atributo for omitido ou se os seus valores forem inválidos, então não existe qualquer relação entre o documento atual e o recurso apontado, fora a existência de uma hiperligação. Por exemplo, para <link> e <form>, se rel for omitido, ou se não tiver pelo menos uma das keywords em cima (separadas por espaços), então não são criadas hiperligações. Mas se o mesmo acontecer com os elementos <a> ou <area>, então os elementos criam hiperligações sem uma relação específica.

Valores

Se houverem vários elementos <link rel="icon">, o browser verifica os atributos media, type e sizes destes para selecionar o ícone mais adequado. Se mais do que um elemento for adequado, é o último que é usado. Se o ícone selecionado acabar por não ser apropriado (porque usa um formato não suportado, por exemplo), o browser seleciona o próximo elemento mais adequado.

Nota: Sistemas Apple iOS não usam este tipo de link, nem o atributo sizes (usado por outros browsers para dispositivos móveis), para escolher um ícone para um Web Clip ou para um placeholder visível no arranque. Sistemas iOS usam apple-touch-icon e apple-touch-startup-image respetivamente, atributos que não são padrão.

O tipo de link shortcut é frequentemente encontrado antes de icon, mas não é padrão, é ignorado, e já não deve ser usado por autores para a web.

alternate
Aponta para uma versão alternativa do documento atual. É compatível com elementos link, a, e area. O efeito de alternate depende do valor de outros atributos:
  • Em conjunto com stylesheet num link, alternate cria uma folha de estilo (style sheet) alternativa.
    <!-- uma folha de estilo persistente -->
    <link rel="stylesheet" href="default.css">
    <!-- folhas de estilo alternativas -->
    <link rel="alternate stylesheet" href="highcontrast.css" title="High contrast">
  • Com um atributo hreflang que tenha um valor diferente da língua do documento, alternate aponta para uma versão traduzida do documento.
  • Com um atributo type, aponta para um documento com o mesmo contexto mas formato diferente. Por exemplo, com type="application/rss+xml" cria uma hiperligação para um feed RSS.
    <link rel="alternate" type="application/atom+xml" href="posts.xml" title="Blog">
  • Os atributos hreflang e type apontam para versões do documento atua com formatos ou línguas diferentes, que podem ser dedicados a outros 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">
author
Cria uma hiperligação que indica o autor do documento ou artigo atual. Compatível com elementos <link>, <a>, e <area>. Quando usado com <a> ou <area>, aponta para um documento (ou mailto:) com informação sobre o autor ou do <article> pai mais próximo (se existir), ou do documento em si. No caso de um elemento <link>, aponta para informação sobre o autor do documento atual.

Nota: O atributo obsoleto rev="made" é tratado como rel="alternate"

bookmark
Compatível com elementos <a> e <area>bookmark informa que o link é um permalink para uma secção pai, que pode ser o <article> ou <section> mais próximo. Se tal secção não existir, o link refere-se ou ao heading mais próximo (que pode ser irmão do link, ou descender de um pai comum).
canonical
Compatível com <link>. Define o URL ideal para o documento atual, que é útil para motores de busca.
dns-prefetch
Compatível com <link>, seja dentro do <body> ou do <head>. Alerta o browser para antecipadamente efetuar resolução de DNS para a origem do recurso apontado. É útil para recursos que provavelmente serão úteis para o utilizador, porque este será capaz de aceder aos recursos mais rapidamente. Consulte a página sobre como utilizar o DNS prefetch para mais informações.
external
Compatível com <form>, <a>, e <area>. Indica que o documento referenciado não pertence ao site atual. Este valor é útil para estilizar links externos, e assim informar os utilizadores de que, se ativarem o elemento, vão abandonar o site atual.
help
Compatível com <form>, <link>, <a>, e <area>. Usado para representar uma ligação para conteúdo informativo sobre o pai do elemento com a hiperligação (e descendentes desse mesmo pai). Se um <link> contiver este valor, então o documento referenciado serve de apoio para o documento atual (em geral). Quando o valor está presente num elemento <a> ou <area>, o cursor cursor passará a help em vez de pointer (se possível).
icon

Compatível com <link>. Indica que o recurso referenciado é um ícone representativo do documento atual.

Este valor é principalmente utilizado para definir um favicon:

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

Se houverem vários elementos <link rel="icon">, então o browser deduz que favicon utilizar com base nos atributos media, type, e sizes. Caso mais que um destes elementos sejam os mais adequados (com base nestes critérios), então o browser seleciona o último destes. Se, posteriormente, o ícone mais adequado deixar de o ser, então o browser passa a usar o próximo ícone mais adequado.

Nota: para selecionar um ícone para um Web Clip ou para placeholder de arranque, o sistema iOS da Apple não usa nem este tipo de link nem o atributo sizes. Ao contrário de outros browsers mobile, este sistema usa os valores apple-touch-icon e apple-touch-startup-image respetivamente. Estes valores não são considerados standard.

O valor shortcut é frequentemente encontrado antes de icon, mas já não deve ser utilizado por autores na webshortcut não pertence a uma especificação, e é ignorado por diversos browsers. 

license

Compatível com elementos <a>, <area>, <form>, <link>. O valor indica que a hiperligação aponta para informação de licenciamento relativa ao documento atual. Deste modo, sabe-se que o conteúdo principal do documento atual está protegido pela licença de copyright descrita no documento referenciado. Mesmo quando utilizado num descendente que não pertence ao elemento <head>, não há distinção entre uma hiperligação para uma licença associada ou a parte do documento ou ao documento em geral. Esta distinção só é possível através da informação na página.

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

Nota: Apesar de reconhecido, o valor "equivalente" copyright não é correto, pelo que deve ser evitado.

manifest
Manifesto web app. Requer o protocolo CORS para adquirir dados de origens diferentes (cross-origin).
modulepreload
Útil para questões de performance, compatível com elementos <link> em todo o documento. Informa o browser de que este deve antecipadamente descarregar o script referenciado (com as dependências respetivas), e armazená-lo no módulo de mapa de módulos para futura avaliação. Hiperligações com modulepreload podem ser usados para garantir que o recurso é descarregado com o módulo pronto (mas não avaliado) no mapa de módulo ainda antes de ser necessário. Veja também a página sobre tipos de link: modulepreload.
next
Compatível com <form>, <link>, <a>, e <area>. Indica que o documento atual pertence a uma série de documentos, e que o documento na série que se segue é referenciado pelo elemento em questão. Quando o valor está presente num elemento <link>, os browsers podem assumir que este recurso vai ser necessário posteriormente, e considerar esta informação uma "resource hint" (dica de recurso que podem descarregar antecipadamente).
nofollow
Compatível com <form>, <a>, e <area>nofollow informa spiders (de motores de busca) de que devem ignorar a relação definida pelo link. Este valor pode indicar que o dono do documento atual não confia ou aprova o documento referenciado. nofollow é frequentemente incluído por Search Engine Optimizers (otimizadores de motores de busca) para dar a impressão de que os seus link farms não são páginas de spam.
noopener
Compatível com <form>, <a>, e <area>. Quando selecionado, o link cria um contexto de navegação de topo (top-level browsing context) que não é auxiliar (auxiliary), mesmo que tenha condições para criar um contexto auxiliar (ex.: por ter um valor para target adequado). Por outras palavras, o link comporta-se como se window.opener fosse nulo e target="_parent" estivesse definido.

noopener faz o contrário de opener.
noreferrer
Compatível com <form>, <a>, e <area>. Quando incluído, o referrer (página com referência para o recurso) desconhecido. Deste modo, o pedido não inclui Referer no header, e cria um contexto de navegação de topo (top-level browsing context), como se noopener também estivesse definido.
opener
Cria um contexto de navegação auxiliar (auxiliary browsing context), mesmo que o link tenha características para criar um contexto de navegação que não fosse auxiliar (via target="_blank").
opener faz o contrário de noopener.
pingback
Define o endereço do servidor de pingback que controla pingbacks para o documento atual.
preconnect
Define que o user agent deve antecipadamente conectar-se à origem do recurso apontado.
prefetch
Define que o user agent deve antecipadamente descarregar e guardar em cache o recurso apontado. Deste modo, o recurso fica pronto se requisitado posteriormente.
preload
Define que o user agent deve antecipadamente descarregar e guardar em cache o recurso apontado para a navegação atual. Deste modo, o recurso está preparado para ser usado num potencial destino da navegação, definido pelo atributo as (a prioridade associada a este destino também é considerada).
prerender
Define que o user agent deve antecipadamente descarregar e renderizar o recurso apontado, acelerando respostas a pedidos equivalentes.
prev

Equivalente à palavra-chave next, compatível com os elementos <form>, <link>, <a>, e <area>. O valor prev indica que o documento atual pertence a uma série de documentos, sendo o link referenciado para o documento que se segue ao atual.

Nota: O valor sinónimo previous não deve ser usado incorrect and should not be used, porque é incorreto.

search

Compatível com elementos <form>, <link>, <a>, e <area>. search indica que o link referencia um documento com uma interface para pesquisar por conteúdo do documento atual, seja no site ou em recursos relacionados.

Se o atributo type do elemento for application/opensearchdescription+xml, então o recurso apontado é um plugin OpenSearch que pode ser facilmente adicionado a alguns browsers, como o Firefox ou o Internet Explorer.

stylesheet

Compatível com elementos <link>. Importa um recurso externo que é uma stylesheet (folha de estilos). Caso o link aponte para uma stylesheet do tipo text/css, então pode-se omitir o atributo type.

Apesar do valor identificar o link como uma stylesheet, outros atributos ou valores poderão determinar se esta é descarregada ou usada.

Quando o valor stylesheet é usado em conjunto com alternate, passa a definir uma stylesheet alternativa. Neste caso, deve ter o atributo title com um valor não-vazio.

O recurso stylesheet externo não será usado nem descarregado em contextos multimédia que não correspondam ao definido pelo atributo media (ex.: se o link para a stylesheet tiver um atributo media com valor "print", então a stylesheet não será descarregada quando a página é renderizada numa tela).

Requer o uso do protocolo CORS para pedidos com origens diferentes.

tag
Compatível com elementos <a> e <area>. Define que o link referenciado identifica uma palavra-chave que se aplica ao documento atual. Este tipo de link não deve identificar palavras-chave numa tag cloud, porque estas aplicam-se apenas a um grupo de páginas, e não a uma página só (que é o objetivo do valor tag).

Valores que não são standard

apple-touch-icon-precomposed
 <!-- iPad de terceira geração com tela Retina de alta resolução: -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/img/favicon144.e7e21ca263ca.png">
  <!-- iPhone com tela Retina de alta resolução: -->
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/img/favicon114.d526f38b09c5.png">
  <!-- iPad de primeira e segunda gerações: -->
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/img/favicon72.cc65d1d762a0.png">
  <!-- iPhone e iPod Touch sem telas Retina, e dispositivos Android 2.1 ou superior: -->
  <link rel="apple-touch-icon-precomposed" href="/static/img/favicon57.de33179910ae.png">
  <!-- favicon básico -->
  <link rel="shortcut icon" href="/static/img/favicon32.7f3da72dcea1.png">

Compatibilidade de Browsers do atributo rel em geral

No compatibility data found. Please contribute data for "html.elements.attributes.rel" (depth: 1) to the MDN compatibility data repository.

Especificações

Especificação Estado Comentários
HTML Living Standard
The definition of 'rel attribute' in that specification.
Living Standard Adicionado opener. noopener passou a ser definido por omissão com target="_blank".
HTML5
The definition of 'rel attribute' in that specification.
Recommendation Adicionados tag, search, prefetch, noreferrer, nofollow, icon, e author.
copyright passou a ser license.
Removidos start, chapter, section, subsection, e appendix
Preload
The definition of 'preload' in that specification.
Candidate Recommendation Adicionado preload.
Resource Hints
The definition of 'preconnect' in that specification.
Working Draft Adicionados dns-prefetch, preconnect, e prerender.
HTML 4.01 Specification
The definition of 'link types' in that specification.
Recommendation Adicionados alternate, stylesheet, start, chapter, section, subsection, appendix, e bookmark.
previous passou a ser prev.
Removidos top, e search.
Unknown
The definition of '<link>' in that specification.

Unknown (Obsoleto)

Adicionados top, contents, index, glossary, copyright, next, previous, help, e search.
RFC 1866: HTML 2.0 Unknown(Obsolete) Definição inicial.
Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
relChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Alternative stylesheets.Chrome No support 1 — 48Edge ? Firefox Full support 3IE Full support 8Opera Full support YesSafari ? WebView Android ? Chrome Android ? Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
dns-prefetch
Experimental
Chrome Full support 46Edge Full support ≤79Firefox Full support 3IE ? Opera Full support 33Safari ? WebView Android Full support 46Chrome Android Full support YesFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
iconChrome Full support 4
Notes
Full support 4
Notes
Notes If both ICO and PNG are available, will use ICO over PNG if ICO has better matching sizes set. (Per caniuse.com.)
Edge Full support 12
Notes
Full support 12
Notes
Notes In version 79 and later (Blink-based Edge), if both ICO and PNG are available, will use ICO over PNG if ICO has better matching sizes set. (Per caniuse.com.)
Firefox Full support 2IE Full support 11Opera Full support 9
Notes
Full support 9
Notes
Notes In version 15 and later (Blink-based Opera), if both ICO and PNG are available, will use ICO over PNG if ICO has better matching sizes set. (Per caniuse.com.)
Safari Full support 3.1
Notes
Full support 3.1
Notes
Notes If both ICO and PNG are available, will ALWAYS use ICO file, regardless of sizes set. (Per caniuse.com.)
WebView Android Full support 38Chrome Android Full support 18Firefox Android Full support 4Opera Android No support NoSafari iOS No support No
Notes
No support No
Notes
Notes Does not use favicons at all (but may have alternative for bookmarks, etc.). (Per caniuse.com.)
Samsung Internet Android Full support 4.0
manifest
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox ? IE ? Opera No support NoSafari ? WebView Android Full support 39Chrome Android Full support 39Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Full support 4.0
modulepreload
Experimental
Chrome Full support 66Edge Full support ≤79Firefox ? IE ? Opera Full support 53Safari ? WebView Android Full support 66Chrome Android Full support 66Firefox Android ? Opera Android Full support 47Safari iOS ? Samsung Internet Android Full support 9.0
preconnect
Experimental
Chrome Full support 46Edge Full support 79Firefox Full support 39
Notes
Full support 39
Notes
Notes Before Firefox 41, it doesn't obey the crossorigin attribute.
IE No support NoOpera Full support 33Safari Full support 11.1WebView Android Full support 46Chrome Android Full support 46Firefox Android Full support 39
Notes
Full support 39
Notes
Notes Before Firefox 41, it doesn't obey the crossorigin attribute.
Opera Android Full support 33Safari iOS Full support 11.3Samsung Internet Android Full support 4.0
prefetch
Experimental
Chrome Full support 8Edge Full support 12Firefox Full support 2IE Full support 11Opera Full support 15Safari No support NoWebView Android Full support 4.4Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS No support NoSamsung Internet Android Full support 1.5
preload
Experimental
Chrome Full support 50Edge Full support ≤79Firefox No support 56 — 57
Notes
No support 56 — 57
Notes
Notes Disabled due to various web compatibility issues (e.g. bug 1405761).
IE ? Opera Full support 37Safari ? WebView Android Full support 50Chrome Android Full support 50Firefox Android No support 56 — 57
Notes
No support 56 — 57
Notes
Notes Disabled due to various web compatibility issues (e.g. bug 1405761).
Opera Android ? Safari iOS ? Samsung Internet Android Full support 5.0
prerender
Experimental
Chrome Full support 13Edge Full support 79Firefox No support NoIE Full support 11Opera Full support 15Safari No support NoWebView Android Full support 4.4Chrome Android Full support 18Firefox Android No support NoOpera Android Full support 14Safari iOS No support NoSamsung Internet Android Full support 1.5

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.

Veja também