Cargando...

El elemento head HTML

La sesión anterior se centró en un hijo del head del documento: title. Ahora amplía el foco al elemento head en sí — la caja que guarda metadatos sobre la página para navegadores, herramientas de búsqueda y recursos enlazados. Los visitantes no leen head como leen una historia en la vista principal. Sienten sus efectos en la etiqueta de la pestaña, caracteres correctos, el escalado móvil y las hojas de estilo que cargan antes de que se pinte el contenido del body.

Para qué sirve head

<head>...</head> va dentro de <html>, suele ir justo después de la etiqueta de apertura html y antes de <body>. Es la sala de control del documento para metadatos y enlaces a recursos. No es un banner visible. El banner visible que puedes construir más adelante con un elemento <header> es otra etiqueta con otro trabajo.

Respuesta directa

Pon metadatos en <head>...</head>: un title, normalmente <meta charset="UTF-8">, a menudo un meta de viewport para el diseño móvil, y <link rel="stylesheet" href="..."> cuando usas CSS externo. Pon encabezados visibles, párrafos, imágenes e interfaz interactiva en <body>. title es un hijo importante de head — no sustituye a head.

Hijos comunes de un vistazo

📊 Hijos comunes de head

Elemento Rol
title Etiqueta de pestaña / documento
meta charset Codificación de caracteres (UTF-8)
meta viewport Pista de ancho y escala en móvil
link stylesheet Archivo CSS externo
style CSS interno opcional
script Scripts opcionales (las costumbres de ubicación varían; muchos principiantes cargan al final de body)

Un head inicial práctico

No necesitas todas las meta posibles el primer día. Un head fiable para principiantes cubre la codificación, el viewport móvil, el título del documento y un enlace a la hoja de estilo cuando el CSS vive en un archivo aparte.

Un head inicial práctico

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<p>Visible content lives in the body.</p>
</body>
</html>

Lectura del ejemplo

  • meta charset="UTF-8" indica al navegador cómo decodificar caracteres — incluidos emoji y texto no latino de sesiones anteriores
  • viewport ayuda a los navegadores móviles a usar el ancho del dispositivo en lugar de un diseño de escritorio miniaturizado
  • title etiqueta la pestaña, como practicaste en la sesión del título de página
  • link rel="stylesheet" adjunta styles.css sin poner reglas CSS dentro de cada archivo HTML
  • Todo lo que el visitante lee en la página está bajo body

Charset primero, temprano en head

Coloca el meta de charset cerca de la parte superior de head para que el navegador conozca la codificación antes de interpretar el resto del texto del documento. UTF-8 es el valor moderno por defecto que debes usar salvo una restricción heredada rara diga lo contrario. Un charset ausente o tardío es una causa clásica de caracteres rotos que parecen «corrupción aleatoria».

Viewport y navegadores móviles

Sin un meta de viewport, muchos teléfonos asumen un lienzo de escritorio ancho y encogen la página. El inicio habitual width=device-width, initial-scale=1.0 pide al navegador coincidir con el ancho del dispositivo y empezar con un zoom normal. Refinarás el diseño responsivo con CSS más adelante; el viewport es el apretón de manos del lado HTML que hace usables esos diseños en móviles.

Enlazar CSS desde head

Las hojas de estilo externas mantienen la presentación separada de la estructura. El elemento link en head con rel="stylesheet" y una ruta href es la forma amigable para principiantes de adjuntar CSS. Las rutas siguen las mismas ideas de rutas de archivo que aprendiste antes. Si falta el archivo CSS, el HTML sigue funcionando — solo se ve sin estilo.

head frente a body frente a header

  • head — metadatos y enlaces a recursos; no el artículo principal legible
  • body — contenido visible que los visitantes leen y con el que interactúan
  • header — un elemento de seccionado visible para banners o bloques introductorios dentro de body (lo usarás en sesiones de diseño posteriores)
    No renombres head a header esperando que sean alias. Son elementos distintos. Confundirlos lleva a marcado inválido o ineficaz.

Scripts y head (nota para principiantes)

Los scripts pueden aparecer en head o en body. Muchas páginas didácticas cargan scripts simples al final de body para que la estructura HTML exista primero. Las estrategias avanzadas de carga llegan después. En esta sesión, sabe que script está permitido como hijo de head, pero el contenido visible sigue sin pertenecer a head.

Práctica en tu editor

  1. Parte de un esqueleto HTML básico con html, head y body.
  2. Dentro de head, añade charset UTF-8, un meta de viewport y un title claro.
  3. Añade un link a un styles.css sencillo si lo tienes (o crea un archivo vacío para que la ruta sea real).
  4. Mantén todo el texto y los encabezados visibles solo en body.
  5. Usa Ver código fuente o DevTools Elements para confirmar que la sección head coincide con tu intención.
  6. Quita el viewport temporalmente, recarga en una ventana estrecha o un emulador de teléfono si puedes, y nota cómo cambia la escala — luego restáuralo.

Errores fáciles

  • Poner párrafos, imágenes o encabezados principales solo dentro de head como si fuera el lienzo de la página
  • Olvidar charset y que se rompan caracteres especiales y emoji
  • Omitir viewport y preguntarse por qué el diseño móvil se ve con un zoom raro
  • Confundir head (metadatos) con header (sección visible más adelante en el curso)
  • Suponer que title solo basta y omitir charset en páginas multilingües
  • Enlazar una hoja de estilo con la ruta incorrecta y culpar al HTML cuando el CSS nunca carga

Resumen

  • head guarda metadatos y enlaces a recursos; body guarda el contenido visible
  • Piezas iniciales: charset, viewport, title y a menudo un link de CSS
  • title es un hijo de head, no un sustituto de head
  • head no es el mismo elemento que el header visible
  • Pon charset pronto para que el navegador decodifique el documento correctamente

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
6
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 1 de 1
Html Tutorial