--- title: 'HTML attribute: rel' slug: Web/HTML/Atributos/rel translation_of: Web/HTML/Attributes/rel ---

O atributo rel define a relação entre um recurso ligado e o documento atual. É válido em {{htmlelement('link')}}, {{htmlelement('a')}}, {{htmlelement('area')}}, e {{htmlelement('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	`{{htmlelement('link')}}`	`{{htmlelement('a')}}` e `{{htmlelement('area')}}`	`{{htmlelement('form')}}`
`{{anch("attr-alternate", "alternate")}}`	Representações alternativas do documento atual.	Link	Link	Não permitido
`{{anch("attr-author", "author")}}`	Autor do documento ou artigo atual.	Link	Link	Não permitido
`{{anch("attr-bookmark", "bookmark")}}`	Permalink para a secção antecessora mais próxima.	Não permitido	Link	Não permitido
`{{anch("attr-canonical", "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
`{{anch("attr-external", "external")}}`	O documento referenciado não pertence ao site do documento atual.	Não permitido	Anotação	Anotação
`{{anch("attr-help", "help")}}`	Link para material de apoio sobre o contexto atual.	Link	Link	Link
`{{anch("attr-icon", "icon")}}`	Um ícone representativo do documento atual.	Recurso externo	Não permitido	Não permitido
`{{anch("attr-license", "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
`{{anch("attr-next", "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
`{{anch("attr-nofollow", "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
`{{anch("attr-noreferrer", "noreferrer")}}`	Comporta-se do mesmo modo que `noopener`, mas exclui o header `Referer` do pedido.	Não permitido	Anotação	Anotação
`{{anch("attr-opener", "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
`{{anch("attr-pingback", "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
`{{anch("attr-prev", "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
`{{anch("attr-search", "search")}}`	Aponta para um recurso onde se pode pesquisar por conteúdo do documento atual e de páginas relacionadas.	Link	Link	Link
`{{anch("attr-stylesheet", "stylesheet")}}`	Importa uma style sheet.	Recurso externo	Não permitido	Não permitido
`{{anch("attr-tag", "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 {{htmlelement('link')}}, {{htmlelement('a')}}, {{htmlelement('area')}}, e {{htmlelement('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 {{htmlelement('link')}} e {{htmlelement('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 {{htmlelement('a')}} ou {{htmlelement('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.

{{htmlattrdef("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 {{anch('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">

{{htmlattrdef("author")}}

Cria uma hiperligação que indica o autor do documento ou artigo atual. Compatível com elementos {{htmlelement('link')}}, {{htmlelement('a')}}, e {{htmlelement('area')}}. Quando usado com {{htmlelement('a')}} ou {{htmlelement('area')}}, aponta para um documento (ou mailto:) com informação sobre o autor ou do {{htmlelement('article')}} pai mais próximo (se existir), ou do documento em si. No caso de um elemento {{htmlelement('link')}}, aponta para informação sobre o autor do documento atual.

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

{{htmlattrdef("bookmark")}}

Compatível com elementos {{htmlelement('a')}} e {{htmlelement('area')}}, bookmark informa que o link é um permalink para uma secção pai, que pode ser o {{htmlelement('article')}} ou {{htmlelement('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).

{{htmlattrdef("canonical")}}

Compatível com {{htmlelement('link')}}. Define o URL ideal para o documento atual, que é útil para motores de busca.

{{htmlattrdef("dns-prefetch")}}

Compatível com {{htmlelement('link')}}, seja dentro do {{htmlelement('body')}} ou do {{htmlelement('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.

{{htmlattrdef("external")}}

Compatível com {{htmlelement('form')}}, {{htmlelement('a')}}, e {{htmlelement('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.

{{htmlattrdef("help")}}

Compatível com {{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, e {{htmlelement('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 {{htmlelement('a')}} ou {{htmlelement('area')}}, o cursor {{cssxref('cursor')}} passará a help em vez de pointer (se possível).

{{htmlattrdef("icon")}}

Compatível com {{htmlelement('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 web. shortcut não pertence a uma especificação, e é ignorado por diversos browsers.

{{htmlattrdef("license")}}

Compatível com elementos {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("form")}}, {{HTMLElement("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 {{HTMLElement("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.

{{htmlattrdef("manifest")}}

Manifesto web app. Requer o protocolo CORS para adquirir dados de origens diferentes (cross-origin).

{{htmlattrdef("modulepreload")}}

Útil para questões de performance, compatível com elementos {{htmlelement('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.

{{htmlattrdef("next")}}

Compatível com {{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, e {{htmlelement('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).

{{htmlattrdef("nofollow")}}

Compatível com {{htmlelement('form')}}, {{htmlelement('a')}}, e {{htmlelement('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.

{{htmlattrdef("noopener")}}

Compatível com {{htmlelement('form')}}, {{htmlelement('a')}}, e {{htmlelement('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 {{anch("opener")}}.

{{htmlattrdef("noreferrer")}}

Compatível com {{htmlelement('form')}}, {{htmlelement('a')}}, e {{htmlelement('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.

{{htmlattrdef("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 {{anch("noopener")}}.

{{htmlattrdef("pingback")}}

Define o endereço do servidor de pingback que controla pingbacks para o documento atual.

{{htmlattrdef("preconnect")}}

Define que o user agent deve antecipadamente conectar-se à origem do recurso apontado.

{{htmlattrdef("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.

{{htmlattrdef("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).

{{htmlattrdef("prerender")}}

Define que o user agent deve antecipadamente descarregar e renderizar o recurso apontado, acelerando respostas a pedidos equivalentes.

{{htmlattrdef("prev")}}

Equivalente à palavra-chave {{anch("next")}}, compatível com os elementos {{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, e {{htmlelement('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.

{{htmlattrdef("search")}}

Compatível com elementos {{htmlelement('form')}}, {{htmlelement('link')}}, {{htmlelement('a')}}, e {{htmlelement('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.

{{htmlattrdef("stylesheet")}}

Compatível com elementos {{htmlelement('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 {{anch('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.

{{htmlattrdef("tag")}}

Compatível com elementos {{htmlelement('a')}} e {{htmlelement('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

Especificações

Especificação	Estado	Comentários
{{SpecName('HTML WHATWG', 'links.html#linkTypes', 'rel attribute')}}	{{Spec2('HTML WHATWG')}}	Adicionado `opener`. `noopener` passou a ser definido por omissão com `target="_blank"`.
{{SpecName('HTML5 W3C', 'links.html#linkTypes', 'rel attribute')}}	{{Spec2('HTML5 W3C')}}	Adicionados `tag`, `search`, `prefetch`, `noreferrer`, `nofollow`, `icon`, e `author`. `copyright` passou a ser `license`. Removidos `start`, `chapter`, `section`, `subsection`, e `appendix`
{{SpecName("Preload", "#x2.link-type-preload", "preload")}}	{{Spec2("Preload")}}	Adicionado `preload`.
{{SpecName("Resource Hints", "#dfn-preconnect", "preconnect")}}	{{Spec2("Resource Hints")}}	Adicionados `dns-prefetch`, `preconnect`, e `prerender`.
{{SpecName("HTML4.01", "types.html#type-links", "link types")}}	{{Spec2("HTML4.01")}}	Adicionados `alternate`, `stylesheet`, `start`, `chapter`, `section`, `subsection`, `appendix`, e `bookmark`. `previous` passou a ser `prev`. Removidos `top`, e `search`.
{{SpecName("HTML3.2", "#link", "<link>")}}	{{Spec2("HTML3.2")}} (Obsoleto)	Adicionados `top`, `contents`, `index`, `glossary`, `copyright`, `next`, `previous`, `help`, e `search`.
{{RFC(1866, "HTML 2.0")}}	{{Spec2("HTML2.0")}}(Obsolete)	Definição inicial.

Compatibilidade de Browsers de valores rel para elementos link

Veja também

{{domxref("HTMLLinkElement.relList")}}
{{domxref("HTMLAnchorElement.relList")}}
{{domxref("HTMLAreaElement.relList")}}