4.5. Otros tipos de enlaces (Introducción a XHTML)

Los enlaces mostrados en las secciones anteriores son los más utilizados por las páginas web. Los enlaces creados con la etiqueta <a> permiten enlazar cualquier tipo de recurso desde cualquier página. La característica más importante de estos enlaces es que el usuario debe activar la carga de los recursos. En otras palabras, el navegador no carga ningún recurso enlazado con la etiqueta <a> a menos que el usuario pinche sobre el enlace.

Además de estos enlaces, las páginas HTML pueden incluir otro tipo de enlaces que cargan los recursos automáticamente. Si una página HTML utiliza archivos CSS para aplicar estilos a sus contenidos, no es lógico que los enlace con la etiqueta <a> y espere a que el usuario pinche sobre el enlace para así cargar los archivos CSS. De la misma forma, muchas páginas web dinámicas necesitan que el navegador cargue varios archivos JavaScript para funcionar correctamente.

HTML define las etiquetas <script> y <link> para enlazar recursos que se deben cargar automáticamente. Cuando el navegador encuentra alguna de estas dos etiquetas, descarga los recursos enlazados y los aplica a la página web.

La etiqueta <script> tiene dos modos de funcionamiento, ya que se emplea tanto para insertar un bloque de código JavaScript en la página como para enlazar un archivo JavaScript externo.

Etiqueta	<script>
Atributos comunes	-
Atributos propios	`src = "url"` - Indica la dirección del archivo que contiene el código `type = "tipo_de_contenido"` - Permite "avisar" al navegador sobre el tipo de código que se incluye (normalmente JavaScript) `defer = "defer"` - El código no va a modificar el contenido de la página web `charset = "tipo_de_charset"` - Describe la codificación del código enlazado
Tipo de elemento	Bloque y en línea (también puede ser una etiqueta vacía)
Descripción	Se emplea para enlazar o definir un bloque de código (normalmente JavaScript)

Aunque la etiqueta <script> permite enlazar código de varios lenguajes de programación, el uso habitual de <script> consiste en enlazar un archivo JavaScript externo:

<head>
  <script type="text/javascript" src="http://www.ejemplo.com/js/inicializar.js"></script>
</head>

El atributo type utilizado habitualmente para los archivos JavaScript es "text/javascript". El atributo src es equivalente al atributo href de los enlaces creados con la etiqueta <a>. La URL indicada en el atributo src puede ser absoluta o relativa y externa o interna.

Además de enlazar un archivo JavaScript externo, la misma etiqueta <script> también permite incluir en la página web un bloque de código JavaScript:

<html>
<head>
  <script type="text/javascript">
  //<![CDATA[
    window.onload = function() { alert("La página se ha cargado completamente"); }
  //]]>
  </script>
</head>
<body>
...
</body>
</html>

Cuando se incluye código JavaScript en la propia página XHTML, se debe insertar dentro de una sección especial llamada CDATA. Para ello, el código JavaScript se debe encerrar entre <![CDATA[ y ]]>. Cuando el navegador encuentra una sección de este tipo, no procesa su contenido como si fuera XHTML y por tanto no tiene en cuenta los posibles errores de validación de XHTML.

De esta forma, se pueden construir páginas XHTML válidas y código JavaScript correcto. En los capítulos posteriores se profundiza en el concepto de validación de páginas XHTML. Los caracteres // al comienzo y al final de la sección CDATA son necesarios para los navegadores que no son capaces de procesar correctamente estas secciones.

La etiqueta <script> (tanto cuando enlaza, como cuando incluye directamente el código) puede aparecer en cualquier parte del documento HTML, aunque normalmente se incluye dentro de la cabecera de la página (<head>...</head>).

La segunda etiqueta de XHTML para enlazar recursos es <link>, que permite enlazar y relacionar la página con otros recursos externos.

Etiqueta	<link>
Atributos comunes	básicos, internacionalización y eventos
Atributos propios	Los siguientes con el mismo significado que para la etiqueta "a": charset, href, hreflang, type, rel y rev `media = "tipo_de_medio"` - Indica el medio para el que debe aplicarse la relación
Tipo de elemento	Etiqueta vacía
Descripción	Se emplea para enlazar y establecer relaciones entre el documento y otros recursos

Al contrario que <script>, la etiqueta <link> solamente se puede incluir dentro de la cabecera del documento. Se pueden añadir tantas etiquetas <link> como sean necesarias, pero siempre dentro de <head>...</head>.

El atributo media hace referencia al medio para el que es válida la relación con el recurso enlazado. Los medios disponibles también están estandarizados, siendo los más comunes screen para los contenidos mostrados en pantalla, print para las impresoras y handheld para los dispositivos móviles.

El uso habitual de la etiqueta <link> es el de enlazar las hojas de estilos CSS utilizadas por las páginas web:

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

En este caso, es habitual establecer los atributos rel y type para indicar el tipo de recurso enlazado y su relación con la página web. La URL del recurso enlazado se indica en el atributo href, que admite tanto URL absolutas como relativas.