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.

Los encabezados (h1 a h6) definen títulos y subtítulos según su importancia semántica.

Un h1 suele representar el título principal del contenido; después se desglosa con h2, h3 y niveles siguientes sin saltos raros.

No uses encabezados para cambiar tamaño visual: para eso está CSS.

La etiqueta p define párrafos de texto y mejora legibilidad, accesibilidad y mantenimiento.

  • 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.
  • 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.

¿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.

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.
HTML
04

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.

Código del tema: <h1>-<h6> | <p>

📘 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.

1

h1

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

2

h2

Secciones principales dentro del tema.

3

h3-h6

Subniveles para detallar sin romper el orden lógico.

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.

🧭 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

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com