HTML attribute: rel

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.

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.

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 web. shortcut 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).

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">

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

Esta tabela de compatibilidade de browsers é gerada automaticamente a partir de dados organizados. Se quiser contribuir ao atualizar os dados, veja https://github.com/mdn/browser-compat-data e envie-nos um pull request.

• HTMLLinkElement.relList
• HTMLAnchorElement.relList
• HTMLAreaElement.relList