{"id":1332,"date":"2026-01-16T07:00:00","date_gmt":"2026-01-16T06:00:00","guid":{"rendered":"https:\/\/programaraciegas.net\/?p=1332"},"modified":"2026-01-01T09:21:34","modified_gmt":"2026-01-01T08:21:34","slug":"el-head-de-una-pagina-html","status":"publish","type":"post","link":"https:\/\/programaraciegas.net\/?p=1332","title":{"rendered":"El head de una p\u00e1gina HTML"},"content":{"rendered":"

En el art\u00edculo de introducci\u00f3n al HTML<\/a> se mostr\u00f3 la estructura interna de un documento HTML. En esa estructura existe una secci\u00f3n conocida como el head<\/strong> de la p\u00e1gina web.<\/p>\n

El <head> es el lugar donde se declara la codificaci\u00f3n de caracteres, se define el t\u00edtulo que aparecer\u00e1 en la pesta\u00f1a 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.<\/p>\n

El contenido del <head> no se muestra como parte del cuerpo de la p\u00e1gina pero determina c\u00f3mo se interpreta y se presenta el contenido que aparece en el <body> de la p\u00e1gina web.<\/p>\n

Ejemplo completo de head<\/h2>\n

A continuaci\u00f3n podemos ver un ejemplo del c\u00f3digo que se incluye en una p\u00e1gina web habitual y aunque muchos de esos metadatos no sean utilizados si deben aparecer por motivos de accesibilidad.<\/p>\n

<head>
<meta charset=\"utf-8\">

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

<title>Gu\u00eda del elemento head en HTML<\/title>

<meta name=\"description\" content=\"Explicaci\u00f3n de las etiquetas y elementos m\u00e1s habituales dentro del head de una p\u00e1gina 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\u00eda del elemento head en HTML\">
<meta property=\"og:description\" content=\"Qu\u00e9 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><\/pre>\n
En un primer vistazo puede resultar confuso e incomprensible pero se puede aclarar el c\u00f3digo utilizando comentarios.<\/p>\n
Comentarios en HTML<\/h2>\n
Los desarrolladores utilizamos los comentarios para multitud de funciones: describir que hace o va a hacer un trozo de c\u00f3digo, incluir un Copyright o copyleft en el c\u00f3digo, a\u00f1adir marcas o secciones en el fichero de c\u00f3digo para marcar zonas y movernos m\u00e1s r\u00e1pido por un fichero de c\u00f3digo grande, etc.<\/p>\n
En HTML, aunque no sea un lenguaje de programaci\u00f3n, tambi\u00e9n podemos incluir comentarios para poder explicar nuestro c\u00f3digo.<\/p>\n
Para escribir un comentario en HTML utilizamos una etiqueta que ser\u00e1 ignorada por el navegador web. Esta etiqueta tiene una marca de apertura particular y una marca de cierre tambi\u00e9n particular.<\/p>\n
Para abrir el comentario se utiliza la marca <!–<\/strong> y para cerrar el comentario se utiliza la marca –><\/strong> y entre medio va el texto que se utilizar\u00e1 como comentario. Un ejemplo puede ser:<\/p>\n
<!-- Esto es un comentario en HTML --><\/pre>\n
Ahora veamos de nuevo nuestro head con comentarios.<\/p>\n
<head>
<!-- Codificaci\u00f3n de caracteres -->
<meta charset=\"utf-8\">

<!-- Ajuste de la vista en m\u00f3viles -->
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">

<!-- T\u00edtulo de la p\u00e1gina (pesta\u00f1a del navegador, historial, marcadores) -->
<title>Gu\u00eda del elemento head en HTML<\/title>

<!-- Descripci\u00f3n para buscadores y previsualizaciones -->
<meta name=\"description\" content=\"Explicaci\u00f3n de las etiquetas y elementos m\u00e1s habituales dentro del head de una p\u00e1gina web, con ejemplos en HTML.\">

<!-- Control b\u00e1sico de indexaci\u00f3n (no es una norma absoluta, pero orienta a robots) -->
<meta name=\"robots\" content=\"index,follow\">

<!-- URL can\u00f3nica para evitar duplicidades -->
<link rel=\"canonical\" href=\"https:\/\/ejemplo.com\/articulos\/elemento-head\">

<!-- Icono de la pesta\u00f1a 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\u00eda del elemento head en HTML\">
<meta property=\"og:description\" content=\"Qu\u00e9 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><\/pre>\n
Codificaci\u00f3n y representaci\u00f3n de caracteres<\/h3>\n
Es necesario asegurarse que el navegador interpretar\u00e1 correctamente tildes, e\u00f1es y s\u00edmbolos. Para ello se utiliza <meta charset=\u00bbutf-8″>, que declara la codificaci\u00f3n del documento. Aunque hoy en d\u00eda UTF-8 es la elecci\u00f3n est\u00e1ndar en la Web, la etiqueta sigue siendo importante porque evita interpretaciones err\u00f3neas en ciertos entornos y garantiza consistencia.<\/p>\n
Ajuste en m\u00f3viles con viewport<\/h3>\n
Si la p\u00e1gina se va a visualizar en smartphones y tablets, es esencial indicar al navegador c\u00f3mo debe dimensionar el \u00e1rea visible. La etiqueta <meta name=\u00bbviewport\u00bb> permite controlar el ancho l\u00f3gico y la escala inicial. La configuraci\u00f3n m\u00e1s habitual es width=device-width, initial-scale=1, que adapta el layout al ancho del dispositivo sin ampliar o reducir de forma inesperada.<\/p>\n
T\u00edtulo del documento con <title><\/h3>\n
A continuaci\u00f3n, <title> define el t\u00edtulo del documento. Este texto suele aparecer en la pesta\u00f1a del navegador, en el historial, en los marcadores y en muchas previsualizaciones. Desde el punto de vista de usabilidad, un t\u00edtulo preciso ayuda a reconocer r\u00e1pidamente la p\u00e1gina. Desde el punto de vista de buscadores, suele ser una de las piezas m\u00e1s visibles del resultado.
Metadatos descriptivos: description, robots y otros<\/h3>\n
Despu\u00e9s del t\u00edtulo, se suelen incluir metadatos con <meta name=\u00bb…\u00bb>. El caso m\u00e1s 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\u00f3n cuando es relevante. Tambi\u00e9n es frecuente robots, que indica directrices de indexaci\u00f3n y seguimiento de enlaces; su interpretaci\u00f3n puede variar por motor de b\u00fasqueda, por lo que se recomienda entenderlo como una se\u00f1al orientativa.
En escenarios m\u00e1s espec\u00edficos pueden aparecer metadatos adicionales, como author para autor\u00eda, referrer para controlar qu\u00e9 informaci\u00f3n se env\u00eda al navegar a otros sitios, o theme-color para sugerir un color de interfaz en algunos navegadores m\u00f3viles. El uso de estos valores debe estar alineado con el objetivo del sitio y con una pol\u00edtica de privacidad clara.<\/p>\n
Canonical: evitar duplicidades de URL<\/h3>\n
En el \u00e1mbito de SEO y consistencia, es habitual declarar una URL can\u00f3nica mediante <link rel=\u00bbcanonical\u00bb href=\u00bb…\u00bb>. Su objetivo es se\u00f1alar cu\u00e1l es la versi\u00f3n preferida cuando existen m\u00faltiples URLs que muestran el mismo contenido o contenido muy similar, por ejemplo por par\u00e1metros 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=\u00bbstylesheet\u00bb, que define c\u00f3mo se presentar\u00e1 el HTML en pantalla, en impresi\u00f3n 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\u00e9n se declaran con <link>. El cl\u00e1sico favicon.ico sigue siendo \u00fatil por compatibilidad, pero hoy se suelen a\u00f1adir variantes como SVG y el icono para pantallas de inicio en iOS mediante apple-touch-icon. En aplicaciones web progresivas puede a\u00f1adirse adem\u00e1s un manifiesto con rel=\u00bbmanifest\u00bb.<\/p>\n
Metadatos para compartir: Open Graph y Twitter Cards<\/h3>\n
Cuando una URL se comparte en redes sociales o aplicaciones de mensajer\u00eda, la previsualizaci\u00f3n suele basarse en metadatos espec\u00edficos. En muchos entornos se utiliza Open Graph a trav\u00e9s de <meta property=\u00bbog:…\u00bb>, indicando t\u00edtulo, descripci\u00f3n, tipo, imagen y URL. En el ecosistema de X (antes Twitter) siguen siendo comunes las Twitter Cards con <meta name=\u00bbtwitter:…\u00bb>. La idea es proporcionar a cada plataforma la informaci\u00f3n necesaria para mostrar una tarjeta coherente, con un texto breve y una imagen adecuada.<\/p>\n
Scripts en el <head><\/h3>\n
Aunque JavaScript puede incluirse en el <body>, se recomienda incluir la carga de los scripts de Javascript en el Head por motivos de accesibilidad.<\/p>\n
Rendimiento: preload, preconnect y otras pistas<\/h3>\n
Adem\u00e1s de enlazar recursos, <link> puede aportar pistas al navegador para optimizar la carga. Con rel=\u00bbpreconnect\u00bb se solicita que se establezca cuanto antes la conexi\u00f3n con un dominio externo, algo \u00fatil cuando se dependen de CDNs o proveedores de fuentes. Con rel=\u00bbpreload\u00bb se indica que un recurso ser\u00e1 necesario muy pronto, por ejemplo una fuente o una hoja de estilos cr\u00edtica, aunque su uso debe hacerse con cuidado para no saturar la red con descargas anticipadas innecesarias. En general, la mejor pr\u00e1ctica consiste en aplicar estas t\u00e9cnicas tras medir y verificar que mejoran la experiencia.<\/p>\n
Consideraciones de orden dentro del <head><\/h2>\n
Aunque HTML es flexible, el orden de ciertas etiquetas ayuda. La declaraci\u00f3n de <meta charset=\u00bbutf-8″> suele colocarse al inicio para evitar interpretaciones inconsistentes. A continuaci\u00f3n es habitual incluir viewport y el title. Despu\u00e9s suelen aparecer metadatos como description y enlaces como canonical, y a partir de ah\u00ed recursos como CSS, iconos y scripts diferidos. Este orden no es una regla r\u00edgida, pero mejora la legibilidad, reduce errores y favorece un comportamiento predecible.<\/p>\n
Accesibilidad en el head<\/h2>\n
Seg\u00fan WCAG para considerar que el head de un documento HTML cumple con la accesibilidad es necesario que se incluya un t\u00edtulo para el documento y que se defina el lenguaje principal de la p\u00e1gina.<\/p>\n
Hay otras recomendaciones como las de incluir los metadatos de description y encoding para ayudar a la interpretaci\u00f3n correcta del contenido por parte de navegadores y de personas con herramientas que utilicen los metadatos del documento.<\/p>\n","protected":false},"excerpt":{"rendered":"
En el art\u00edculo de introducci\u00f3n al HTML se mostr\u00f3 la estructura interna de un documento HTML. En esa estructura existe una secci\u00f3n conocida como el head de la p\u00e1gina web. El <head> es el lugar donde se declara la codificaci\u00f3n de caracteres, se define el t\u00edtulo que aparecer\u00e1 en la pesta\u00f1a del navegador, se aportan … <\/p>\n
Continuar leyendo \u00abEl head de una p\u00e1gina HTML\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,542],"tags":[84,333,94],"class_list":["post-1332","post","type-post","status-publish","format-standard","hentry","category-desarrollo","category-html-2","tag-curso","tag-html","tag-web"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1332"}],"version-history":[{"count":0,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1332\/revisions"}],"wp:attachment":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}