CodeForge

Maquetación Web Dinámica / HTML5 desde cero: el esqueleto

Anatomía de un documento HTML

Teoría15 min20 XP

En el módulo pasado escribiste un documento HTML "de memoria". Hoy vas a entender cada línea de ese esqueleto: qué hace, por qué existe y qué pasa si falta. Al terminar podrás escribir la estructura de cualquier página con los ojos cerrados.

Las cuatro piezas del esqueleto

index.html
<!doctype html>
<html lang="es">
<head>
  <title>Mi página</title>
</head>
<body>
  <h1>Contenido visible</h1>
</body>
</html>
  1. <!doctype html>: la primera línea SIEMPRE. Le dice al navegador "esto es HTML moderno". Sin ella, el navegador entra en un modo antiguo de compatibilidad (quirks mode) y tu CSS se comporta raro.
  2. <html lang="es">: la raíz que envuelve todo. El atributo lang importa más de lo que parece: lo usan los lectores de pantalla para pronunciar bien y los traductores automáticos.
  3. <head>: información SOBRE la página que no se ve — título de la pestaña, conexión con el CSS, metadatos.
  4. <body>: todo lo que SÍ se ve. Tu lienzo.

Etiquetas, atributos y contenido

Toda pieza de HTML sigue la misma gramática:

gramatica.html
<etiqueta atributo="valor">contenido</etiqueta>

<!-- Ejemplo real: -->
<a href="https://developer.mozilla.org">Ir a MDN</a>

<!-- Algunas etiquetas no tienen contenido ni cierre: -->
<img src="foto.jpg" alt="Una foto">

Pruébalo en vivo — este es el documento completo renderizado:

¿Y si me equivoco?

HTML es un lenguaje tolerante: si olvidas cerrar una etiqueta, el navegador intenta adivinar y pinta algo de todas formas. Eso es bueno (nada "explota") y peligroso (los errores se esconden). Por eso desde ya: indenta cada nivel con dos espacios como en los ejemplos — los errores se VEN cuando el código está ordenado.

¿Dónde va la etiqueta <title> que nombra la pestaña del navegador?

Mini-reto

Toma tu index.html del módulo anterior y rómpelo a propósito: borra el <!doctype html>, recarga, y observa. Luego borra el </h1> de cierre y mira qué decide hacer el navegador. Repararlo tú mismo vale más que mil explicaciones.

Qué sigue

Ya dominas el esqueleto. Ahora toca llenarlo: la próxima lección es sobre texto — títulos, párrafos, énfasis y listas. El 90% de la web es texto bien estructurado.