En el capítulo anterior creaste tu primera web con una simple línea de código. Funcionó, ¿verdad? Pero había algo que no te conté: estabas haciendo un poco de trampa.
Verás, toda página web tiene un esqueleto — una estructura que organiza todo lo demás. Es como el plano de un edificio: sin él, el edificio podría mantenerse en pie... pero nadie querría vivir ahí.
Observa la estructura completa de un documento HTML:
No exactamente. Los navegadores son increíblemente tolerantes — como un amigo que te entiende aunque hables con la boca llena. Si le das HTML incompleto, el navegador hace su mejor esfuerzo para mostrarlo de todos modos.
Pero aquí está el secreto: los profesionales no dependen de la tolerancia del navegador. Escriben código claro y estructurado porque saben que así evitan errores misteriosos y su código funciona igual en todos los navegadores.
Piensa en la estructura HTML como un cuerpo humano. Cada parte tiene su función:
<!DOCTYPE html> — La declaración de identidadEsta línea no es una etiqueta, es una declaración. Le dice al navegador: "Hey, esto es HTML5, el estándar moderno". Sin ella, el navegador podría entrar en "modo peculiar" y comportarse de formas inesperadas.
<html> — El contenedor universalTodo, absolutamente todo, vive dentro de esta etiqueta. Es como la piel que envuelve tu cuerpo entero.
El atributo lang="es" le dice al navegador (y a los lectores de pantalla) que el contenido está en español.
<head> — El cerebro invisibleAquí vive la información que el usuario no ve directamente, pero que es crucial:
Es el backstage de tu página — nadie lo ve, pero sin él, el show no funciona.
<body> — El escenario principalTodo lo que el usuario puede ver y tocar vive aquí. Textos, imágenes, botones, vídeos...
Si está en pantalla, está dentro del <body>.
Si te fijas, algunas etiquetas están más adentro que otras, como escalones en una escalera. A esto lo llamamos indentación, y es uno de esos pequeños secretos que separan el código caótico del código elegante.
Aquí viene la revelación: la indentación no significa absolutamente nada para el navegador. Podrías escribir toda tu página web en una sola línea interminable, así:
¿Funciona? Perfectamente. ¿Es legible? Es como intentar leer un libro donde todas las palabras están pegadas sin espacios ni párrafos.
La indentación existe por una razón muy humana: nosotros no somos máquinas. Nuestro cerebro necesita orden visual para entender las cosas. Cuando indentas el código, estás dibujando un mapa que dice: "Esto está dentro de aquello".
Mira de nuevo la estructura con indentación:
¿Ves cómo cada nivel de profundidad cuenta una historia? El <title> está dentro del <head>,
que está dentro del <html>. Es como ver las capas de una muñeca rusa:
cada una contiene a la siguiente, y la indentación te lo muestra sin que tengas que pensarlo.
Cuando trabajes en proyectos reales — y créeme, llegarás ahí — pasarás más tiempo leyendo código que escribiéndolo. El código bien indentado es un regalo que te haces a ti mismo del futuro... y a cualquiera que trabaje contigo.
Ahora que conoces el esqueleto completo, es hora de construir una página como los profesionales.
Crea un documento HTML con la estructura básica y dentro del <body>, añade un título <h1> con el texto que quieras.
El esqueleto está listo. Es hora de darle vida...