Curso HTML – Módulo 10: Cabecera del documento y metadatos

Cuando visitamos una página web, solemos fijarnos en su contenido: títulos, imágenes, enlaces, formularios o vídeos. La cabecera en HTML también cumple una función esencial. Sin embargo, antes de presentar esa información, el navegador necesita interpretar otra parte fundamental del documento: su cabecera.

La cabecera en HTML, definida mediante el elemento <head>, contiene información sobre la página y referencias a los recursos que necesita.

En este módulo aprenderás a configurar títulos, codificación, metadatos, hojas de estilo, iconos y scripts. También veremos cómo se relaciona esta información con el posicionamiento, la accesibilidad y el rendimiento.

Objetivos del módulo

Al finalizar este módulo deberías ser capaz de:

• Diferenciar <head>, <header> y los encabezados de contenido.
• Construir la cabecera de un documento HTML.
• Configurar la codificación de caracteres y el título.
• Añadir metadatos para dispositivos móviles, buscadores y redes sociales.
• Incorporar hojas de estilo, favicons y archivos JavaScript.
• Diferenciar la carga de scripts clásicos y módulos.
• Comprender las principales indicaciones de precarga.
• Detectar errores frecuentes y comprobar el resultado en el navegador.

1. Qué es la cabecera en HTML

Un documento HTML suele organizarse en dos partes principales:

<!doctype html>
<html lang="es">
<head>
  <!-- Información y recursos del documento -->
</head>
<body>
  <!-- Contenido de la página -->
</body>
</html>

Por un lado, el elemento <head> reúne metadatos y referencias a recursos. Por otro lado, <body> contiene el contenido de la página.

Aunque la cabecera no se presenta como una sección visible, sus efectos sí se perciben: determina el título de la pestaña, permite cargar estilos y ayuda al navegador a interpretar el documento.

Diferencia entre head, header y h1

Por ejemplo, observa cómo pueden convivir:

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Curso de HTML | TecnoPS</title>
</head>
<body>
  <header>
    <h1>Curso de HTML</h1>
    <p>Aprende a crear páginas web paso a paso.</p>
  </header>
</body>
</html>

Por tanto, el título de la pestaña y el encabezado visible pueden parecerse, pero cumplen funciones distintas.

2. HTML actual: un estándar que evoluciona

En muchos tutoriales encontrarás la denominación HTML5. Sigue siendo habitual para referirse al HTML moderno, pero el estándar actual se mantiene como HTML Living Standard: una especificación que evoluciona continuamente.

Esto significa que aprender HTML requiere conocer tanto sus fundamentos como la compatibilidad de las características que vayas a utilizar. Que una función aparezca en la especificación no garantiza que todos los navegadores la implementen del mismo modo.

Para empezar, esta es una cabecera sencilla:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mi primera página</title>
</head>

Cada línea tiene un propósito. A continuación, vamos a estudiarlas y ampliar el ejemplo.

3. Codificación de caracteres con UTF-8

La codificación indica cómo interpretar los bytes del archivo como caracteres:

<meta charset="utf-8">

En concreto, UTF-8 permite representar letras, tildes, símbolos y caracteres de numerosos idiomas.

Sin una interpretación correcta, un texto como el siguiente puede terminar mostrando caracteres extraños.

Programación y diseño

La declaración debe situarse al principio del <head> y quedar completamente dentro de los primeros 1024 bytes del documento. Además, el editor debe guardar realmente el archivo como UTF-8. Por tanto, la etiqueta no convierte por sí sola un archivo guardado con otra codificación.

Qué comprobar si aparecen caracteres incorrectos

1. La codificación utilizada al guardar el archivo.
2. La declaración charset.
3. La cabecera HTTP Content-Type enviada por el servidor.
4. La codificación de los datos de origen, si proceden de una base de datos.

En una página servida por HTTP, una declaración de codificación del servidor puede prevalecer sobre la indicada dentro del documento.

4. El idioma se declara en html

El idioma principal del documento se indica mediante lang:

<html lang="es">

Aunque no se coloca dentro de <head>, forma parte de la configuración básica de la página.

También puedes marcar fragmentos en otro idioma:

<p>
  En inglés, cabecera del documento se expresa como
  <span lang="en">document head</span>.
</p>

De este modo, el idioma declarado ayuda a interpretar el texto, por ejemplo, al utilizar herramientas de lectura asistida. No sustituye a la codificación: lang identifica el idioma y charset identifica cómo se representan los caracteres.

