Fundamentos y estructura de un documento HTML
Antes de teclear una sola etiqueta, vamos a hacer algo poco habitual en un curso
de programación: vamos a charlar un rato. Qué es HTML, de dónde sale ese nombre
tan raro, y por qué un puñado de símbolos angulares (esos <
y >) sostienen literalmente cualquier página que hayas
visto en tu vida, desde el buscador más austero hasta la tienda online más recargada.
Ve con calma, no hay cronómetro: todo lo que viene después se apoya en esta primera piedra.
¿Qué es HTML?
HTML son las siglas de HyperText Markup Language, Lenguaje de Marcado de Hipertexto si lo traducimos sin piedad. Y antes de que el nombre te asuste: no es un lenguaje de programación. No tiene variables, no tiene bucles, no toma decisiones ni un solo "si esto, entonces aquello" en toda su vida. Si vienes con ganas de JavaScript o Python y esperas encontrar aquí lógica de verdad, te vas a llevar un pequeño chasco. Tranquilo, llegará — pero no es hoy.
Lo que HTML sí hace, y hace muy bien, es marcar: etiquetar cada trozo de contenido para decirle al navegador qué es cada cosa. Piensa en él como las acotaciones de un guion de teatro. El guion no actúa, no dirige, no decide nada por sí mismo: simplemente apunta "esto lo dice Hamlet", "aquí entra el fantasma por la izquierda", "esto se dice en voz baja". El actor —en nuestro caso, el navegador— lee esas acotaciones y decide cómo representarlas en el escenario. Eso es exactamente HTML: las acotaciones de tu página.
Y si prefieres la versión anatómica, ya que hemos empezado con el teatro: HTML es el esqueleto de un cuerpo. Por sí solo no tiene color ni movimiento —eso llegará con CSS y JavaScript— y, siendo sinceros, un esqueleto en pantalla sin nada más da un poco de grima. Pero sin él no hay nada que sostenga el resto: ni la piel se sujeta en el aire ni los músculos tienen de dónde tirar. Cada etiqueta que aprendas en este curso es, literalmente, un hueso más de esa estructura. Y como en cualquier esqueleto, el orden importa: no vas a encajar el cráneo donde debería ir la rodilla, por mucho que técnicamente "quepa".
No necesitas memorizar las cerca de 100 etiquetas que existen en HTML5, ni falta
que hace. Nadie que programa bien se las sabe todas de memoria —sí, ni tu
profesor favorito de YouTube—. Lo que de verdad importa es entender la
lógica: dónde va cada cosa y por qué va ahí. Las etiquetas del día a día
(p, div,
a, img) se te quedarán
grabadas solas, por pura repetición, igual que te sabes el camino a la nevera de
memoria sin haberlo estudiado nunca.
La estructura mínima de un documento
Todo archivo HTML, por sencillo que sea, arranca con el mismo esqueleto de once líneas. Lo vas a escribir tantísimas veces en tu vida como programador que probablemente acabe saliéndote de los dedos casi sin pensar, como el PIN de tu tarjeta. Aquí lo tienes completo y funcionando. Dale a "Ejecutar", tócalo, rómpelo a propósito para ver qué pasa, y justo debajo lo desmontamos pieza por pieza para que sepas qué hace cada línea y, sobre todo, por qué está ahí.
Prueba a cambiar el texto entre <h1> o el del
párrafo y pulsa "Ejecutar". Verás el resultado al instante en el panel de la
derecha. Esto es exactamente lo que haremos en cada ejemplo del curso: leer,
tocar, romper y volver a arreglar.
Pieza por pieza
No es una etiqueta como tal —no se cierra, no tiene atributos, no tiene amigos—, es más bien un carraspeo antes de hablar. Le avisa al navegador: "ojo, lo que viene ahora es HTML5, la versión moderna del idioma, no te pongas en modo año 2000". Va siempre en la primera línea, sin excepción, y sin ella los navegadores antiguos podían activar algo llamado quirks mode ("modo rarezas", sin coña) que rompía el diseño de formas muy poco divertidas.
La caja que contiene todas las demás cajas: la etiqueta raíz de la que cuelga absolutamente todo. El atributo lang="es" parece un detalle menor, pero le dice al navegador —y sobre todo a los lectores de pantalla para personas con discapacidad visual— en qué idioma pronunciar tu contenido. Sin él, tu precioso español corre el riesgo de sonar con acento robótico inglés. Gracioso, sí, pero no es el objetivo.
La trastienda de un restaurante. El cliente nunca la ve, pero sin ella el cocinero no sabría qué preparar. Aquí van metadatos, el título de la pestaña, enlaces a hojas de estilo... nada que deba aparecer flotando en medio de tu página, igual que nadie espera encontrarse la cocina en mitad del comedor.
El comedor. Todo lo que el cliente ve o toca vive aquí: textos, imágenes, botones, formularios. Si se puede ver o pinchar, pertenece a <body>. Si no, probablemente se te ha colado en el sitio equivocado.
Escribir contenido visible (como un párrafo suelto) directamente dentro de
<head>. El navegador no te va a gritar ni a
marcarte error en rojo —eso sería demasiado amable por su parte—, simplemente
no lo mostrará donde esperas, o no lo mostrará en absoluto. Es el equivalente
a dejar un plato de comida en la cocina esperando que el cliente lo vea desde
la mesa: no va a pasar. Recuerda: <head> es
información sobre la página, no la página en sí.
Dentro de <head>: lo esencial
No todo lo que va en <head> es opcional o para nota. Estas tres líneas deberían estar en prácticamente cualquier página que crees, incluso en el boceto más rápido de un fin de semana:
Define la codificación de caracteres, y créeme que quieres tenerla. Con UTF-8 te aseguras de que acentos, eñes y símbolos se muestren tal cual los escribiste. Sin esto, es muy fácil que tu cuidado texto en español acabe convertido en algo como "programación" en vez de "programación" — un clásico que ha hecho llorar a generaciones enteras de desarrolladores primerizos frente a la pantalla.
El texto que aparece en la pestaña del navegador y, ojo aquí, en el titular azul de los resultados de Google. Cada página debería tener uno distinto y descriptivo: nada de dejar "Documento sin título" por pereza, que luego se nota.
Le dice al navegador del móvil cómo ajustar tu página al tamaño real de la pantalla. Sin ella, tu web se verá diminuta, como si la miraras desde la ventanilla de un avión, y el usuario tendrá que hacer zoom a pellizcos como en 2009. La escribiremos siempre igual: content="width=device-width, initial-scale=1.0".
Comentarios: notas que el navegador ignora
A veces quieres dejarte una nota a ti mismo dentro del código —un "esto está así por una razón, no lo toques"— o explicarle a otra persona (o a tu yo del futuro, que es básicamente otra persona con amnesia) por qué hiciste algo de cierta forma. Para eso existen los comentarios: el navegador los lee, se encoge de hombros, los ignora por completo, y jamás aparecen en pantalla. Son el equivalente a los post-it que le dejas a tu compañero de piso: solo los ve quien mira el código, nunca quien visita la página.
Usa comentarios para explicar el porqué, no el qué. Escribir
<!-- esto es un título --> justo encima de un
<h1> es como pegar una nota que diga "esto es
una silla" encima de una silla: no aporta nada, ya se ve perfectamente qué es.
En cambio, algo como
<!-- sección oculta hasta que el cliente confirme el texto -->
sí es oro puro para quien retome este código dentro de tres meses (spoiler:
normalmente ese "quien" eres tú mismo, con menos memoria de la que crees).
Y una última cosa: borra los comentarios que ya no sirvan. El código lleno de
fragmentos comentados "por si acaso" es lo que en la profesión llamamos, con
cariño, un cementerio de código zombie.
Encabezados: <h1> a <h6>
HTML ofrece seis niveles de encabezado, de <h1>
(el más importante, el titular de portada) a <h6>
(el menos importante, la letra pequeña de la letra pequeña). No son simplemente
"letras grandes que llaman la atención": definen la jerarquía del
contenido, exactamente como el índice de un libro, con capítulos, apartados y
subapartados anidados unos dentro de otros. De hecho, hay gente que navega tu
página saltando de encabezado en encabezado con el lector de pantalla,
sin leer ni una palabra del texto corrido, igual que tú hojeas un libro por el
índice antes de leerlo entero. Si tu jerarquía está desordenada, esa persona se
pierde. Literalmente.
Elegir un encabezado por su tamaño en vez de por su
significado. Imagina un libro donde los capítulos, los apartados y
las notas al pie tuvieran letras de tamaños aleatorios sin ningún criterio:
técnicamente se lee, pero da dolor de cabeza intentar seguir el hilo. Si
quieres un texto más pequeño, eso se hace con CSS, no saltando a un
<h4> porque "queda del tamaño que yo
quiero". Usa <h1> una única vez por página
—es el título general, el titular de portada, no hay dos portadas en un
periódico— y ve bajando de nivel según la jerarquía real del contenido, no
según cómo te apetezca que se vea hoy.
Párrafos y saltos: <p>, <br> y <hr>
El grueso del texto de cualquier página normalmente vive dentro de párrafos. Y hay dos etiquetas pequeñas —diminutas, de hecho, apenas dos o tres letras— pero muy usadas, para controlar los saltos de línea y las separaciones visuales entre bloques de contenido.
Define un párrafo de texto, el bloque de lectura más básico y más usado de todo HTML. El navegador añade automáticamente un pequeño espacio antes y después de cada uno, así que no necesitas forzarlo tú a mano.
Fuerza un salto de línea dentro de un mismo párrafo, sin llegar a cerrarlo y abrir uno nuevo. Es de las pocas etiquetas huérfanas de HTML: no lleva etiqueta de cierre, vive y muere sola.
Dibuja una línea horizontal para separar visualmente bloques de contenido que no tienen relación entre sí —piensa en el asterisco que separa escenas en una novela—. Tampoco lleva etiqueta de cierre.
Es muy tentador usar varios <br> seguidos
solo para "empujar" el contenido hacia abajo y crear espacio en blanco entre
bloques. Resiste esa tentación con todas tus fuerzas: el espaciado es trabajo
de CSS, no de HTML. Si te encuentras encadenando
<br><br><br> como quien pone
parches, es una señal clara de que en realidad necesitas otra herramienta —la
veremos muy pronto, lo prometo— y no un HTML disfrazado de maquetador.
Reglas de anidación que conviene interiorizar ya
Piensa en las etiquetas como esas muñecas rusas, las matrioskas: cada una tiene que encajar completamente dentro de la anterior antes de poder cerrarse. Estas tres reglas te van a ahorrar más de un dolor de cabeza, así que merece la pena leerlas dos veces:
- Toda etiqueta que se abre, se cierra:
<p>...</p>. Las excepciones son pocas y las iremos señalando por el camino (como<br>o<hr>, que ya conoces, o los inputs de un formulario, que verás más adelante). - Las etiquetas se cierran en orden inverso a como se abrieron: si abres A y luego B, cierras primero B y después A. Es la misma lógica que meter la muñeca pequeña dentro de la mediana, y esa dentro de la grande: no puedes cerrar la grande mientras la pequeña sigue fuera, aunque técnicamente "casi" encaje.
- La indentación (las sangrías) no la exige el navegador —a él le da absolutamente igual si tu código está pegado en una sola línea gigante—, pero te la exigirá tu yo del futuro dentro de seis meses, cuando abras este archivo y necesites entender qué va dentro de qué sin tener que descifrar un jeroglífico.
Ponlo a prueba
Comprueba lo que has aprendido
1. ¿Qué etiqueta contiene todo el contenido visible de una página?
2. ¿Por qué es incorrecto usar <h3> solo porque "queda del tamaño adecuado"?
3. ¿Cuál de estas etiquetas NO necesita etiqueta de cierre?