Uno de los pilares de un documento HTML es poder establecer una relación con otros documentos. Si ya sabemos algo de HTML y pensamos de esa forma, lo más común es que nos venga a la cabeza los enlaces <a>, es decir, las etiquetas que nos permiten que el usuario haga clic y acceda a otra página diferente. Si no las conoces, no te preocupes, las veremos más adelante.
Sin embargo, antes de profundizar en los enlaces, existen otras formas de establecer relaciones entre documentos, como por ejemplo, cuando relacionamos un documento HTML con un archivo .css para que aplique los estilos CSS en nuestro documento. Este tipo de relaciones se hacen con la etiqueta <link>.
La etiqueta link (relación)
La etiqueta <link> sirve para establecer relaciones con otros documentos, enlaces o archivos. De esta forma, el navegador o cualquier sistema capaz de leer código HTML puede saber que un documento está relacionado con otro (independientemente del formato que tenga) y así pueden establecerse ciertas relaciones.
Veamos un fragmento de código con algún ejemplo:
<head>
<link rel="stylesheet" href="index.css">
<link rel="icon" href="favicon.png">
</head>Como se puede ver, el atributo rel generalmente establece el tipo de relación que estamos determinando. Por otro lado, mediante el atributo href establecemos la dirección del documento en cuestión relacionado.
Existen muchos tipos de relaciones, veamos las más conocidas:
| Atributo rel | Descripción |
|---|---|
| Información visual | |
stylesheet |
Establece una relación con un documento .css para aplicar sus estilos. |
icon |
Indica un icono para utilizar a modo de favicon (icono de pestaña). |
| Documento | |
alternate |
Indica una versión alternativa del documento actual. |
pingback |
Indica un enlace al que se debe hacer ping cuando se haga referencia a este documento. |
| Posicionamiento SEO | |
canonical |
Establece el enlace real para el documento actual para evitar URL duplicadas. |
prev |
Indica si existe una URL anterior al documento actual. Útil en enlaces con varias partes. |
next |
Indica si existe una URL siguiente al documento actual. Útil en enlaces con varias partes. |
| Información o datos | |
author |
Indica un enlace con más información sobre el autor del documento actual. |
help |
Indica un enlace con información de ayuda. |
search |
Indica un enlace donde se puede encontrar un buscador del sitio actual. |
license |
Indica un enlace con la información de licencia de la página actual. |
manifest |
Indica un enlace con una URL con un archivo .json con un manifiesto de aplicación. |
| Resource Hints | |
| Precargas anticipadas de documentos o archivos. Más información en Etiquetas de precarga | |
Vamos a profundizar en ellas para aprender un poco más.
Relaciones visuales
Cargar estilos CSS
Probablemente, todo el que conozca la etiqueta HTML <link>, probablemente el uso más extendido es de utilizarlas para hacer una relación con un documento CSS. De esta forma, se indica al navegador que al documento HTML actual se le debe aplicar el estilo CSS que tenemos en el documento .css referenciado en el atributo href.
Veamos un ejemplo:
<head>
<link rel="stylesheet" href="index.css">
</head>En el atributo rel de la etiqueta <link> se indica que se trata de una relación de tipo stylesheet, es decir, se hace referencia a las hojas de estilo CSS. Con esto, el documento HTML estará relacionado con el documento CSS indicado en el atributo href, por lo que aplicará todos el código CSS que se encuentre en él al documento HTML actual.
En algunos casos, podremos observar que existe un atributo type="text/css". Este atributo era obligatorio antiguamente, pero en la actualidad se puede omitir, ya que el tipo por defecto de las hojas de estilos ya es text/css.
Favicon (icono de pestañas)
Cuando tenemos varias pestañas en nuestro navegador, para una búsqueda más fácil e intuitiva entre pestañas, el navegador suele colocarnos unos iconos a la izquierda del título de las pestañas. Estos iconos son conocidos como favicons (iconos de favoritos) ya que originalmente fue un invento de Internet Explorer para colocar el icono cuando el usuario añadía una página a favoritos, aunque actualmente se utiliza para identificar rápidamente las pestañas de un navegador.
Desgraciadamente, esta característica no está fuertemente definida en la especificación, por lo que cada navegador (y cada sistema operativo) la implementa a su propia forma. Hay navegadores que sólo soportan favicon en formato PNG, otros que solo soportan resoluciones específicas, etc.
Veamos un fragmento de código de ejemplo:
<head>
<link rel="shortcut icon" href="/favicon.ico"> <!-- HTML4 -->
<link rel="icon" sizes="64x64" href="/favicon.png"> <!-- HTML5 -->
<link rel="apple-touch-icon" sizes="180x180"
href="/apple-touch-icon-180x180.png"> <!-- iPhone/iPad -->
<meta name="msapplication-TileImage"
content="/mstile-144x144.png"> <!-- Windows Phone -->
</head>Por estas y otras razones, la generación de código para un favicon es una tarea tediosa. Si quieres generar los favicon de una forma más cómoda, aconsejo usar la herramienta Real Favicon Generator, a la cuál le pasamos un logo a alta resolución de nuestra página o sitio, y nos generará un fichero
.zipcon el código HTML y diferentes versiones.
De esta forma solo tendremos que revisar el código y adaptarlo un poco para tenerlo a nuestro gusto.
Relaciones del documento
Versiones alternativas
Con la etiqueta <link rel="alternate"> podemos indicar que el documento actual tiene versiones alternativas en otros formatos o idiomas. El siguiente ejemplo se indica que el documento HTML que estamos leyendo tiene una versión en PDF, y además, una versión HTML en inglés:
<head>
<link rel="alternate" href="document.pdf" type="application/pdf">
<link rel="alternate" href="document-en.html" hreflang="en">
</head>Observa que en la primera etiqueta, indicamos el atributo type="application/pdf", donde el valor application/pdf es el denominado MIME para identificar los archivos PDF. Un valor MIME es simplemente una cadena de texto que identifica un tipo de formato de fichero.
Por otro lado, en la segunda etiqueta, indicamos el atributo hreflang, mediante el cuál indicamos el idioma en el que se encuentra el documento referenciado por el atributo href. En este caso, indicamos el valor en, que se refiere a que se encuentra en idioma inglés.
Referencias mediante pingback
Aunque no es muy utilizado hoy en día debido a que fue un sistema altamente sensible al spam, los pingbacks son un mecanismo mediante el cuál, cuando un usuario escribe un artículo en una web y menciona o hace referencia a otro documento, puede «avisar a su autor» de que ha hecho mención de su artículo.
En nuestro documento HTML existiría algo así:
<head>
<link rel="pingback" href="https://dominio.com/pingback/">
</head>Esto significa que en la URL https://dominio.com/pingback/ existe un servidor de pingbacks que van a estar continuamente leyendo las peticiones, para que, si se realiza alguna, se lea la información asociada y se registre que alguien ha hecho una mención del artículo. Sistemas como Wordpress u otros CMS famosos, tienen plugins o sistemas para soportarlo.
Posicionamiento SEO (Google)
La etiqueta <link> también nos permite indicar algunos datos interesantes de cara al buscador para evitar ser marcado como contenido duplicado. De esta forma le indicamos al buscador exactamente las URLs que debe tener en cuenta, algo muy interesante de cara al posicionamiento SEO en buscadores.
Para ello, podemos utilizar los siguientes atributos:
| Atributo rel | Atributo href | Significado |
|---|---|---|
canonical |
Dirección URL | URL exacta que indica a Google la URL real del documento. Cualquier variación será descartada. |
prev |
Dirección URL | Si el documento actual tiene varias partes, indica la URL de la página anterior. |
next |
Dirección URL | Si el documento actual tiene varias partes, indica la URL de la página siguiente. |
Veamos esto en un ejemplo de código. Imaginemos que estamos en la página https://manz.dev/posts/el-lenguaje-html-parte-2.html. De trata de un artículo en 3 partes y nos encontramos en la parte 2. El fragmento de código en cuestión sería el siguiente:
<head>
<link rel="canonical" href="https://manz.dev/posts/el-lenguaje-html-parte-2.html">
<link rel="prev" href="https://manz.dev/posts/el-lenguaje-html-parte-1.html">
<link rel="next" href="https://manz.dev/posts/el-lenguaje-html-parte-3.html">
</head>Mientras que las etiquetas con rel prev y next indican el enlace a dichas partes, la etiqueta <link rel="canonical"> establece la URL canónica, es decir, aunque tuvieramos varias formas de acceder a esta página (y las 3 carguen la página correctamente):
https://manz.dev/posts/el-lenguaje-html-parte-2.htmlhttps://manz.dev/posts/el-lenguaje-html-parte-2/https://manz.dev/posts/el-lenguaje-html-parte-2
En la etiqueta anterior hemos definido que la URL canónica es la que termina en .html, por lo que Google entenderá que las demás son formas alternativas pero que debe utilizar la primera.
Información adicional o datos
Existen varios tipos de etiquetas <link> donde podemos hacer referencia a información o datos relevantes sobre nuestro documento. Mediante el atributo rel podemos indicar valores como author, help, search o license para indicar información que puede ser útil para el navegador, buscador o usuario.
A continuación indicamos una referencia al autor del documento, a la zona de ayuda, la zona de búsqueda y la licencia que cubre el contenido de la página:
<head>
<link rel="author" href="https://twitter.com/Manz">
<link rel="help" href="https://lenguajehtml.com/ayuda/">
<link rel="search" href="https://lenguajehtml.com/search/">
<link rel="license" href="https://lenguajehtml.com/license/">
</head>Observa que en cada uno de los casos hemos hecho referencia a detalles e información relacionada:
- URL del autor de la página
- URL de ayuda o más información
- URL donde puedes encontrar un buscador de la página
- URL donde puedes encontrar la licencia de los contenidos de la página
Manifiesto de aplicación
En algunos casos, también podemos encontrar lo que se denomina un manifiesto de aplicación. Suele ser más frecuente encontrarlo en aplicaciones web que en páginas web, pero no es más que una etiqueta que hace referencia a un archivo .json donde se encuentran varios datos sobre la página.
Para indicarlos, sólo se tiene que hacer referencia a la etiqueta <link rel="manifest">:
<head>
<title>La web de Warren Sánchez</title>
<link rel="manifest" href="manifest.webmanifest">
</head>En el documento manifest.webmanifest referenciado, que no es más que un archivo JSON, podemos encontrar algunos de los datos de nuestra aplicación web:
{
"lang": "es",
"dir": "ltr",
"name": "La web de Warren Sánchez",
"short_name": "WarrenWeb",
"icons": [
{ "src": "icon-64x64.webp", "sizes": "64x64", "type": "image/webp" },
{ "src": "icon-128x128.png", "sizes": "128x128" }
],
"id": "warrenweb",
"start_url": "/index.html",
"display": "fullscreen",
"orientation": "landscape",
"background_color": "indigo",
"theme_color": "hotpink"
}No obstante, insistir en que los manifiestos suelen ser elementos incluidos en una aplicación web, en lugar de incluirlo en un documento de una página web.
¿Quién soy yo?
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev