Etiqueta <LINK>, Curso práctico HTML5
Encabezado del documento HTML
Curso práctico de HTML5, ejercicios y prácticas con solución, estudios online
La etiqueta <link>, permite realizar la carga y establecer la relación existente entre el documento web actual y un recurso externo. Esta etiqueta es normalmente muy utilizada para realizar la carga de hojas de estilo para el documento web.
Esta etiqueta comprendida en la categoría de Contenido de Metadatos, es una etiqueta de las denominadas “vacías”, es decir normalmente solo se especifica su etiqueta de inicio y no tiene ningún tipo de contenido, limitándose la información y configuración de la misma a los atributos de los cuales dispone.
La etiqueta se suele insertar en la sección de encabezado del documento web, aunque es posible encontrarla en otros sitios, al final del documento por ejemplo, lo más adecuado es situarla donde se ha indicado.
El formato de la etiqueta con todos sus atributos es el siguiente:
<link href=”valor” hreflang=”valor” media=”valor” rel=”valor” sizes=”valor” types=”valor” ></link>
Entre los atributos a destacar que tiene la etiqueta se encuentran los siguientes:
href: este atributo permite establecer la URL en la que se encuentra el documento el cual se quiere enlazar, con el documento web.
La sintaxis para definir esta etiqueta con el atributo href es la siguiente:
<link href=”valor URL”></link>
hreflang: este atributo permite establecer el lenguaje del documento que se está enlazando, aunque no realiza ninguna función especial en los navegadores, puede ser utilizado por los motores de búsqueda para establecer el idioma.
La sintaxis para definir esta etiqueta con el atributo hreflang es la siguiente:
<link href=”URL” hreflang=”Codigodelenguaje” ></link>
El código de lenguaje se puede consultar utilizando la siguiente dirección de internet:
http://www.w3schools.com/tags/ref_language_codes.asp
rel: el atributo sirve para especificar la relación existente entre el documento web y el documento con el que se está realizando el enlace. El atributo es obligatorio y se ha de incluir.
La sintaxis para definir esta etiqueta con el atributo rel es la siguiente:
<link href=”URL” hreflang=”CodigoLenguaje” rel=”valor”></link>
Entre los posibles valores que se pueden aplicar al atributo rel se encuentran los siguientes:
| Rel | Descripción |
| alternate | Especifica la relación del documento con una versión alternativa del mismo. (Impresora, Espejo, Traducida, Etc.) |
| author | Especifica la relación del enlace con el autor del documento con el que se enlaza. |
| help | Especifica relación con el documento de ayuda. |
| icon | Se utiliza normalmente para asociar un pequeño icono con el documento web. Este icono suele ser visible en la barra de dirección del navegador. |
| license | Especifica la información de copyright sobre el documento web. |
| next | Especifica que el documento web, es parte de una serie de documentos, e indica que el documento que enlaza es el siguiente en la serie. |
| prefetch (prerender) | Sirve para especificar desde el documento web que se está cargando, cual es el próximo documento web que se ha de cargar, de esta forma el navegador solicita una petición de cache, cargándose posteriormente la página más rápidamente. |
| prev | Especifica que el documento web, es parte de una serie de documentos, e indica que el documento que enlaza es el anterior en la serie. |
| search | Especifica que el enlace es a la utilidad de búsqueda en el documento. |
| stylesheet | El más utilizado, especifica que el documento con el cual se enlaza es una hoja de estilos a importar, que aplicara formato al documento web. |
sizes: El atributo se utiliza solo en caso de haber especificado anteriormente en el atributo rel el valor icon, y permite especificar el tamaño del atributo con el cual se está enlazando, aunque es soportada por el lenguaje html5, los navegadores a fecha actual no la implementan.
La sintaxis para definir esta etiqueta con el atributo sizes es la siguiente:
<link rel="icon" href="demo_icono.gif" type="image/gif" sizes="16x16">
Entre sus posibles valores se pueden encontrar los siguientes:
| Sizes | Descripción |
| AnchoxAlto | Se ha de especificar los valores de ancho y alto insertando entre ellos el símbolo “x”, por ejemplo 16×16, 32×32, se pueden insertar varios tamaños separados por espacios en blanco. “16×16 32×32”. |
| any | Indica que el icono con el cual se enlaza es escalable, como si de una imagen svg se tratara. |
type: Sirve para especificar el tipo MIME[1] del documento con el que se está realizando el enlace. Se pueden consultar los tipos mime en la siguiente dirección:
http://www.iana.org/assignments/media-types
La sintaxis para definir esta etiqueta con el atributo types es la siguiente:
<link type=”ValorMime”>
Entre los tipos se puede encontrar el de hoja de estilos como es “text/css”, o el de texto plano “text/plain”, etc.
media: este atributo se ha modificado bastante en esta última versión del lenguaje, y aunque nos centraremos posteriomente más en el mismo, inicialmente servirá para indicar el tipo de dispositivo para el cual se esta realizando el enlace.
La sintaxis para definir esta etiqueta con el atributo media es la siguiente:
<link rel="Valor" type="Valor" href="URL" media="valor">
Entre los posibles valores de dispositivos que encontramos para el atributo media, se encuentran los siguientes:
| Media | Descripción |
| all | Valor por defecto, especifica todo tipo de dispositivos. |
| aural | Sirve para especificar que el dispositivo para el que se enlaza es un sintetizador de voz. |
| braille | Especifica un dispositivo de tipo braille. |
| handhelp | Especifica un dispositivo de mano, de pantalla pequeña o ancho de banda limitado. |
| projection | Especifica un dispositivo de tipo projector. |
| Especifica un dispositivo de impresión. | |
| screen | Especifica un dispositivo de pantalla de pc. |
| tty | Especifica un dispositivo de tipo teletipo, que utiliza caracteres de tamaño fijo. |
| tv | Especifica un dispositivo de tipo televisión. |
Como se ha indicado anteriormente el atributo tiene muchas más opciones que se profundizaran en las mismas a lo largo del desarrollo del temario.
El siguiente ejemplo muestra el uso de la etiqueta <link> en conjunto con los atributos comentados anteriormente:
<!DOCTYPE html>
<html>
<head>
<title>Ejercicios y prácticas HTML , aprendoencasa.com</title>
<meta charset=”ISO-8859-1”>
<meta name=”application-name” content=”Ejercicios y prácticas 1.0”>
<meta name=”author” content=”Lucia Castillo”>
<meta name=”description” content=”Prácticas y ejercicios de HTML”>
<meta name=”generator” content=”aprendoencasa.coms”>
<meta name=”keywords” content=”ejercicios, practicas, programacion, html, etc”>
<meta http-equiv=”refresh” content=”400”>
<meta http-equiv=”content-type” content=”text/html; charset=ISO-8859-1”>
<link rel="stylesheet" type="text/css" href="theme.css" hreflang=”es”>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
</body>
</html>
