En el artículo de introducción al HTML se mostró la estructura interna de un documento HTML. En esa estructura existe una sección conocida como el head de la página web.
El <head> es el lugar donde se declara la codificación de caracteres, se define el título que aparecerá en la pestaña del navegador, se aportan metadatos descriptivos, se enlazan hojas de estilo y recursos como iconos, y se configuran aspectos de seguridad o comportamiento del documento.
El contenido del <head> no se muestra como parte del cuerpo de la página pero determina cómo se interpreta y se presenta el contenido que aparece en el <body> de la página web.
Ejemplo completo de head
A continuación podemos ver un ejemplo del código que se incluye en una página web habitual y aunque muchos de esos metadatos no sean utilizados si deben aparecer por motivos de accesibilidad.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Guía del elemento head en HTML</title>
<meta name="description" content="Explicación de las etiquetas y elementos más habituales dentro del head de una página web, con ejemplos en HTML.">
<meta name="robots" content="index,follow">
<link rel="canonical" href="https://ejemplo.com/articulos/elemento-head">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="/css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Metadatos para compartir en redes (Open Graph) -->
<meta property="og:title" content="Guía del elemento head en HTML">
<meta property="og:description" content="Qué incluir en head: metadatos, enlaces, estilos, iconos, rendimiento y seguridad.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://ejemplo.com/articulos/elemento-head">
<meta property="og:image" content="https://ejemplo.com/img/preview.png">
<script src="/js/app.js" defer></script>
</head>
En un primer vistazo puede resultar confuso e incomprensible pero se puede aclarar el código utilizando comentarios.
Comentarios en HTML
Los desarrolladores utilizamos los comentarios para multitud de funciones: describir que hace o va a hacer un trozo de código, incluir un Copyright o copyleft en el código, añadir marcas o secciones en el fichero de código para marcar zonas y movernos más rápido por un fichero de código grande, etc.
En HTML, aunque no sea un lenguaje de programación, también podemos incluir comentarios para poder explicar nuestro código.
Para escribir un comentario en HTML utilizamos una etiqueta que será ignorada por el navegador web. Esta etiqueta tiene una marca de apertura particular y una marca de cierre también particular.
Para abrir el comentario se utiliza la marca <!– y para cerrar el comentario se utiliza la marca –> y entre medio va el texto que se utilizará como comentario. Un ejemplo puede ser:
<!-- Esto es un comentario en HTML -->
Ahora veamos de nuevo nuestro head con comentarios.
<head>
<!-- Codificación de caracteres -->
<meta charset="utf-8">
<!-- Ajuste de la vista en móviles -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Título de la página (pestaña del navegador, historial, marcadores) -->
<title>Guía del elemento head en HTML</title>
<!-- Descripción para buscadores y previsualizaciones -->
<meta name="description" content="Explicación de las etiquetas y elementos más habituales dentro del head de una página web, con ejemplos en HTML.">
<!-- Control básico de indexación (no es una norma absoluta, pero orienta a robots) -->
<meta name="robots" content="index,follow">
<!-- URL canónica para evitar duplicidades -->
<link rel="canonical" href="https://ejemplo.com/articulos/elemento-head">
<!-- Icono de la pestaña y accesos directos -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Hoja de estilos -->
<link rel="stylesheet" href="/css/styles.css">
<!-- Sugerencias de rendimiento para recursos de terceros -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Metadatos para compartir en redes (Open Graph) -->
<meta property="og:title" content="Guía del elemento head en HTML">
<meta property="og:description" content="Qué incluir en head: metadatos, enlaces, estilos, iconos, rendimiento y seguridad.">
<meta property="og:type" content="article">
<meta property="og:url" content="https://ejemplo.com/articulos/elemento-head">
<meta property="og:image" content="https://ejemplo.com/img/preview.png">
<!-- Carga de JavaScript no bloqueante -->
<script src="/js/app.js" defer></script>
</head>
Codificación y representación de caracteres
Es necesario asegurarse que el navegador interpretará correctamente tildes, eñes y símbolos. Para ello se utiliza <meta charset=»utf-8″>, que declara la codificación del documento. Aunque hoy en día UTF-8 es la elección estándar en la Web, la etiqueta sigue siendo importante porque evita interpretaciones erróneas en ciertos entornos y garantiza consistencia.
Ajuste en móviles con viewport
Si la página se va a visualizar en smartphones y tablets, es esencial indicar al navegador cómo debe dimensionar el área visible. La etiqueta <meta name=»viewport»> permite controlar el ancho lógico y la escala inicial. La configuración más habitual es width=device-width, initial-scale=1, que adapta el layout al ancho del dispositivo sin ampliar o reducir de forma inesperada.
Título del documento con <title>
A continuación, <title> define el título del documento. Este texto suele aparecer en la pestaña del navegador, en el historial, en los marcadores y en muchas previsualizaciones. Desde el punto de vista de usabilidad, un título preciso ayuda a reconocer rápidamente la página. Desde el punto de vista de buscadores, suele ser una de las piezas más visibles del resultado.
Metadatos descriptivos: description, robots y otros
Después del título, se suelen incluir metadatos con <meta name=»…»>. El caso más conocido es description, que ofrece un resumen del contenido. No garantiza que un buscador muestre exactamente ese texto, pero suele utilizarse como base para la previsualización cuando es relevante. También es frecuente robots, que indica directrices de indexación y seguimiento de enlaces; su interpretación puede variar por motor de búsqueda, por lo que se recomienda entenderlo como una señal orientativa.
En escenarios más específicos pueden aparecer metadatos adicionales, como author para autoría, referrer para controlar qué información se envía al navegar a otros sitios, o theme-color para sugerir un color de interfaz en algunos navegadores móviles. El uso de estos valores debe estar alineado con el objetivo del sitio y con una política de privacidad clara.
Canonical: evitar duplicidades de URL
En el ámbito de SEO y consistencia, es habitual declarar una URL canónica mediante <link rel=»canonical» href=»…»>. Su objetivo es señalar cuál es la versión preferida cuando existen múltiples URLs que muestran el mismo contenido o contenido muy similar, por ejemplo por parámetros de seguimiento o rutas alternativas.
Enlaces a recursos: CSS, iconos y manifiestos
Otro bloque fundamental del <head> es el enlace a recursos externos mediante <link>. En primer lugar suele estar la hoja de estilos principal con rel=»stylesheet», que define cómo se presentará el HTML en pantalla, en impresión y en otros medios. Si existen varias hojas de estilo, el orden importa, porque las reglas posteriores pueden sobrescribir a las anteriores.
Los iconos de sitio también se declaran con <link>. El clásico favicon.ico sigue siendo útil por compatibilidad, pero hoy se suelen añadir variantes como SVG y el icono para pantallas de inicio en iOS mediante apple-touch-icon. En aplicaciones web progresivas puede añadirse además un manifiesto con rel=»manifest».
Metadatos para compartir: Open Graph y Twitter Cards
Cuando una URL se comparte en redes sociales o aplicaciones de mensajería, la previsualización suele basarse en metadatos específicos. En muchos entornos se utiliza Open Graph a través de <meta property=»og:…»>, indicando título, descripción, tipo, imagen y URL. En el ecosistema de X (antes Twitter) siguen siendo comunes las Twitter Cards con <meta name=»twitter:…»>. La idea es proporcionar a cada plataforma la información necesaria para mostrar una tarjeta coherente, con un texto breve y una imagen adecuada.
Scripts en el <head>
Aunque JavaScript puede incluirse en el <body>, se recomienda incluir la carga de los scripts de Javascript en el Head por motivos de accesibilidad.
Rendimiento: preload, preconnect y otras pistas
Además de enlazar recursos, <link> puede aportar pistas al navegador para optimizar la carga. Con rel=»preconnect» se solicita que se establezca cuanto antes la conexión con un dominio externo, algo útil cuando se dependen de CDNs o proveedores de fuentes. Con rel=»preload» se indica que un recurso será necesario muy pronto, por ejemplo una fuente o una hoja de estilos crítica, aunque su uso debe hacerse con cuidado para no saturar la red con descargas anticipadas innecesarias. En general, la mejor práctica consiste en aplicar estas técnicas tras medir y verificar que mejoran la experiencia.
Consideraciones de orden dentro del <head>
Aunque HTML es flexible, el orden de ciertas etiquetas ayuda. La declaración de <meta charset=»utf-8″> suele colocarse al inicio para evitar interpretaciones inconsistentes. A continuación es habitual incluir viewport y el title. Después suelen aparecer metadatos como description y enlaces como canonical, y a partir de ahí recursos como CSS, iconos y scripts diferidos. Este orden no es una regla rígida, pero mejora la legibilidad, reduce errores y favorece un comportamiento predecible.
Accesibilidad en el head
Según WCAG para considerar que el head de un documento HTML cumple con la accesibilidad es necesario que se incluya un título para el documento y que se defina el lenguaje principal de la página.
Hay otras recomendaciones como las de incluir los metadatos de description y encoding para ayudar a la interpretación correcta del contenido por parte de navegadores y de personas con herramientas que utilicen los metadatos del documento.
