HTML: títulos h1–h6 y párrafos

Nivel: Intro · HTML · Después de html/head/body · 12 minutos

Respuesta corta: los encabezados <h1>…<h6> marcan la jerarquía del contenido (de más a menos importante); el párrafo <p> agrupa texto corrido. Un buen documento tiene un solo h1 principal, luego h2/h3 como secciones, y párrafos debajo — no seis «títulos enormes» al mismo nivel.

Si ya armaste el esqueleto, el body necesita estructura legible para humanos y para buscadores. Aquí practicas con una tabla de niveles, ejercicios con solución y errores típicos.

Wireframe de página con un título grande arriba y dos bloques de párrafo debajo — Un titular claro + párrafos: la unidad básica de lectura en una página.

Jerarquía h1–h6 y el párrafo

Etiqueta	Uso típico	Tamaño visual (por defecto)
`<h1>`	Título principal de la página	El más grande
`<h2>`	Sección	Grande
`<h3>`	Subsección	Medio
`<h4>`–`<h6>`	Niveles más finos (poco frecuentes al empezar)	Cada vez menor
`<p>`	Párrafo de texto	Texto normal

<h1>Receta de panqueques</h1>
<p>Versión rápida para el desayuno.</p>
<h2>Ingredientes</h2>
<p>Harina, leche, huevo.</p>
<h2>Pasos</h2>
<h3>Mezcla</h3>
<p>Junta todo en un bol.</p>

Árbol esquemático con nodo superior y ramas que bajan a bloques menores — La página es un árbol: h1 en la raíz, h2 como ramas, párrafos como hojas de texto.

Buenas prácticas (con ejemplo)

Un h1 por página (el tema principal).
No saltes niveles de h1 a h4 sin h2/h3: confunde lectores de pantalla.
No uses h1 solo por el tamaño: si quieres texto grande decorativo, más adelante usarás CSS; el h1 es semántica.
Párrafos cortos: un idea por <p> ayuda en móvil.

Estudiante compara una página ordenada con un solo título grande frente a otra desordenada con muchos títulos iguales — Izquierda: jerarquía clara. Derecha: todo grita igual — mala estructura.

Ejercicios con solución

1. ¿Dónde va el texto de la pestaña del navegador?

En <title> dentro del <head>, no en un h1.

2. ¿Cuántos h1 conviene tener?

Uno principal por página (regla práctica al aprender).

3. Reescribe mentalmente: tres h1 seguidos «Intro», «Datos», «Cierre».

Mejor: un h1 del tema y tres h2.

4. ¿Un párrafo largo debe ir en un solo <p> o en varios?

Varios <p> si hay ideas distintas; no uses <br> para fingir párrafos.

5. ¿h3 puede ir antes que h2?

Evítalo: respeta el orden lógico de niveles.

6. Escribe el esqueleto de una página «Mi hobby» con h1, dos h2 y un p bajo cada uno.

Ejemplo: h1 Mi hobby → h2 Por qué me gusta + p → h2 Cómo empecé + p.

Errores frecuentes

Usar <b> o tipografía enorme en vez de encabezados: pierdes semántica y SEO básico.
Poner todo el artículo en un solo <p>: ilegible.
Empezar en h3 porque «se ve bonito»: ajusta con CSS después; no rompas la escala.

Para seguir: cuando toque el calendario de HTML, listas (ul/ol) y enlaces (a) completan la caja de herramientas del body.