Nivel: Básico · HTML · Después de tu primera página · 15 minutos · Editor de texto + navegador
Al terminar sabrás qué va en <html>, qué va en <head> y qué va en <body>, y tendrás un archivo mínimo que abre sin errores de tilde ni de pestaña vacía.
Resultado final: un esqueleto.html con idioma español, título en la pestaña y un mensaje visible en el cuerpo.
Paso 1: Recuerda el esqueleto mínimo
Abre (o crea) un archivo esqueleto.html y pega:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi esqueleto</title>
</head>
<body>
<p>Hola desde el body</p>
</body>
</html>Trampa: olvidar cerrar </body> o </html> — el navegador a veces «adivina», pero el validador y tú se confunden.
Paso 2: Qué hace cada etiqueta grande
| Etiqueta | Rol | ¿Se ve en la página? |
|---|---|---|
<html> |
Raíz del documento; lang="es" indica idioma |
No como caja visible |
<head> |
Metadatos: charset, title, links a CSS, etc. | Casi nada (el title va a la pestaña) |
<body> |
Contenido visible: textos, imágenes, enlaces | Sí |
<meta charset="UTF-8"> |
Tildes y eñes correctas | No |
<title> |
Texto de la pestaña / favoritos | En la pestaña, no en el body |
Regla mental: head = información para el navegador y buscadores; body = lo que lee el visitante.
Paso 3: Prueba un error típico a propósito
Mueve el <h1>Título</h1> (agrévalo) dentro del <head>, guarda y recarga. Verás que el título no aparece como esperabas en el diseño normal — el contenido visible pertenece al body. Deshaz el cambio.
Trampa: poner CSS o scripts enormes en el body sin saber; para empezar, deja el head limpio con charset + title.
Paso 4: Código completo de referencia
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Esqueleto claro</title>
</head>
<body>
<h1>Visible en la página</h1>
<p>Esto está en el body.</p>
</body>
</html>Si algo no funciona
| Síntoma | Causa probable | Solución |
|---|---|---|
| Tildes rotas (á) | Falta charset UTF-8 | Meta charset al inicio del head |
| Pestaña dice «Sin título» | Falta o está vacío <title> |
Complétalo en el head |
| Página en blanco | Texto fuera del body o archivo mal guardado | Revisa cierre de etiquetas y extensión .html |
| Se ve el código crudo | Abriste en Word o extensión .txt | Guarda como .html y ábrelo en el navegador |
¿Puedo tener dos <body>?
No en un documento HTML válido. Un solo body.
¿El DOCTYPE va dentro de html?
No: va antes de <html>.
Reto: cambia el title a tu nombre y el párrafo a una frase tuya; verifica pestaña y contenido.
Para seguir: títulos y párrafos (h1–h6, p) — jerarquía del texto dentro del body.
