Esqueleto del documento
Anatomía y estructura
Todo documento HTML válido necesita cuatro piezas en orden: la declaración DOCTYPE, el elemento raíz html, y sus dos hijos obligatorios head y body. Sin ese esqueleto, el navegador entra en modo de compatibilidad y el resultado es impredecible.
Un documento HTML no es solo una colección de etiquetas: es un árbol con una raíz, un orden obligatorio y dos zonas bien definidas. Antes de que el navegador renderice un solo píxel, parsea ese árbol desde arriba hacia abajo; si no encuentra la estructura que espera, la infiere — con resultados que no siempre coinciden con lo que el autor quería. Conocer el esqueleto del documento es conocer las reglas que el navegador aplica antes de que puedas escribir tu primer párrafo.
El esqueleto mínimo de cualquier documento HTML tiene exactamente cuatro piezas: la declaración <!DOCTYPE html>, el elemento raíz <html>, y sus dos únicos hijos directos obligatorios — <head> y <body>. Todo lo que se escribe en un archivo .html cae dentro de alguna de estas cuatro piezas. La estructura no es convención de estilo: está especificada por el estándar HTML y el navegador la exige para activar el modo de renderizado correcto.
Lo que distingue al esqueleto del documento de la gramática del lenguaje es el nivel de abstracción: la gramática describe cómo se escribe un elemento (etiqueta, atributo, contenido), mientras que el esqueleto describe cómo se organiza el archivo completo. Podés tener sintaxis impecable dentro de un body mal ubicado, y el parser lo corregirá silenciosamente — o no. Entender el esqueleto es entender el contrato que todo documento HTML firma con el navegador desde la primera línea.
Cómo funciona
El árbol del documento mínimo tiene tres niveles: la instrucción de procesamiento (<!DOCTYPE html>), el elemento raíz (<html>), y los dos hijos directos del raíz (<head> y <body>). Cualquier otro elemento vive dentro de <head> o de <body>, nunca fuera de ellos.
<!DOCTYPE html> — la declaración de tipo
<!DOCTYPE html> no es un elemento HTML: es una instrucción de procesamiento que ocupa siempre la primera línea del archivo. Le indica al navegador que interprete el documento según el estándar HTML actual (modo estándar). Sin ella, los navegadores activan el modo quirks — un modo de compatibilidad heredado de los años 90 que altera el comportamiento del box model, del espaciado y de varios algoritmos de layout. El modo quirks se puede detectar en DevTools, pero es mejor nunca necesitar detectarlo.
<html> — el elemento raíz
<html> es el contenedor de todo el documento. Todo lo que sigue al <!DOCTYPE> vive dentro de <html>. Su atributo más importante es lang, que declara el idioma principal del documento: <html lang="es">. Sin lang, los lectores de pantalla eligen un idioma por defecto que puede no coincidir con el contenido, y las herramientas de validación de accesibilidad lo reportan como error.
<head> — la zona de metadata
<head> es el primer hijo directo de <html>. Contiene toda la información sobre el documento que el navegador necesita antes de renderizar: la codificación de caracteres (<meta charset="UTF-8">), el título de la pestaña (<title>), los estilos, los scripts, los metadatos Open Graph, y más. Nada de lo que está en <head> se muestra en el viewport — su rol es configurar, no mostrar.
<body> — la zona de contenido
<body> es el segundo hijo directo de <html>, hermano de <head>. Contiene todo el contenido que el usuario ve e interactúa: encabezados, párrafos, imágenes, formularios, enlaces, tablas. Si un elemento aparece en pantalla, está en el <body>. Esta separación entre configuración (<head>) y contenido (<body>) es una de las reglas más importantes del lenguaje: mezclarlos produce errores de parseo que el navegador resuelve de maneras no siempre predecibles.
Resultado
El boilerplate mínimo que cumple el esqueleto completo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la página</title>
</head>
<body>
<h1>Encabezado principal</h1>
<p>Contenido visible de la página.</p>
</body>
</html>Cada línea tiene un propósito concreto: <!DOCTYPE html> activa el modo estándar; <html lang="es"> declara el idioma; <meta charset="UTF-8"> garantiza que los caracteres especiales (tildes, ñ, emojis) se interpreten correctamente; <meta name="viewport"> es imprescindible para que la página no se renderice a escala de escritorio en móvil; <title> es lo que aparece en la pestaña del navegador y en los resultados de búsqueda.
El error más frecuente al empezar con HTML es omitir el <!DOCTYPE html> o la estructura <html>/<head>/<body>. Los navegadores modernos la infieren e intentan corregirla, pero el DOM resultante puede diferir del esperado, y las herramientas de validación y accesibilidad reportarán errores que son difíciles de rastrear si no se conoce el origen.