5. El título del documento con title

El elemento <title> define el título del documento:

<title>Cabecera en HTML: etiquetas y metadatos | TecnoPS</title>

Para empezar, una buena propuesta identifica el contenido concreto y, si resulta útil, añade el nombre del sitio.

Compara:

<title>Página</title>

con:

<title>Cómo añadir subtítulos a un vídeo en HTML | TecnoPS</title>

Como puedes ver, el segundo permite reconocer mejor el contenido.

Buenas prácticas para el título

• Utiliza un título específico para cada página.
• Describe fielmente su contenido.
• Evita repetir palabras clave de forma artificial.
• Mantén coherencia entre el título y el encabezado principal.
• Evita acumular información que dificulte su lectura.

Google puede construir el título que muestra en sus resultados a partir de distintas señales; no está obligado a reproducir literalmente el contenido de <title>. Además, no existe una longitud de caracteres que garantice que aparezca completo en todos los dispositivos.

6. La meta descripción

La descripción resume el contenido:

<meta name="description" content="Aprende a configurar la cabecera de una página HTML con títulos, metadatos, iconos, estilos y scripts." >

En pocas palabras, debe ayudar a entender qué encontrará el visitante.

Cómo redactarla

Piensa en tres preguntas:

• ¿Qué explica esta página?
• ¿Qué aprenderá o resolverá quien la visite?
• ¿Qué la diferencia de otras páginas del sitio?

Evita descripciones genéricas como:

<meta name="description" content="La mejor web con mucha información.">

La descripción puede utilizarse como fragmento del resultado de búsqueda, pero Google también puede seleccionar texto de la página según la consulta. Por eso conviene escribirla bien sin asumir que siempre se mostrará.

7. Viewport y visualización en dispositivos móviles

Esta configuración es habitual en páginas adaptables:

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

Sus componentes principales son:

Por tanto, la etiqueta prepara el viewport, pero el diseño adaptable requiere también CSS.

Evita impedir el zoom

No añadas restricciones de ampliación sin necesidad:

<!-- Evita esta configuración -->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, user-scalable=no"
>

8. Otros metadatos útiles

Existen metadatos adicionales, aunque no todos son necesarios en cualquier proyecto.

Autor

<meta name="author" content="TecnoPS">

En este caso, el metadato identifica al autor del documento.

Color de la interfaz del navegador

<meta name="theme-color" content="#15324f">

Los navegadores compatibles pueden utilizar este color en determinadas partes de su interfaz.

También pueden declararse variantes:

<meta
  name="theme-color"
  content="#ffffff"
  media="(prefers-color-scheme: light)"
>

<meta
  name="theme-color"
  content="#111827"
  media="(prefers-color-scheme: dark)"
>

Esquemas de color admitidos

<meta name="color-scheme" content="light dark">

En este ejemplo, el metadato informa de que el documento admite ambos esquemas. No diseña automáticamente un tema oscuro completo: los estilos deben acompañar esa decisión.

9. Indexación y URL canónica

Dos conceptos que conviene distinguir son la indexación y la identificación de una URL preferida.

Meta robots

Por ejemplo:

<meta name="robots" content="noindex">

Expresa una instrucción para que los buscadores compatibles no indexen esa página.

Sin embargo, no es una medida de privacidad: una página pública sigue siendo accesible aunque incluya noindex.

URL canónica

<link rel="canonical" href="https://example.com/curso-html/cabecera/" >

Identifica la URL preferida para ese contenido.

En cambio, no redirige al visitante ni bloquea otras direcciones. Debe ser coherente con la página y con la configuración del sitio. El valor canonical forma parte de las relaciones que pueden declararse con rel.

10. Metadatos para compartir en redes sociales

Open Graph permite describir cómo se representa una página al compartirla en servicios compatibles.

Ejemplo para una página ficticia:

<meta property="og:type" content="article">
<meta property="og:locale" content="es_ES">
<meta property="og:site_name" content="Mi academia">

<meta
  property="og:title"
  content="Aprende a configurar la cabecera en HTML"
>

<meta
  property="og:description"
  content="Una guía práctica de títulos, metadatos y recursos del documento."
>

<meta
  property="og:url"
  content="https://example.com/curso-html/cabecera/"
>

<meta
  property="og:image"
  content="https://example.com/imagenes/cabecera-html.jpg"
>

<meta
  property="og:image:alt"
  content="Ejemplo de código de una cabecera HTML"
>

