Metadata

El <head>: el espacio invisible

Todo lo que viste hasta acá — párrafos, títulos, listas, imágenes, tablas, formularios — vive en el <body> y produce algo visible en la página. El <head> es diferente: su contenido no se muestra al visitante. Es el espacio donde le decís al navegador y a los motores de búsqueda cómo interpretar y presentar el documento.

En CAT-03 viste que el <head> existe y que <title> es el único elemento obligatorio. En este módulo profundizás en los 6 elementos que todo documento web debería tener.

1. <title>: el título de la pestaña y del resultado de búsqueda

<title> es el único elemento obligatorio dentro de <head>. Su contenido es el texto que aparece en dos lugares críticos:

  1. La pestaña del navegador — cuando el usuario tiene múltiples pestañas abiertas, el título es lo único visible para identificar la página.
  2. Los resultados de búsqueda — los motores de búsqueda usan <title> como el enlace principal del resultado (el texto en los buscadores).
<head>
  <title>Café Aroma — Café de especialidad</title>
</head>

Un documento sin <title> es técnicamente inválido. El navegador lo tolera (muestra la URL o “Sin título”), pero es un error de estructura.

Una sola <title> por documento. Si hay múltiples, el navegador usa el primero. El resultado es indefinido — es un error.

2. <meta charset="UTF-8">: la codificación de caracteres

<meta charset="UTF-8"> le dice al navegador en qué codificación de caracteres está escrito el documento. Sin esta información, el navegador intenta adivinar. A veces acierta; a veces el resultado son caracteres rotos: ñ en vez de ñ, o café en vez de café.

Por qué UTF-8: es la codificación estándar de la web. Soporta todos los caracteres del Unicode: acentos, eñes, caracteres chinos, japoneses, árabes, emojis — literalmente todos los sistemas de escritura del mundo.

Por qué va primero en el <head> — la regla de los 1024 bytes:

La declaración de charset debe estar dentro de los primeros 1024 bytes del documento (WHATWG HTML Living Standard). Si está más abajo, el navegador puede haber comenzado a parsear el documento con la codificación incorrecta, y algunos caracteres ya quedarían mal interpretados. Por eso la convención es poner <meta charset> como primer elemento dentro de <head>, antes que <title> y cualquier otro contenido.

<head>
  <meta charset="UTF-8" />
  <!-- PRIMER elemento del head -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Café Aroma</title>
</head>

Es un void element: no tiene etiqueta de cierre.

3. <meta name="viewport">: la configuración para móviles

<meta name="viewport"> le dice al navegador móvil cómo escalar y mostrar la página.

El problema que resuelve: por defecto, los navegadores móviles simulan una pantalla de escritorio ancha (típicamente 980px) para que las páginas viejas no se vean rotas. Luego achican toda la página para que quepa en la pantalla. El resultado: texto diminuto que el usuario debe pellizcar para leer.

Este meta deshabilita ese comportamiento y le dice al navegador: “usá el ancho real de la pantalla del dispositivo”.

El valor canónico:

<meta name="viewport" content="width=device-width, initial-scale=1" />
  • width=device-width — el ancho del viewport = el ancho real del dispositivo.
  • initial-scale=1 — no escalar al cargar (zoom inicial = 100%).

Por qué es la base del responsive: este meta no hace que la página sea responsive — eso requiere media queries y diseño mobile-first (lo verás en CAT-27). Pero sin este meta, las media queries no funcionan: el navegador sigue simulando la pantalla de escritorio, y los breakpoints no tienen efecto real en el dispositivo.

4. <meta name="description">: la descripción para buscadores

<meta name="description"> provee el texto descriptivo que los buscadores pueden mostrar debajo del título en los resultados de búsqueda.

<meta
  name="description"
  content="Café Aroma — café de especialidad con orígenes de Colombia, Etiopía y Guatemala. Visitanos en el centro."
/>

No se ve en la página. Es metadata invisible para el visitante — solo el buscador (o las herramientas de desarrollo) la lee.

Por qué importa: una descripción bien escrita aumenta el porcentaje de clics en los resultados de búsqueda. Si no existe, el buscador elige un fragmento del contenido de la página, que puede ser irrelevante o estar cortado.

No es una directiva: los buscadores pueden ignorarla y mostrar otro texto si consideran que hay algo más relevante en el contenido. Es una sugerencia, no un comando.

<link rel="stylesheet" href="estilos.css"> conecta una hoja de estilos CSS externa al documento HTML.

<link rel="stylesheet" href="estilos.css" />
  • rel="stylesheet" — indica que el archivo referenciado es una hoja de estilos.
  • href="estilos.css" — la ruta al archivo CSS (igual que el href de un <a>, puede ser relativa o absoluta).

Este es el puente al Bloque II. En el próximo módulo (CAT-12) vas a aprender a escribir CSS. Para que ese CSS tenga efecto sobre el HTML, la página debe conocer la existencia del archivo — eso es lo que hace este <link>. El archivo estilos.css que vas a crear en CAT-12 se vincula exactamente con esta línea.

Es un void element: no tiene etiqueta de cierre.

También existe la propiedad type="text/css", pero no es necesaria en HTML5: el valor es implícito para <link rel="stylesheet">. Escribirlo es redundante — no causa error, pero no aporta nada.

<link rel="icon" href="favicon.ico"> define el favicon — el pequeño ícono que aparece en la pestaña del navegador, en los marcadores y en los resultados de búsqueda junto al título.

<link rel="icon" href="favicon.ico" />
  • rel="icon" — declara que el archivo referenciado es el ícono de la página.
  • href="favicon.ico" — ruta al archivo del ícono.

Un sitio sin favicon muestra un ícono genérico del navegador — señal visual de que la página está “sin terminar”.

El head canónico completo

Este es el <head> que deberías poder escribir de memoria. El orden importa:

  1. <meta charset> — primero siempre (regla de los 1024 bytes).
  2. <meta name="viewport"> — convención estándar de la industria.
  3. <meta name="description"> — junto a los demás <meta>.
  4. <title> — antes de los <link>.
  5. <link rel="stylesheet"> — el navegador inicia la descarga del CSS al encontrar este tag; va en el head para que el CSS esté disponible cuando empiece a renderizar el body.
  6. <link rel="icon"> — carga de baja prioridad; último.
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Café Aroma — café de especialidad en el centro de la ciudad."
    />
    <title>Café Aroma</title>
    <link rel="stylesheet" href="estilos.css" />
    <link rel="icon" href="favicon.ico" />
  </head>
  <body>
    <h1>Bienvenidos a Café Aroma</h1>
  </body>
</html>

Nota sobre el sandbox: los 6 elementos del head no producen efectos visuales en el preview. El favicon no se muestra (no hay archivo real), la hoja de estilos no carga (no hay estilos.css en el sandbox), y la description no aparece en la página. Se aprecia el efecto real abriendo el archivo en el navegador. En la siguiente lección vas a practicar escribir este head completo — el sandbox valida que la estructura y los atributos sean correctos.

Sandbox libre — probá lo que aprendiste:

Preview

En la referencia