HTML Academy · Lección

Encabezados h1-h6 y su jerarquía

Use los niveles de encabezado para crear una estructura de documento significativa.

Encabezados h1-h6 y su jerarquía es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

Los seis niveles de encabezado

HTML proporciona seis elementos de encabezado, desde <h1> hasta <h6>:

h1 — Título principal de la página (el más importante)
h2 — Secciones principales
h3 — Subsecciones
h4, h5, h6 — Subsecciones más profundas (rara vez son necesarios)

Su tamaño disminuye visualmente, pero CSS controla el tamaño, no el número.

Jerarquía semántica

Los encabezados crean un esquema del documento, como un índice de su página:

<h1>HTML Fundamentals</h1>
  <h2>Document Structure</h2>
    <h3>The html Element</h3>
    <h3>The head Element</h3>
  <h2>Text Elements</h2>
    <h3>Headings</h3>
    <h3>Paragraphs</h3>

La regla de h1

Buenas prácticas para <h1>:

Use exactamente un elemento <h1> por página
Debe coincidir o estar estrechamente relacionado con el elemento <title>
Es el tema principal de la página
Los motores de búsqueda le asignan mucho peso para el SEO

No omita niveles

Los niveles de encabezado deben usarse en orden; no pase de h2 a h4:

<!-- Bad: skips h3 -->
<h2>Section</h2>
<h4>Subsection</h4>

<!-- Good: sequential order -->
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<!-- Screen readers use outline order to navigate. Skipping breaks navigation. -->

Encabezados para la navegación

Los usuarios de lectores de pantalla dependen de los encabezados para navegar por páginas largas:

Saltan de un encabezado a otro con la tecla H
Los lectores de pantalla enumeran todos los encabezados como si fueran un índice
Una jerarquía correcta permite navegar por la página sin necesidad de verla

Estilo frente a semántica

No elija un nivel de encabezado por su tamaño visual; use CSS para eso:

<!-- Bad: using h4 because it looks right -->
<h4 style="font-size: 2rem">Big Heading</h4>

<!-- Good: correct level, sized with CSS -->
<h1>Big Heading</h1>
<!-- CSS: h1 { font-size: 2rem; } -->

Encabezados en las secciones

Al usar elementos de seccionado de HTML5, la jerarquía de encabezados se reinicia en cada sección:

<article>
  <h2>Article Title</h2>    <!-- h2 within article -->
  <section>
    <h3>Subtopic</h3>       <!-- h3 within section -->
  </section>
</article>

<aside>
  <h2>Related Links</h2>   <!-- h2 in aside, independent section -->
</aside>

Consejos de accesibilidad para encabezados

Siga estas reglas de encabezados para garantizar la accesibilidad:

Cada página debe tener al menos un encabezado
El área de contenido principal debe comenzar con un elemento <h1>
No use encabezados solo para poner el texto en negrita o hacerlo más grande
No use texto en negrita como sustituto de los encabezados

SEO y encabezados

Los motores de búsqueda usan los encabezados para comprender el contenido de la página:

<h1> tiene el mayor peso para el SEO
Incluya las palabras clave objetivo de forma natural en los encabezados
Los encabezados dividen el contenido y mejoran las métricas de legibilidad
Los motores de búsqueda muestran encabezados en los resultados (fragmentos destacados)

Estilos predeterminados del navegador

Los navegadores aplican estilos predeterminados a los encabezados:

/* Default browser heading sizes (approximate) */
h1 { font-size: 2em;   font-weight: bold; }
h2 { font-size: 1.5em; font-weight: bold; }
h3 { font-size: 1.17em;font-weight: bold; }
h4 { font-size: 1em;   font-weight: bold; }
h5 { font-size: 0.83em;font-weight: bold; }
h6 { font-size: 0.67em;font-weight: bold; }

Encabezados en la navegación

Los encabezados también pueden usarse en regiones de navegación:

<nav aria-labelledby="nav-heading">
  <h2 id="nav-heading">Main Navigation</h2>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Comprobación rápida

¿Cuántos elementos h1 debería tener normalmente una página bien estructurada?

Resumen: encabezados

Aspectos esenciales de la jerarquía de encabezados:

Seis niveles: de h1 a h6
Un solo h1 por página: el título principal
Use los niveles en orden; nunca omita un nivel
Los encabezados crean un esquema del documento accesible
Use CSS para el tamaño visual, no los números de los encabezados

Preguntas frecuentes

¿La lección «Encabezados h1-h6 y su jerarquía» es gratis?

Sí — el texto completo de «Encabezados h1-h6 y su jerarquía» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Encabezados h1-h6 y su jerarquía»?

Use los niveles de encabezado para crear una estructura de documento significativa. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Encabezados h1-h6 y su jerarquía»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a HTML Academy