Las propiedades básicas del protocolo son og:title, og:type, og:image y og:url. Por eso, debes sustituir los recursos y las direcciones del ejemplo por los reales.

La imagen social puede ser la misma que ya utilizas como imagen destacada de la entrada.

11. Incorporar CSS con link y style

Para cargar una hoja de estilo externa:

<link rel="stylesheet" href="estilos.css">

Como alternativa, puedes incluir reglas en el propio documento:

<style>
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
  }
</style>

Las hojas externas permiten compartir estilos entre páginas. En cambio, los estilos internos resultan útiles en demostraciones pequeñas o documentos independientes.

El elemento <link> es un elemento vacío: no lleva una etiqueta de cierre </link>. En HTML moderno tampoco necesitas indicar type=’text/css’ para una hoja CSS.

12. Añadir un favicon

El favicon identifica visualmente el sitio, por ejemplo, en la pestaña del navegador.

Puedes declarar un SVG y una alternativa ICO:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">

O utilizar PNG:

<link
  rel="icon"
  href="/favicon-32.png"
  type="image/png"
  sizes="32x32"
>

En cualquier caso, los archivos deben existir en esas rutas. Es decir, declarar un icono no lo crea ni convierte su formato. La relación icon comunica al navegador el propósito del recurso.

Consejo de diseño

Prueba el favicon a tamaño pequeño. Un logotipo con mucho texto puede resultar ilegible en una pestaña.

13. Cargar JavaScript: script, defer y async

Los scripts pueden influir en el procesamiento del documento.

Script clásico sin atributos

<script src="aplicacion.js"></script>

Al encontrarlo, el navegador normalmente detiene el análisis del HTML mientras obtiene y ejecuta el script.

Script con defer

<script src="aplicacion.js" defer></script>

En scripts clásicos externos, permite descargar el archivo mientras continúa el análisis y ejecutarlo después de analizar el documento. Varios scripts con defer mantienen su orden.

Script con async

<script src="estadisticas.js" async></script>

Se descarga en paralelo y se ejecuta cuando está disponible. Sin embargo, no garantiza el orden entre archivos.

Módulos JavaScript

<script type="module" src="aplicacion.js"></script>

Los módulos permiten utilizar import y export, y se difieren de forma predeterminada. Por eso, para los ejemplos con módulos, utiliza un servidor local en lugar de abrir directamente el archivo con file://.

Elección práctica

14. Import maps: nombres para los módulos

Un mapa de importaciones permite asociar nombres con direcciones:

<script type="importmap">
{
  "imports": {
    "utilidades": "./js/utilidades.js"
  }
}
</script>

<script type="module" src="./js/aplicacion.js"></script>

En aplicacion.js:

import { saludar } from "utilidades";

saludar();

Y en utilidades.js:

export function saludar() {
  console.log("Bienvenido al curso de HTML");
}

En primer lugar, el mapa debe estar disponible antes de las importaciones que lo necesitan. Resuelve nombres de módulos; no sustituye a un gestor de paquetes ni descarga dependencias por sí mismo.

15. Precarga de recursos y rendimiento

En ocasiones interesa anticipar la descarga de un recurso importante:

<link
  rel="preload"
  href="/fuentes/texto.woff2"
  as="font"
  type="font/woff2"
  crossorigin
>

Además, la fuente todavía debe utilizarse desde CSS:

@font-face {
  font-family: "Texto";
  src: url("/fuentes/texto.woff2") format("woff2");
  font-display: swap;
}

preload anticipa la descarga; no aplica por sí solo el recurso. El atributo as identifica su destino y debe corresponder con su utilización posterior. Por eso, una configuración incoherente puede impedir que se reutilice la descarga.

Otras relaciones

Estas indicaciones deben responder a necesidades medidas. De lo contrario, añadir conexiones o descargas innecesarias consume recursos y puede competir con contenido más importante.

16. La etiqueta base y las rutas relativas

<base> establece una URL base para resolver las direcciones relativas:

<base href="https://example.com/curso/">

Con esa configuración:

<a href="modulo-10.html">Módulo 10</a>

apunta a:

https://example.com/curso/modulo-10.html

Por eso, debe declararse antes de otros elementos que dependan de esa base.

Un detalle que puede causar errores

También afecta a enlaces de fragmento como:

<a href="#ejercicios">Ir a los ejercicios</a>

Con una base configurada, ese enlace puede resolverse respecto a una dirección distinta de la página actual.

Utiliza <base> cuando necesites expresamente ese comportamiento. En cambio, para muchas páginas, las rutas habituales son suficientes.

17. Funciones avanzadas: reglas de especulación

Una característica avanzada de la plataforma son las Speculation Rules. Permiten indicar posibles navegaciones futuras para que el navegador pueda anticipar trabajo.

Ejemplo ilustrativo:

<script type="speculationrules">
{
  "prefetch": [
    {
      "source": "list",
      "urls": ["/curso-html/modulo-11/"]
    }
  ]
}
</script>

La dirección debe corresponder a una página real del proyecto.

Conviene distinguir:

• Prefetch: anticipa la obtención de recursos.
• Prerender: puede preparar una página con un trabajo mucho mayor.

Su compatibilidad y comportamiento requieren revisión antes de utilizarlas. Además, no son necesarias en una cabecera básica y deben evaluarse por su impacto en red, consumo y navegación.

18. Ejemplo completo: una página con cabecera funcional

Vamos a crear una pequeña demostración con tres archivos:

No necesita imágenes ni dependencias externas.

index.html

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">

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

  <title>Laboratorio de cabecera HTML | Curso práctico</title>

  <meta
    name="description"
    content="Una demostración de cabecera HTML con título, metadatos, estilos externos y JavaScript."
  >

  <meta name="author" content="Estudiante de HTML">
  <meta name="theme-color" content="#15324f">

  <link rel="stylesheet" href="estilos.css">

  <script src="aplicacion.js" defer></script>
</head>
<body>
  <header class="contenedor">
    <p>Curso de HTML · Módulo 10</p>
    <h1>Laboratorio de cabecera HTML</h1>
    <p>
      Esta página utiliza metadatos, una hoja de estilo
      y un archivo JavaScript.
    </p>
  </header>

  <main class="contenedor">
    <section aria-labelledby="titulo-prueba">
      <h2 id="titulo-prueba">Prueba el título del documento</h2>

      <p>
        Pulsa el botón y observa el nombre que aparece
        en la pestaña del navegador.
      </p>

      <button id="cambiar-titulo" type="button">
        Cambiar título de la pestaña
      </button>

      <p id="estado" role="status"></p>
    </section>

    <section aria-labelledby="titulo-revision">
      <h2 id="titulo-revision">Qué puedes inspeccionar</h2>

      <ul>
        <li>La codificación del documento.</li>
        <li>El título inicial.</li>
        <li>La descripción de la página.</li>
        <li>La descarga de estilos y scripts.</li>
        <li>La diferencia entre head y header.</li>
      </ul>
    </section>
  </main>

  <footer class="contenedor">
    <p>Ejemplo didáctico del módulo 10.</p>
  </footer>
</body>
</html>

estilos.css

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #f3f6fa;
  color: #172033;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

.contenedor {
  width: min(100% - 2rem, 54rem);
  margin-inline: auto;
}

header,
footer {
  padding-block: 2rem;
}

section {
  margin-block-end: 1.5rem;
  padding: 1.5rem;
  background: white;
  border: 1px solid #d5deea;
  border-radius: 0.75rem;
}

button {
  max-width: 100%;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: 0.4rem;
  background: #15324f;
  color: white;
  font: inherit;
  cursor: pointer;
}

button:focus-visible {
  outline: 3px solid #9a4b00;
  outline-offset: 4px;
}

#estado {
  min-height: 1.6em;
}

aplicacion.js

const boton = document.querySelector("#cambiar-titulo");
const estado = document.querySelector("#estado");

const tituloOriginal = document.title;
let tituloAlternativoActivo = false;

boton.addEventListener("click", () => {
  tituloAlternativoActivo = !tituloAlternativoActivo;

  document.title = tituloAlternativoActivo
    ? "¡Título actualizado! | Curso práctico"
    : tituloOriginal;

  estado.textContent = tituloAlternativoActivo
    ? "El título de la pestaña ha cambiado."
    : "Se ha restaurado el título original.";
});

Qué debes observar

El <h1> permanece igual cuando cambia el título de la pestaña. Esto permite comprobar que el encabezado visible y document.title representan información diferente.

Por otra parte, la descripción tampoco aparece como un párrafo: debes buscarla en el código o mediante las herramientas de desarrollo.

19. Cómo comprobar la cabecera

Abre las herramientas de desarrollo del navegador y revisa el ejemplo.

Panel de elementos

Localiza <head> y comprueba sus elementos.

También puedes consultar desde la consola:

document.title
document.characterSet
document.documentElement.lang
document.querySelector('meta[name="description"]')?.getAttribute("content")

Panel de red

Recarga la página y comprueba:

• La descarga correcta de estilos.css.
• El estado de la petición de aplicacion.js.
• La ausencia de respuestas de archivo no encontrado.
• La coincidencia entre las direcciones solicitadas y las esperadas.

Código fuente frente a DOM

Compara el código fuente recibido con el panel de elementos después de pulsar el botón. La demostración modifica el título mediante JavaScript, por lo que el estado actual del documento puede diferir del HTML inicial.

20. Errores frecuentes

Confundir head y header

Los metadatos del documento pertenecen a <head>. En cambio, el encabezado visible pertenece al contenido.

Copiar direcciones del ejemplo sin modificarlas

Dominios como example.com se utilizan para ilustrar la sintaxis. No deben quedar como canónicas o imágenes sociales de una página real.

Repetir metadatos

Revisa el resultado final antes de añadir etiquetas. De hecho, un CMS puede estar generándolas ya.

Cargar recursos inexistentes

Una etiqueta correcta no compensa una ruta incorrecta. Por eso, comprueba las peticiones de red.

Usar async cuando hay dependencias de orden

Dos archivos con async pueden ejecutarse en un orden diferente al esperado.

Precargar demasiados recursos

Antes de añadir una precarga, identifica qué problema intenta resolver.

Tratar noindex como protección

El contenido privado necesita mecanismos de acceso apropiados.

21. Ejercicios prácticos

Ejercicio 1: cabecera básica

Crea un documento con:

• Idioma español.
• Codificación UTF-8.
• Viewport adaptable.
• Título específico.
• Meta descripción.

Por último, comprueba que las tildes se muestran correctamente.

Ejercicio 2: título y encabezado

Utiliza textos distintos para <title> y <h1>. Explica dónde aparece cada uno.

Ejercicio 3: recursos externos

Separa el CSS y JavaScript en archivos independientes. Después, verifica que se descargan correctamente.

Ejercicio 4: favicon

Añade un favicon propio. A continuación, comprueba su ruta y visualización.

Ejercicio 5: inspección de metadatos

Examina una página de tu sitio e identifica su título, descripción, canónica y metadatos sociales.

Ejercicio 6: detectar un error

Cambia temporalmente la ruta de la hoja de estilo. Después, localiza la petición fallida y corrígela.

22. Ejercicios avanzados

Laboratorio de carga de scripts

Crea dos scripts clásicos que escriban mensajes en la consola. Prueba su carga:

1. Sin atributos.
2. Con defer.
3. Con async.

Observa el orden y repite con la caché desactivada. Por último, distingue lo que observas en una ejecución de lo que garantiza cada modalidad.

Módulos e importaciones

Divide una función en un módulo e impórtala desde otro archivo. Después, añade un mapa de importaciones para utilizar un nombre corto.

Revisión editorial de un blog

Selecciona tres entradas y revisa si sus títulos y descripciones distinguen claramente sus contenidos. Propón mejoras sin repetir artificialmente palabras clave.

Comparativa de rendimiento

Compara la carga de una página antes y después de añadir una precarga justificada. Mantén condiciones similares y documenta el resultado, aunque no exista una mejora.

23. Buenas prácticas profesionales

Empieza por lo necesario

Una página sencilla puede funcionar perfectamente con una cabecera pequeña y clara.

Identifica cada documento

Redacta títulos y descripciones específicos.

Respeta la accesibilidad

Declara el idioma y permite ampliar el contenido.

Controla los recursos

Cada script, fuente o conexión anticipada debe tener un propósito.

Revisa el HTML generado

En WordPress y otros CMS, comprueba el resultado que recibe el navegador.

Distingue fundamentos y funciones avanzadas

Aprende primero a configurar correctamente título, codificación, viewport y recursos. Después, incorpora técnicas avanzadas cuando el proyecto las necesite.

24. Conclusión

La cabecera en HTML configura aspectos esenciales de una página: cómo se interpreta su texto, cómo se identifica el documento y qué recursos se cargan.

Dominar <head> implica comprender el propósito de cada elemento y comprobar su resultado. Por tanto, una cabecera bien construida facilita el mantenimiento y evita errores de presentación, metadatos y carga.

En el siguiente módulo trasladaremos el trabajo al contenido visible: aprenderemos a organizar una página con elementos semánticos y a construir layouts adaptables con CSS.