Etiquetas HTML de relación

ATRÁS ᐳ html ᐳ Etiquetas HTML de relación

Habíamos mencionado que la estructura de un documento HTML debía contener siempre dos etiquetas HTML principales: la cabecera de la página o <head> y el cuerpo de la página o <body> . El primero de ellos, del que hablaremos en este apartado, se encarga de contener etiquetas de metadatos (información sobre el documento) así como establecer relaciones con otros documentos. El segundo de ellos, se encarga de la parte visual que verá el usuario en el navegador.

Cabecera del documento

Existen varias etiquetas que se suelen utilizar en esta sección de cabecera del documento:

Etiqueta	Atributos	Descripción
`<title>`		Título de la página (pestaña o título del navegador o en buscadores).
`<base>`	`href`, `target`	URL base del documento (usado para gestionar rutas relativas).
`<link>`	`href`, `hreflang`, `rel`, `media`, `type`	Establece una relación del documento actual con otro externo.
`<meta>`	`name`, `content`, `http-equiv`, `charset`	Establece un metadato específico en el documento actual.
`<style>`	`media`, `type`	Crea estilos CSS que afectarán únicamente al documento actual.
`<script>`	`src`, `type`, `charset`, `async`, `defer`	Indica un script a cargar o ejecutar en la página actual.

Existe dos etiquetas que tradicionalmente solían incluirse en la cabecera de un documento HTML. Sin embargo, actualmente también pueden utilizarse en el cuerpo de la página. Hablamos de las etiquetas <style> y <script>.

La etiqueta <style> sirve para incluir estilos CSS en la propia página HTML.
La etiqueta <script> sirve para incluir código Javascript en la propia página HTML (o de forma externa), pero tiene una explicación mucho más extensa y la retomaremos más adelante.

Título y codificación

En el interior de la etiqueta <head> es aconsejable, como mínimo, indicar siempre las siguientes dos etiquetas:

<head>
  <title>Título del documento</title>
  <meta charset="utf-8" />
</head>

En este ejemplo, la etiqueta <meta> indica que el navegador utilice la codificación UTF-8 para mostrar el texto. Es muy importante utilizar siempre de forma coherente una misma codificación en todos nuestros documentos, de esta forma evitaremos problemas con vocales acentuadas, o carácteres como ñ , ¿ , ¡ u otros.

Para evitar este tipo de problemas, se recomienda siempre realizar los siguientes pasos:

Utilizar la etiqueta <meta charset="utf-8"> en la cabecera del documento.
Guarda el archivo HTML con codificación UTF-8 en las opciones del editor que utilicemos.
Si aún tenemos problemas de codificación, revisar la configuración del servidor web (server-side).

De esta forma reducimos la probabilidad de tener problemas de este tipo.

Otros documentos

Como habíamos comentado, la etiqueta <link> permite establecer relaciones con otros documentos. De esta forma, el navegador o cualquier sistema capaz de leer código web puede saber que un documento HTML está relacionado con otro documento (independientemente del formato que sea) y así relacionarse entre ellos.

Veamos algunos ejemplos de relaciones que podemos establecer.

Versiones alternativas

Con el valor alternate en el atributo rel de la etiqueta <link> podemos indicar que el documento actual tiene versiones alternativas en otros formatos o idiomas. El siguiente ejemplo 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>

Referencias a datos

El atributo rel también nos permite indicar el tipo de relación que tiene el documento referenciado. Por ejemplo, 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="http://twitter.com/Manz" />
  <link rel="help" href="http://lenguajehtml.com/ayuda/" />
  <link rel="search" href="http://lenguajehtml.com/busqueda/" />
  <link rel="license" href="http://lenguajehtml.com/licencia/" />
</head>

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 fue un invento de Internet Explorer para colocar el icono cuando el usuario añadía una página a favoritos:

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

Desgraciadamente, esta característica no está definida en la especificación, por lo que cada navegador (¡y cada sistema operativo!) la implementa como quiere. Hay navegadores que sólo soportan favicon en formato PNG, otros que solo soportan resoluciones específicas, etc.

Para generar los favicons de una forma más cómoda, aconsejo utilizar la herramienta Real Favicon Generator, a la cuál le pasamos un logo a alta resolución y nos generará un .zip con el código y diferentes versiones y resoluciones de los iconos.

Posicionamiento (Google)

La etiqueta <link> también nos permite indicar algunos datos interesantes de cara al buscador para evitar ser marcado como contenido duplicado o indicarle al buscador exactamente las URLs que debe tener en cuenta. Para ello, podemos utilizar los siguientes atributos:

Atributo rel	Atributo href	Significado
`canonical`	Dirección URL	URL exacta que Google debería asociar al documento actual en el buscador.
`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.

Estilos CSS de documento

Por último, otra de las funciones más conocidas y utilizadas de la etiqueta <link> es la de establecer una relación con un documento CSS para aplicar estilos a la página HTML actual (y a todas las que establezcan una relación a ella).

Para ello, no hay más que utilizar el valor stylesheet en el atributo rel de la siguiente forma:

<head>
  <link rel="stylesheet" href="index.css" type="text/css" />
</head>

Con esto, el documento HTML estará relacionado con el documento CSS index.css , y aplicará todos los estilos CSS que se encuentren en él. El atributo type es opcional y no se suele indicar, puesto que el tipo por defecto de las hojas de estilos ya es text/css.

Tabla de contenidos