Atributo HTML rel
El atributo rel define la relación entre un recurso enlazado y el documento actual. Es válido en los elementos <link>, <a>, <area> y <form>, y los valores admitidos dependen del elemento en el que se encuentre el atributo.
El tipo de relación lo indica el valor del atributo rel, que, si está presente, debe ser un conjunto desordenado de palabras clave únicas separadas por espacios. A diferencia de un nombre de class, que no expresa semántica, el atributo rel debe expresar tokens que sean semánticamente válidos tanto para las máquinas como para las personas. Los registros vigentes para los posibles valores del atributo rel son el registro de relaciones de enlace de la IANA, el HTML Living Standard y la página de edición libre existing-rel-values del wiki de microformats, tal como sugiere el Living Standard. Si se usa un valor de rel que no aparece en ninguna de estas tres fuentes, algunos validadores de HTML (como el servicio de validación de marcado del W3C) generarán una advertencia.
La siguiente tabla enumera algunas de las palabras clave existentes más importantes. Cada palabra clave dentro de un valor separado por espacios debe ser única dentro de ese valor.
Valor de rel |
Descripción | <link> |
<a> y <area> |
<form> |
|---|---|---|---|---|
alternate |
Representaciones alternativas del documento actual. | Enlace | Enlace | No permitido |
author |
Autor del documento o artículo actual. | Enlace | Enlace | No permitido |
bookmark |
Enlace permanente a la sección contenedora más cercana. | No permitido | Enlace | No permitido |
canonical |
URL preferida para el documento actual. | Enlace | No permitido | No permitido |
compression-dictionary |
Enlaza a un diccionario de compresión que puede usarse para comprimir futuras descargas de los recursos de este sitio. | Enlace | No permitido | No permitido |
dns-prefetch |
Indica al navegador que resuelva de forma anticipada el DNS del origen del recurso de destino. | Recurso externo | No permitido | No permitido |
external |
El documento referenciado no forma parte del mismo sitio que el documento actual. | No permitido | Anotación | Anotación |
expect |
Si se usa junto con blocking="render", permite que la página quede bloqueada para el renderizado hasta que se analicen las partes esenciales del documento, de modo que se renderice de forma consistente. |
Enlace | No permitido | No permitido |
help |
Enlace a la ayuda contextual. | Enlace | Enlace | Enlace |
icon |
Un icono que representa al documento actual. | Recurso externo | No permitido | No permitido |
license |
Indica que el contenido principal del documento actual está cubierto por la licencia de derechos de autor descrita en el documento referenciado. | Enlace | Enlace | Enlace |
manifest |
Manifiesto de la aplicación web. | Enlace | No permitido | No permitido |
me |
Indica que el documento actual representa a la persona propietaria del contenido enlazado. | Enlace | Enlace | No permitido |
modulepreload |
Indica al navegador que obtenga de forma anticipada el script y lo almacene en el mapa de módulos del documento para evaluarlo más tarde. Opcionalmente, también pueden obtenerse las dependencias del módulo. | Recurso externo | No permitido | No permitido |
next |
Indica que el documento actual forma parte de una serie y que el documento referenciado es el siguiente de esa serie. | Enlace | Enlace | Enlace |
nofollow |
Indica que el autor original o el editor del documento actual no avala el documento referenciado. | No permitido | Anotación | Anotación |
noopener |
Crea un contexto de navegación de nivel superior que no sea auxiliar, siempre que el hipervínculo fuera a crear alguno de los dos (es decir, cuando el atributo target tiene un valor adecuado para ello). |
No permitido | Anotación | Anotación |
noreferrer |
No se incluirá ninguna cabecera Referer. Además, tiene el mismo efecto que noopener. |
No permitido | Anotación | Anotación |
opener |
Crea un contexto de navegación auxiliar cuando el hipervínculo, de otro modo, crearía un contexto de navegación de nivel superior que no sea auxiliar (es decir, cuando tiene "_blank" como valor del atributo target). |
No permitido | Anotación | Anotación |
pingback |
Indica la dirección del servidor de pingback que gestiona los pingbacks del documento actual. | Recurso externo | No permitido | No permitido |
preconnect |
Especifica que el agente de usuario debe conectarse de forma anticipada al origen del recurso de destino. | Recurso externo | No permitido | No permitido |
prefetch |
Especifica que el agente de usuario debe obtener y almacenar en caché de forma anticipada el recurso de destino, ya que es probable que se necesite en una navegación posterior. | Recurso externo | No permitido | No permitido |
preload |
Especifica que el agente de usuario debe obtener y almacenar en caché de forma anticipada el recurso de destino para la navegación actual, según el destino potencial indicado por el atributo as (y la prioridad asociada a ese destino). |
Recurso externo | No permitido | No permitido |
prerender |
Especifica que el agente de usuario debe obtener de forma anticipada el recurso de destino y procesarlo de manera que ayude a ofrecer una respuesta más rápida en el futuro. Esta funcionalidad fue reemplazada por la Speculation Rules API. | Recurso externo | No permitido | No permitido |
prev |
Indica que el documento actual forma parte de una serie y que el documento referenciado es el anterior de esa serie. | Enlace | Enlace | Enlace |
privacy-policy |
Ofrece un enlace a la información sobre las prácticas de recopilación y uso de datos que aplican al documento actual. | Enlace | Enlace | No permitido |
search |
Ofrece un enlace a un recurso que puede usarse para buscar en el documento actual y sus páginas relacionadas. | Enlace | Enlace | Enlace |
stylesheet |
Importa una hoja de estilos. | Recurso externo | No permitido | No permitido |
tag |
Indica una etiqueta (identificada por la dirección dada) que se aplica al documento actual. | No permitido | Enlace | No permitido |
terms-of-service |
Enlace al acuerdo, o términos de servicio, entre el proveedor del documento y las personas que deseen usarlo. | Enlace | Enlace | No permitido |
El atributo rel es relevante para los elementos <link>, <a>, <area> y <form>, aunque algunos valores solo son relevantes para un subconjunto de estos elementos. Como ocurre con todos los valores de atributos de palabra clave en HTML, estos valores no distinguen entre mayúsculas y minúsculas.
El atributo rel no tiene un valor predeterminado. Si se omite el atributo o ninguno de sus valores es compatible, el documento no tiene ninguna relación particular con el recurso de destino más allá de que existe un hipervínculo entre ambos. En ese caso, en <link> y <form>, si el atributo rel está ausente, no tiene palabras clave, o no incluye una o más de las palabras clave anteriores separadas por espacios, el elemento no crea ningún enlace. <a> y <area> sí crearán enlaces, pero sin una relación definida.
Valor
alternate-
Indica una representación alternativa del documento actual. Válido para
<link>,<a>y<area>, su significado depende de los valores de los demás atributos.-
Junto con la palabra clave
stylesheeten un<link>, crea una hoja de estilos alternativa.html<!-- una hoja de estilos persistente --> <link rel="stylesheet" href="default.css" /> <!-- hojas de estilos alternativas --> <link rel="alternate stylesheet" href="highcontrast.css" title="Alto contraste" /> -
Junto con un atributo
hreflangque difiere del idioma del documento, indica una traducción. -
Junto con el atributo
typecon el valor"application/rss+xml"o"application/atom+xml", crea un hipervínculo que referencia un feed de sindicación.html<link rel="alternate" type="application/atom+xml" href="posts.xml" title="Blog" /> -
De lo contrario, crea un hipervínculo que referencia una representación alternativa del documento actual, cuya naturaleza viene dada por los atributos
hreflangytype.- Si se indica
hreflangjunto conalternate, y el valor dehreflangdifiere del idioma del documento actual, indica que el documento referenciado es una traducción. - Si se indica
typejunto conalternate, indica que el documento referenciado tiene un formato alternativo (como un PDF). - Los atributos
hreflangytypepueden indicarse ambos junto conalternate.
html<link rel="alternate" href="/fr/html/print" hreflang="fr" type="text/html" media="print" title="HTML en francés (para imprimir)" /> <link rel="alternate" href="/fr/pdf" hreflang="fr" type="application/pdf" title="PDF en francés" /> - Si se indica
-
-
Indica que el documento referenciado ofrece más información sobre el autor del documento o artículo actual. Relevante para los elementos
<link>,<a>y<area>.Con
<a>y<area>, indica que el documento enlazado (omailto:) ofrece información sobre el autor del elemento<article>contenedor más cercano, si lo hay; en caso contrario, sobre el documento completo.Con
<link>, representa al autor del documento completo.Nota: Por razones históricas, el valor de atributo obsoleto
rev="made"se trata comorel="author". bookmark-
Relevante como valor del atributo
relpara los elementos<a>y<area>. Ofrece un enlace permanente al elemento<article>contenedor más cercano, si existe. Si no hay ningún elemento<article>contenedor, ofrece un enlace permanente a la sección con la que el elemento de enlace está más estrechamente asociado. canonical-
Válido para
<link>, define la URL preferida para el documento actual, lo cual ayuda a los motores de búsqueda a reducir el contenido duplicado. compression-dictionary-
Válido para
<link>, define un diccionario de compresión que puede usarse para comprimir futuras descargas de los recursos de este sitio, de modo que su tamaño sea menor que con la compresión estándar. dns-prefetch-
Relevante para el elemento
<link>tanto en<body>como en<head>, indica al navegador que resuelva de forma anticipada el DNS del origen del recurso de destino. Es útil para recursos que probablemente se necesiten, ya que ayuda a reducir la latencia y, por lo tanto, mejora el rendimiento cuando finalmente se accede a esos recursos, dado que el navegador ya resolvió de forma anticipada el DNS del origen del recurso indicado. Consulta dns-prefetch, descrito en resource hints. external-
Relevante para
<form>,<a>y<area>, indica que el documento referenciado no forma parte del sitio actual. Puede combinarse con selectores de atributos para diferenciar visualmente los enlaces externos e indicar que se abandonará el sitio actual. expect-
Permite que el bloqueo del renderizado de la página se retrase hasta que se analicen las partes esenciales del documento, de modo que se renderice de forma consistente. Ten en cuenta que el bloqueo del renderizado solo ocurre si se complementa con el atributo
blocking="render".Nota: Consulta Estabilizar el estado de la página para que las transiciones entre documentos sean consistentes para más información sobre su uso.
help-
Relevante para
<form>,<link>,<a>y<area>, la palabra clavehelpindica que el contenido enlazado ofrece ayuda contextual, con información sobre el elemento padre que define el hipervínculo y sus elementos hijos. Cuando se usa dentro de<link>, la ayuda corresponde a todo el documento. Cuando se incluye en<a>y<area>, y si es compatible, el valor predeterminado decursorseráhelpen lugar depointer. icon-
Válido con
<link>, el recurso enlazado representa el icono del documento actual, es decir, un recurso para representar la página en la interfaz de usuario.El uso más común del valor
icones el favicon:html<link rel="icon" href="favicon.ico" />Si hay varios
<link rel="icon">, el navegador usa sus atributosmedia,typeysizespara seleccionar el icono más adecuado. Si varios iconos son igual de adecuados, se usa el último. Si más tarde se determina que el icono más adecuado no es apropiado, por ejemplo porque usa un formato no compatible, el navegador pasa al siguiente más adecuado, y así sucesivamente.Nota: El atributo
crossoriginno es compatible conrel="icon"en navegadores basados en Chromium. Consulta el issue abierto de Chromium.Nota: El iOS de Apple no usa este tipo de enlace, ni el atributo
sizescomo sí lo hacen otros navegadores móviles, para seleccionar un icono de página web para Web Clip o una imagen de inicio. En su lugar, usa los atributos no estándarapple-touch-iconyapple-touch-startup-image, respectivamente.Nota: El tipo de enlace
shortcutsuele verse antes deicon, pero este tipo de enlace no cumple con los estándares, se ignora y quienes desarrollan sitios web no deben usarlo más. license-
Válido en los elementos
<a>,<area>,<form>y<link>, el valorlicenseindica que el hipervínculo lleva a un documento que describe la información de la licencia; es decir, que el contenido principal del documento actual está cubierto por la licencia de derechos de autor descrita en el documento referenciado. Si no está dentro del elemento<head>, el estándar no distingue si el hipervínculo se aplica a una parte específica del documento o al documento completo. Solo los datos de la página pueden indicarlo.html<link rel="license" href="#license" />Nota: Aunque se reconoce, el sinónimo
copyrightes incorrecto y debe evitarse. manifest-
Manifiesto de la aplicación web. Requiere el uso del protocolo CORS para la obtención del recurso entre orígenes.
modulepreload-
Útil para mejorar el rendimiento y relevante para
<link>en cualquier parte del documento, establecerrel="modulepreload"indica al navegador que obtenga de forma anticipada el script (y sus dependencias) y lo almacene en el mapa de módulos del documento para evaluarlo más tarde. Los enlacesmodulepreloadpueden garantizar que la obtención por red se complete con el módulo listo (aunque no evaluado) en el mapa de módulos, antes de que realmente se necesite. Consulta tambiénmodulepreload. next-
Relevante para
<form>,<link>,<a>y<area>, el valornextindica que el documento actual forma parte de una serie y que el documento referenciado es el siguiente de esa serie. Cuando se incluye en un<link>, los navegadores pueden asumir que ese documento se obtendrá a continuación y tratarlo como una sugerencia de recursos. nofollow-
Relevante para
<form>,<a>y<area>, la palabra clavenofollowindica a los rastreadores de los motores de búsqueda que ignoren la relación del enlace. La relaciónnofollowpuede indicar que quien posee el documento actual no avala el documento referenciado. Suele incluirse por parte de especialistas en SEO que buscan hacer pasar sus granjas de enlaces por páginas que no son spam. noopener-
Relevante para
<form>,<a>y<area>, crea un contexto de navegación de nivel superior que no es un contexto de navegación auxiliar, en caso de que el hipervínculo fuera a crear alguno de los dos (es decir, cuando tiene un valor adecuado en el atributotarget). En otras palabras, hace que el enlace se comporte como siwindow.openerfueranully se hubiera establecidotarget="_parent".Es lo opuesto a
opener. noreferrer-
Relevante para
<form>,<a>y<area>, incluir este valor hace que el referente sea desconocido (no se incluirá ninguna cabeceraReferer) y crea un contexto de navegación de nivel superior, como si también se hubiera establecidonoopener. opener-
Crea un contexto de navegación auxiliar cuando el hipervínculo, de otro modo, crearía un contexto de navegación de nivel superior que no es auxiliar (es decir, cuando el atributo
targettiene el valor"_blank"). En la práctica, es lo opuesto a noopener. pingback-
Indica la dirección del servidor de pingback que gestiona los pingbacks del documento actual. Consulta la especificación de Pingback.
preconnect-
Ofrece al navegador una sugerencia para que abra una conexión con el sitio web enlazado de forma anticipada, sin revelar ninguna información privada ni descargar contenido, de modo que, si se sigue el enlace, el contenido enlazado pueda obtenerse más rápido.
prefetch-
Especifica que el agente de usuario debe obtener y almacenar en caché de forma anticipada el recurso de destino, ya que es probable que se necesite en una navegación posterior. Consulta prefetch para más información.
preload-
Especifica que el agente de usuario debe obtener y almacenar en caché de forma anticipada el recurso de destino para la navegación actual, según el destino potencial indicado por el atributo
as(y la prioridad asociada a ese destino). Consulta la página del valorpreloadpara más información. prerender-
Especifica que el agente de usuario debe obtener de forma anticipada el recurso de destino y procesarlo de manera que ayude a ofrecer una respuesta más rápida en el futuro, por ejemplo, obteniendo sus subrecursos o realizando parte del renderizado. Esta funcionalidad fue reemplazada por la Speculation Rules API.
prev-
Similar a la palabra clave
next, relevante para<form>,<link>,<a>y<area>, el valorprevindica que el documento actual forma parte de una serie y que el documento referenciado es el anterior de esa serie.Nota: El sinónimo
previouses incorrecto y no debe usarse. privacy-policy-
Válido para los elementos
<a>,<area>y<link>, el valorprivacy-policyindica que el documento referenciado es la política de privacidad que describe las prácticas de recopilación y uso de datos del documento actual. search-
Relevante para los elementos
<form>,<link>,<a>y<area>, la palabra clavesearchindica que el hipervínculo referencia un documento cuya interfaz está diseñada específicamente para buscar en el documento actual, el sitio y los recursos relacionados; es decir, ofrece un enlace a un recurso que puede usarse para buscar.Si el atributo
typetiene el valorapplication/opensearchdescription+xml, el recurso es un complemento OpenSearch que puede añadirse fácilmente a la interfaz de Firefox. stylesheet-
Válido para el elemento
<link>, importa un recurso externo para usarlo como hoja de estilos. El atributotypeno es necesario si se trata de una hoja de estilostext/css, ya que ese es el valor predeterminado. Si no es una hoja de estilos de tipotext/css, es recomendable declarar el tipo.Aunque este atributo define el enlace como una hoja de estilos, la interacción con otros atributos y términos clave dentro del valor de
reldetermina si la hoja de estilos se descarga o se usa.Cuando se usa junto con la palabra clave
alternate, define una hoja de estilos alternativa. En ese caso, incluye untitleque no esté vacío.La hoja de estilos externa no se usará, ni siquiera se descargará, si el medio no coincide con el valor del atributo
media.Requiere el uso del protocolo CORS para la obtención del recurso entre orígenes.
tag-
Válido para los elementos
<a>y<area>, indica una etiqueta (identificada por la dirección dada) que se aplica al documento actual. El valortagdenota que el enlace hace referencia a un documento que describe una etiqueta aplicable al documento en el que se encuentra. Este tipo de enlace no está pensado para las etiquetas dentro de una nube de etiquetas, ya que esas etiquetas se aplican a un grupo de páginas, mientras que el valortagdel atributoreles para un único documento. terms-of-service-
Válido para los elementos
<a>,<area>y<link>, el valorterms-of-serviceindica que el documento referenciado corresponde a los Términos de servicio, los cuales describen los acuerdos entre quien provee el documento actual y quienes deseen utilizarlo.
Valores no estándar
apple-touch-icon-
Especifica el icono de una aplicación web en un dispositivo iOS.
Especificaciones
| Specification |
|---|
| HTML> # linkTypes> |
| HTML> # attr-hyperlink-rel> |
| HTML> # attr-form-rel> |