No. 10 de 22 de articulos. HTML5

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.

Pulsa el botón leer más para continuar aprendiendo sobre esta etiqueta html5:

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.
print 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>

[1] Multipurpose Internet Mail Extensions o MIME (en español “extensiones multipropósito de correo de internet”) son una serie de convenciones o especificaciones dirigidas al intercambio a través de Internet de todo tipo de archivos (texto, audio, vídeo, etc.) de forma transparente para el usuario.

Navegacion SeriesAnterior en la serie...Siguiente en la serie...

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies