elemento HTML vigente

<head>

Anatomía y estructura

Contenedor de metadatos del documento HTML. Su contenido no se muestra en la página visible; incluye el título, la codificación, vínculos a hojas de estilo y otras instrucciones para el navegador.

<head> es el primer hijo directo de <html> y el contenedor de los metadatos del documento: información sobre la página que el navegador necesita pero que el usuario no ve directamente. El contenido de <head> no se renderiza en la página — si ponés texto directamente ahí, no aparece (o aparece de formas inesperadas según el navegador).

La palabra clave es metadatos: datos sobre los datos. El <body> contiene el contenido; el <head> contiene todo lo que el navegador necesita saber para interpretar y presentar ese contenido correctamente — con qué codificación leer el texto, qué título poner en la pestaña, qué hoja de estilos aplicar, cómo comportarse en un móvil. Nada de eso se dibuja, pero sin ello la página se ve mal, se lee mal o no aparece en los buscadores.

El navegador procesa el <head> completo antes de empezar a mostrar el contenido visible, porque varias de esas instrucciones cambian cómo se renderiza todo lo que viene después: el charset decide cómo se decodifican las tildes y la ñ, el <link> a CSS define los estilos con los que el contenido aparecerá. Por eso el orden y el contenido del <head> tienen efectos reales en cómo se ve, cuán rápido carga y cómo se indexa la página, aunque el usuario nunca lo vea directamente.

<head> · configuración <title> <meta charset> <meta viewport> <link rel="..."> no se dibuja en pantalla Mi página · título Título visible <body> · lo que se ve

Cómo funciona

<head> actúa como la “zona de configuración” del documento. Antes de mostrar cualquier contenido visible, el navegador procesa <head> para saber:

  • Cómo codificar el texto (charset)
  • Cuál es el título de la página
  • Qué hojas de estilo CSS vincular
  • Qué scripts cargar
  • Cómo configurar el viewport para móviles
  • Otras instrucciones de comportamiento
<html lang="es">
  <head>
    ...configuración del documento...
  </head>
  <body>
    ...contenido visible...
  </body>
</html>

Qué va dentro de <head>

Casi todo el <head> se arma con cuatro tipos de elementos: <title>, <meta>, <link> y <script>. Cada uno tiene su propia entrada en el catálogo (familia metadata, en una tanda siguiente); acá los vemos desde la perspectiva del <head> que los contiene, para entender qué rol cumple cada uno dentro de la configuración del documento.

<title> (obligatorio)

El único elemento verdaderamente obligatorio en <head>. Define el texto que aparece:

  • En la pestaña del navegador
  • En los resultados de búsqueda de Google y otros buscadores
  • Cuando el usuario guarda la página como favorito
<title>Recetas de cocina — Mi sitio</title>

Un <title> bueno describe el contenido de la página específica (no solo el sitio). En buscadores, un buen título mejora el CTR (porcentaje de clics).

<meta> — un dato suelto de metadato

<meta> es un void element (no lleva cierre) que aporta una sola pieza de metadato por vez. Por eso un <head> típico tiene varios <meta>, cada uno diciendo una cosa. Tiene dos formas de uso:

  • Con un atributo especial, como charset, que cumple una función fija del navegador.
  • Con el par name + content: name dice qué metadato es y content su valor. Es el formato general y extensible (description, robots, theme-color, etiquetas de redes sociales, etc.).

Los <meta> que vas a usar casi siempre:

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Recetas simples y rápidas en español." />
  • charset="UTF-8" (necesario en todo documento) — declara la codificación de caracteres. Sin esto, las tildes, la ñ y otros caracteres especiales pueden aparecer como signos de interrogación o símbolos raros. UTF-8 es el estándar del web moderno (soporta todos los idiomas Unicode). Va lo más temprano posible en el <head>, incluso antes del <title>, para que el navegador sepa cómo decodificar el texto que sigue.
  • name="viewport" (necesario para sitios responsive) — controla cómo los navegadores móviles escalan la página. width=device-width hace que el ancho lógico sea el ancho real del dispositivo; initial-scale=1.0 fija el zoom inicial en 1:1. Sin esta línea, los móviles muestran la página como un escritorio achicado y el texto queda ilegible.
  • name="description" — un resumen de la página que los buscadores pueden mostrar bajo el título en sus resultados. No afecta el render, pero sí cómo se ve el sitio en Google.
  • name="robots" — instrucciones para los crawlers de búsqueda (por ejemplo content="noindex" para pedir que no indexen la página).

<link> — una relación con un recurso externo

<link> también es un void element. Conecta el documento con un recurso externo y declara qué tipo de relación es con el atributo rel (relationship); el href apunta al recurso. No tiene nada que ver con los enlaces <a> que el usuario hace clic — <link> vive solo en el <head> y trabaja por detrás.

<link rel="stylesheet" href="estilos.css" />
<link rel="icon" href="favicon.ico" />
  • rel="stylesheet" — vincula una hoja de estilos CSS externa. El navegador la descarga y la aplica antes de mostrar la página, por eso conviene declararla en el <head> (evita el flash de contenido sin estilo). Es el uso más frecuente de <link>.
  • rel="icon" — el favicon, el íconito que aparece en la pestaña del navegador y en los favoritos.

¿<head>, <meta> y <link> deberían ser páginas separadas? Sí: <title>, <meta> y <link> tendrán su propia entrada en la familia metadata del catálogo, donde se documentan a fondo (todos los name, todos los rel, etc.). Esta entrada de <head> es el mapa: explica el rol de cada uno dentro del contenedor y enlaza al detalle, sin reemplazarlo.

<script>

Carga o contiene código JavaScript. Aunque puede ir en el <head>, conviene usar <script src="app.js" defer></script>: con defer el script se descarga en paralelo y se ejecuta recién cuando el DOM está listo, sin frenar el render (ver los gotchas más abajo).

El boilerplate mínimo recomendado para <head>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Título descriptivo de la página</title>
  <link rel="stylesheet" href="estilos.css" />
</head>

Estas cuatro líneas (o tres sin el CSS externo) son el mínimo que debería tener todo documento HTML que se vaya a mostrar en un navegador moderno.

Notas, gotchas e interacción

  • Texto directo en <head> no se muestra. Si ponés <p>Hola</p> dentro de <head>, el navegador lo ignora o lo mueve al <body> implícitamente — el comportamiento varía. Solo van elementos de metadatos dentro de <head>.
  • Orden importa para performance: <meta charset> debe ir primero, antes del <title>, para que el navegador sepa cómo decodificar el texto del título. Los <link> a CSS convienen ir antes que el contenido para evitar el flash de contenido sin estilo (FOUC).
  • <script> en <head>: si no usás defer o async, un <script> en <head> bloquea el parsing del HTML hasta que termine de descargarse y ejecutarse. El patrón recomendado hoy es <script src="app.js" defer></script> en <head> (con defer el script se descarga en paralelo y se ejecuta recién cuando el DOM está listo).

Vigente / legacy

<head> es parte de HTML desde la especificación inicial y está completamente vigente. No tiene atributos propios de uso frecuente hoy — los que tenía en versiones antiguas de HTML (como profile en HTML4) están obsoletos. Todo pasa por los elementos que van dentro de él.