Encabezados (h1 a h6) y párrafos (p)

Qué son las etiquetas h1, h2, h3, h4, h5, h6 y p: jerarquía semántica, buenas prácticas y estructura legible.

📘 Teoría

¿Qué son los encabezados (h1-h6)?

Los encabezados crean el esqueleto semántico de tu página.

Cuando una persona escanea una página, busca títulos para orientarse. Los lectores de pantalla también generan un listado de encabezados para navegar rápido. Por eso h1, h2, h3... no son solo formato: son estructura del contenido.

Piensa en una jerarquía de apuntes: h1 es el tema principal, h2 los apartados, h3 los subapartados. Si respetas ese orden, ayudas al usuario, al SEO y a la accesibilidad al mismo tiempo.

h1

Título principal de la página o del bloque principal de contenido.

h2

Secciones principales dentro del tema.

h3-h6

Subniveles para detallar sin romper el orden lógico.

Jerarquía correcta de encabezados

<h1>Guía de HTML</h1>
<p>Introducción breve al curso.</p>
<h2>¿Qué es una etiqueta?</h2>
<p>Las etiquetas describen el tipo de contenido.</p>
<h3>Apertura y cierre</h3>
<p>La mayoría de etiquetas tienen apertura y cierre.</p>
<h2>Atributos</h2>
<p>Aportan información adicional al elemento.</p>

Reglas prácticas de jerarquía

Orden semántico primero, estilo después.

Evita saltar niveles sin motivo. Si vienes de un h2, el siguiente nivel lógico es h3. Saltar a h4 suele indicar que la estructura no está bien pensada.

También evita usar un encabezado solo porque 'se ve grande'. Si lo único que quieres es cambiar apariencia, aplica clases CSS a un elemento adecuado.

Usa un h1 principal claro y descriptivo.
No saltes de h2 a h4 sin pasar por h3.
La semántica no depende del tamaño visual.
Revisa el esquema de encabezados antes de publicar.

La etiqueta p (párrafo)

Texto legible y agrupado por ideas.

Cada p representa una unidad de texto. Separar ideas en párrafos cortos mejora lectura en móvil y escritorio.

Dentro de un párrafo puedes usar elementos inline como strong, em o a. No metas bloques como div o section dentro de p.

Un párrafo por idea principal.
Evita párrafos demasiado largos.
No anides un p dentro de otro p.

Párrafos bien definidos

<p>Este es el primer párrafo del documento.</p>
<p>Este es el segundo. Cada párrafo aporta una idea.</p>

1 ¿Qué son los encabezados (h1-h6)? 2 Reglas prácticas de jerarquía 3 La etiqueta p (párrafo)

🧭 Visuales clave

Elementos block vs inline

Refuerza por qué un párrafo o un encabezado ocupan línea propia mientras elementos como strong o a viven dentro del flujo del texto.

Comparativa visual entre elementos block e inline en HTML

🧪 Aprende probando

Ejemplo Estructura base con h1, h2 y p Practica una jerarquía mínima coherente y añade un subapartado h3.

⌄

🏁 Retos

Reto Reto: añadir un h2 y su párrafo Inserta una nueva sección sin romper la jerarquía.

⌄

Reto Reto: completar con h3 Añade un subapartado sin saltar niveles.

⌄

🧰 Recursos

Enlaces útiles

Lenguaje HTML - Encabezados h1...h6 W3Schools - HTML Headings MDN - Encabezados h1-h6 MDN - p (párrafo)

Test

Comprueba tus conocimientos con un test sobre HTML.

Test de HTML

Recursos del curso 27

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 03

Sintaxis HTML: cómo se escribe el lenguaje

Lección 05

Texto semántico en HTML: mark, abbr, kbd, del/ins, dfn, dl, progress y meter

›