6.3. Cabecera

La cabecera del documento HTML es el contenido del elemento <head> e incluye información ajena al contenido estricto de la página HTML.

Nota

El orden de los elementos de la cabecera es indiferente.

<title>

Define cuál es el título que el navegador mostrará en la barra superior de la ventana.
title (title)

Su único contenido posible es simple texto. Por ejemplo:

<title>Página de prueba</title>

Es el único elemento obligatorio que debe incluir la cabecera.

El resto de etiquetas las agruparemos en:

6.3.1. Etiquetas de complemento

Son aquellas que permiten indicar qué código Javascript o CSS complementa el contenido HTML de la página.

<style>

Permite declarar estilos CSS exclusivos para el documento

<script>

Refiere o incrustar código Javascript
style (style)

Volveremos a esta etiqueta cuando tratemos cómo declarar el CSS aplicable a la página. Por ahora, bástenos con un ejemplo:

<style>
   table, table th, table td {
      border: solid black 1px;
   }
</style>

Nota

Para referir estilo CSS que se encuentre en fichero aparte debe usarse <link>, que se explica un poco más adelante.

Nota

Al igual que con <link>, puede usarse un atributo title para dar nombre al estilo.

script (script)

Podemos usarla de dos formas. Como <style>, escribiendo el código Javascript dentro del propio documento:

<script>
   window.onload = function() {
      console.log("Hemos acabado de cargar la página");
   }
</script>

O bien, refiriendo dónde se encuentra el código para que el navegador lo cargue:

<script src="scripts/codigo.js"></script>

Advertencia

Ambas formas en un mismo elemento son incompatibles: o se incrusta el código o se refiere. Observe, además, cómo en el segundo caso se cierra el elemento sin usar el modo abreviado, ya que al ser un elemento que puede tener contenido, tal modo es ilegal.

Este elemento puede aparecer también dentro del cuerpo del documento.

Ver también

Aunque se escapa del propósito de estos apuntes, es importante tener presente cómo carga y ejecuta los scripts el navegador. El comportamiento predeterminado es que al encontrarse con una etiqueta <script>, el navegador para de procesar el HTML y se dedica a cargar y ejecutar el script. Por tanto, los elementos HTML posteriores al elemento <script> no existirán aún y, en principio, no se podrán manipular. Sin embargo, cuando el script es externo, o sea, se usa el atributo src, este comportamiento puede alterarse mediante el uso de los atributos async y defer. Una lectura imprecindible para entender cómo actúan es este artículo somostechies.com.

Tanto al cargar una hoja de estilos como al cargar un script externos se puede forzar a que el navegador compruebe la integridad del fichero:

<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
 integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==">
</script>

El navegador comprobará la integridad haciendo el equivalente a la siguiente orden:

$ wget -qO - 'https://unpkg.com/leaflet@1.4.0/dist/leaflet.js' | openssl dgst -sha512 -binary | base64

Ver también

Para más información consulte la developer.mozilla.org sobre SRI.

Es posible que al escribir código CSS o código Javascript usemos algún carácter que provoque que el navegador interprete mal y provoque algún fallo en el procesamiento de la página. Para evitarlo, podemos indicar al navegador que ambos códigos son secciones CDATA:

<style>
   /*<![CDATA[*/
      table, table th, table td {
         border: solid black 1px;
      }
   /*]]>*/
</style>

<script>
   //<![CDATA[
      window.onload = function() {
         alert("Ya se ha cargado la página");
      }
   //]]>
</script>

6.3.2. Etiquetas de relación

Son aquellas que permiten establecer relaciones con otros documentos.

<base>

Establece la URL base para resolver rutas relativas

<link>

Establece una relación entre el documento y otro externo
base (base)

Al hablar sobre hiperenlaces se definió el concepto de ruta relativa relativa y cómo formar la ruta absoluta se concatenan la URL base y la ruta relativa relativa (a partir de ahora, ruta relativa a secas). Este elemento permite redefinir la URL base para sea una distinta a la que se esperaría. Así, si nuestro documento tiene la URL:

http://docs.iescdl.es/~josem/XML/05.web/01.html/03.head.html

su URL base es:

http://docs.iescdl.es/~josem/XML/05.web/01.html/

y las rutas relativas deberían añadirla para obtener la ruta absoluta. Sin embargo, este elemento permite definir una URL distinta. Por ejemplo:

<base href="http://docs.iescdl.es/~josem/XML/index.html">

En este caso, la URL base para los enlaces será:

http://docs.iescdl.es/~josem/XML/

El elemento permite también definir el valor predeterminado para el atributo target de <a>:

<base target="_blank">

6.3.3. Etiquetas de metadatos

Son aquellas que ofrecen metainformación sobre el contenido de la página.

<meta>

Declara metadatos
meta (meta)

Los metadatos pueden definirse de muy diversos modos, aunque lo habitual es que se distingan unos de otros a través del atributo name. Sin embargo, hay una excepción a ello muy importante: la definición de la codificación del documento:

<meta charset="UTF-8">

que es recomendable incluir siempre, aunque no sea obligatorio, ya que la codificación predeterminado para los documentos HTML es, precisamente UTF-8. Otros metadatos que sí se definen con el atributo name son:

Metadatos sobre el documento

  • Descripción del documento:

    <meta name="desc" content="Cabecera del documento HTML5">

  • Autor del documento:

    <meta name="author" content="Perico de los Palotes">

  • Generador (aplicación que ha generado la página web):

    <meta name="generator" content="Sphinx">

    Software con el que se ha creado la página.

  • Comportamiento de la ventana visible del navegador:

    <meta name="viewport" content="width=device-width, initial-scale=1">

    Consulte esta entrada para más información.

