Etiquetas h1 a h6 en HTML: jerarquía de encabezados

Las etiquetas <h1> a <h6> representan encabezados de seis niveles y organizan la jerarquía del contenido. Sirven para distinguir el título principal, las secciones y sus subsecciones: en un curso, por ejemplo, permiten reconocer qué temas pertenecen a «Texto» y cuáles a «Formularios». Úsalas cuando el texto nombre una parte del contenido.

Ejemplo mínimo: h1, h2 y h3

<h1>Curso de HTML</h1>
<h2>Texto</h2>
<h3>Párrafos</h3>
<h2>Formularios</h2>

«Curso de HTML» es el encabezado principal. «Texto» y «Formularios» son secciones del curso, al mismo nivel; «Párrafos» depende de «Texto». Volver de <h3> a <h2> abre otra sección, sin continuar la subsección anterior.

Para probarlo, copia este fragmento dentro del <main> del documento completo de la receta que aparece más adelante, sustituyendo su contenido. Retira también el bloque <style> para observar la apariencia predeterminada. Verás cuatro encabezados, habitualmente en negrita y con tamaños diferentes.

Si cambias «Párrafos» a <h2>, pasará a tener el mismo nivel que «Texto». Si sustituyes <h3> por <p>, el texto seguirá visible, pero dejará de ser un encabezado. Cambiar solo su tamaño con CSS conserva su nivel.

Sintaxis y contexto válido

Cada elemento lleva apertura y cierre del mismo nivel: <h2>Ingredientes</h2>. En estos elementos ninguna de las dos etiquetas se puede omitir. Dentro admiten contenido de frase, como texto, <em>, <span> o enlaces; no párrafos, secciones ni otros encabezados. Es incorrecto escribir <h2>Texto <h3>Párrafos</h3></h2>.

Pueden aparecer en contenedores que admitan encabezados, como <main>, <article>, <section> o <div>, y en el contexto propio de <hgroup>. No los coloques dentro de <p>, cuyo contenido es de frase. La definición de los encabezados en el estándar HTML recoge estos contextos y restricciones.

Cómo elegir los seis niveles

Elige el nivel por la dependencia temática del contenido:

No necesitas usar los seis en todas las páginas. Una receta puede bastarse con tres. Al abrir una subsección de <h2>, usa <h3>; saltar a <h5> porque se ve más pequeño dificulta entender la organización. En cambio, volver de <h4> a <h2> para comenzar otra sección tiene sentido. La guía de encabezados de WAI explica esta diferencia.

Encabezados, secciones y lectores de pantalla

El esquema de la receta será:

h1 Ensalada de garbanzos
  h2 Ingredientes
  h2 Preparación
    h3 Mezclar y servir

Muchos lectores de pantalla permiten recorrer encabezados o consultar una lista de ellos. Sus nombres deben explicar el tema incluso fuera del párrafo que los rodea. El anuncio y los comandos concretos dependen del programa y de su configuración; el navegador no añade por sí solo un índice visible.

Envolver «Preparación» en <section> agrupa el contenido, pero no convierte automáticamente un <h1> en un <h2>. Escribe los niveles que necesita la página. Tampoco hace falta añadir role="heading" a un encabezado nativo. MDN describe la navegación por encabezados.

Caso práctico: receta con índice y tamaños propios

Guarda este documento como receta.html con codificación UTF-8 y ábrelo en el navegador. Incluye todo el HTML y CSS necesario; no requiere archivos adicionales, JavaScript ni servidor.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ensalada de garbanzos</title>
    <style>
      body {
        max-width: 40rem;
        margin: 2rem auto;
        padding: 0 1rem;
        font-family: sans-serif;
        line-height: 1.6;
      }

      .titulo-receta {
        font-size: 1.5rem;
      }

      h2 {
        font-size: 1.75rem;
      }

      h3 {
        font-size: 1.125rem;
      }

      a:focus-visible {
        outline: 3px solid currentColor;
        outline-offset: 3px;
      }
    </style>
  </head>
  <body>
    <main>
      <h1 class="titulo-receta">Ensalada de garbanzos</h1>
      <p>Una receta sencilla para dos personas.</p>

      <nav aria-label="Índice de la receta">
        <ul>
          <li><a href="#ingredientes">Ingredientes</a></li>
          <li><a href="#preparacion">Preparación</a></li>
          <li><a href="#mezclar">Mezclar y servir</a></li>
        </ul>
      </nav>

      <section>
        <h2 id="ingredientes">Ingredientes</h2>
        <ul>
          <li>400 g de garbanzos cocidos y escurridos</li>
          <li>1 tomate</li>
          <li>2 cucharadas de aceite de oliva</li>
        </ul>
      </section>

      <section>
        <h2 id="preparacion">Preparación</h2>
        <p>Lava el tomate y córtalo en dados.</p>
        <h3 id="mezclar">Mezclar y servir</h3>
        <p>Mezcla el tomate, los garbanzos y el aceite en un cuenco.
          Reparte la ensalada en dos platos.</p>
      </section>
    </main>
  </body>
</html>

El título principal se verá más pequeño que los <h2> de forma deliberada: .titulo-receta cambia la apariencia, no la jerarquía. font-size es una propiedad CSS. Para un diseño habitual puedes darle al título un tamaño mayor sin cambiar ninguna etiqueta.

Prueba estos cambios por separado:

1. Pulsa Tab hasta un enlace del índice y Enter para activarlo. La URL incorpora su fragmento y el navegador lleva la navegación al destino indicado por id.
2. Cambia font-size: 1.5rem a font-size: 2rem. Crece el título; «Ingredientes» sigue siendo de nivel 2.
3. Sustituye <h3 id="mezclar"> y su cierre por <p id="mezclar"> y </p>. El enlace continúa encontrando ese id, pero «Mezclar y servir» desaparece de la lista de encabezados accesibles.
4. Retira el bloque <style>. Se mantienen el contenido, los enlaces y los niveles, con la presentación predeterminada del navegador.

Atributos y errores habituales

Los encabezados no tienen atributos específicos vigentes. Admiten los globales: id identifica un destino y debe ser único, no vacío y sin espacios; class permite seleccionar elementos con CSS. El estándar define ambos atributos globales.

style es un atributo global; font-size y text-align son propiedades CSS. Desde JavaScript, textContent es una propiedad del DOM para consultar o cambiar texto, no un atributo específico de <h1>. El antiguo align es obsoleto; para alinear usa CSS.

Evita encabezados vacíos y rótulos imprecisos como «Más». Tampoco uses <strong> como sustituto: expresa importancia dentro del contenido, no un nivel de encabezado, aunque aparezca en negrita.

Preguntas frecuentes y etiquetas relacionadas

¿Puede haber más de un h1 en una página?

Sí; no existe una prohibición general de escribir varios <h1>. Eso no significa que cada sección deba empezar con uno. Para una página como esta receta, conviene un título principal claro y secciones con <h2>. En una lista de artículos bajo un título de página, sus títulos pueden ser <h2>. MDN recomienda un único <h1> como práctica general. El número por sí solo no garantiza posiciones en buscadores ni permite atribuir una penalización automática.

¿H1 es siempre el texto más grande?

No. CSS controla el tamaño, como muestra la receta. Un <h1> pequeño conserva su nivel; un párrafo grande sigue siendo un párrafo.

¿En qué se diferencian section, hgroup, title y nav?

<section> agrupa un tema y su contenido; el encabezado lo nombra. <hgroup> reúne un encabezado con texto relacionado, como un subtítulo que no abre otra sección. <title> identifica el documento en la pestaña y pertenece a <head>; no sustituye el encabezado visible. <nav> agrupa navegación, como los enlaces del índice de la receta, sin cambiar los niveles.

Compatibilidad y fuentes

Consultado el 4 de octubre de 2026: los seis elementos están disponibles en Chrome, Edge, Firefox y Safari actuales; la referencia de MDN incluye su compatibilidad. Los ejemplos usan niveles escritos explícitamente y funcionan sin scripts.

Para las reglas de autoría consulta el HTML Living Standard sobre encabezados. Para revisar que su orden comunica la estructura, consulta las recomendaciones de WAI.