Metadatos para buscadores

  • Palabras clave del documento, separadas por comas:

    <meta name="keywords" content="html, head, html5, desarrollo web" >

    Advertencia

    Esta etiqueta no suelen usarla los buscadores, ya que se presta a que se rellene con multitud de términos simplemente con el fin de posicionar mejor la página.

  • Indica a los buscadores si debe indexar la página:

    <meta name="robots" content="index, nofollow">

    Se pueden indicar (no)index, (no)follow, (no)snippet (mostrar fragmentos de la página en el buscador), (no)archive (guardar cacheo), (no)imageindex (no indexar imágenes para los buscadores de imágenes), none (equivale a noindex y nofollow).

Fuera de este atributo name, hay otros metadatos:

Metadatos que equivalen a campos de cabecera HTTP:

Para definirlos se utiliza el atributo http-equiv. En este caso, el valor de http-equiv define el nombre del campo, y el valor del atributo content, el valor de ese mismo campo. Sin embargo, no pueden definirse metadatos para todos los campos definidos en el protocolo y, de hecho, la especificación sólo reconoce unos pocos, algunos de los cuáles, no obstante, desaconseja. Algunos interesantes son:

  • Redirige a otra web después de un tiempo:

    <meta http-equiv="refresh" content="20; url=http://docs.iescdl.es">

  • Define el estilo predeterminado:

    <meta http-equiv="default-style" content="clasico">

    En este caso, content introduce el nombre del estilo que el navegador debe considerar predeterminado y que debe coincidir con el nombre que se le haya dado a través del atributo title en los elementos <link> o <style>.

  • También, aunque sólo para la variante HTML y no la XML, es aún permitido por la especificación content-type para definir el tipo de documento y la codificación:

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    Advertencia

    Este método, que se usaba en la versión 4 de HTML y es aún adminitido, es mejor no usarlo, ya que es incompatible con el ya comentado charset, que es modo moderno de indicar la codificación. Se cita, simplemente, por razones históricas.

Prudencia

Otros valores para http-equiv, que llegaron a usarse, se consideraron en algún momento obsoletos y es probable que ya no tengan soporte en los navegadores:

<!-- Cacheo -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">

<!-- Caducidad del documento -->
<meta http-equiv="expires" content="Mon, 11 Feb 2019 19:50:14 GMT">
Metadatos para redes sociales

Algunas redes sociales como Facebook o Twitter son capaces de leer ciertos elementos <meta> con el objeto de crear automáticamente enlaces a la página:

Facebook
<head prefix="og: http://ogp.me/ns#">
   <!-- Open Graph Data -->
   <meta property="og:type" content="article">
   <meta property="og:title" content="Cabecera de HTML">
   <meta property="og:image" content="files/head.jpg">
   <meta property="og:description" content="Apuntes sobre la cabecera head de HTML">

   <!-- Otras etiquetas -->
</head>

Ver también

Puede echar un vistazo a la web del Open Graph Protocol

Twitter
<!-- Twitter Card Data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@SoyYo">
<meta name="twitter:title" content="Cabecera de HTML">
<meta name="twitter:image:src" content="files/head.jpg">
<meta name="twitter:description" content="Apuntes sobre la cabecera head de HTML">

Ver también

En DigitalOcean tienen pequeño tutorial al respecto.

6.3.4. Ejercicios propuestos

Nota

Escriba el documento HTML completo, aunque deje sin contenido el cuerpo, y compruebe la validez de la solución usando a un validador adecuado.

  1. Escribir la cabecera de un documento HTML que cumpla con lo siguiente:

    1. El título de la página debe ser «Ejercicio 1».

    2. La codificación de caracteres debe ser la que se esté utilizando para escribir el documento.

    3. Se utiliza la librería JQuery (busque en internet un URL de donde obtenerla).

    4. Indique el nombre del autor del documento.

    5. Procure que se vea bien la página en dispositivos móviles.

    6. Defina una redirección hacia https://www.disney.com a los 15 segundo de cargarse la página.

    7. Añada información para controlar cómo se verán los enlaces a la página desde Twitter.

    8. Se utilizan dos hojas de estilo para la página:

      • Uno que se encuentra dentro del subdirectorio «estilos» dentro de un fichero llamado «aspecto.css».

      • Otra con las sentencias incluidas dentro del propio documento (escriba cualquier sentencia CSS válida).

  2. Escribir la cabecera de un documento HTML que cumpla con lo siguiente:

    1. El título de la página debe ser «Ejercicio 1».

    2. La codificación de caracteres debe ser la que se esté utilizando para escribir el documento.

    3. La página contendrá un mapa de OpenStreetMap gestionado con la librería Leaflet. Incluya la hoja de estilos y los scripts de Javascript que exige la documentación de Leaflet.

    4. Indique el autor del documento.

    5. Incluya una pequeña descripción del documento.

    6. Indique que el favicon es el fichero logo.ico dentro del directorio images, que se encuentra en la raíz del servidor.

    7. Añada un enlace para la página de índice (index.html) y otro enlace para la siguiente página (doc2.html).

    8. Añada información para controlar cómo se veran los enlaces a la página desde Facebook.

    9. Defina dos estilos alternativos para la página:

      1. «estilo1», que se encuentra en las hojas de estilos a.css y b.css

      2. «estilo2», que se encuentra en la hoja de estilos c.css.

      Todos los archivos CSS se encuentran en el mismo directorio que el HTML. El estilo predeterminado es «estilo1».