Docs ejecutables de HTML: Encabezados HTML

Q: ¿Cuántas etiquetas de encabezado hay en HTML?

Seis: , , , , y . es el más importante (el título de la página) y el que menos. No existe ; una etiqueta así se trata como un elemento en línea desconocido.

Q: ¿Cuáles son los tamaños por defecto de los encabezados HTML?

Con el texto por defecto de 16px, los navegadores muestran h1 a 32px (2em), h2 a 24px (1.5em), h3 a 18.72px (1.17em), h4 a 16px (1em), h5 a 13.28px (0.83em) y h6 a 10.72px (0.67em), todos en negrita.

Q: ¿Puedo tener más de un h1 en una página?

HTML lo permite, pero un solo que nombre la página es la estructura más clara para quienes usan lectores de pantalla y para los buscadores. Usa para las secciones principales debajo de él.

Q: ¿Cómo cambio el tamaño de un encabezado?

Define font-size en el CSS, por ejemplo h2 { font-size: 20px; } o una clase en un encabezado concreto. Nunca elijas un nivel de encabezado por su tamaño por defecto.

Encabezados en HTML: de h1 a h6, tamaños, orden y estilos

HTML tiene seis niveles de encabezado, de <h1> a <h6>, que le dan a la página su esquema. Aprende los tamaños por defecto, cómo ordenar los encabezados, cuántas etiquetas h1 usar, cómo cambiar su tamaño con CSS y cómo los usan los lectores de pantalla.

Esta página incluye editores ejecutables: edita, ejecuta y ve el resultado al instante.

Por Kevin Spektor, Co-founder & CTO

Publicado el Sep 24, 2026

Las seis etiquetas de encabezado de HTML

HTML tiene seis niveles de encabezado, de <h1> a <h6>. <h1> es el nivel superior (el título de la página) y <h6> el más bajo. Los navegadores muestran cada nivel más pequeño que el anterior, todos en negrita y cada uno en su propia línea:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headings</title>
</head>
<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <p>A paragraph, for comparison.</p>
</body>
</html>

Etiqueta	Tamaño por defecto	Con texto de 16px
`<h1>`	2em	32px
`<h2>`	1.5em	24px
`<h3>`	1.17em	18.72px
`<h4>`	1em	16px
`<h5>`	0.83em	13.28px
`<h6>`	0.67em	10.72px

<h5> y <h6> son más pequeños que el texto normal por defecto, algo que sorprende a mucha gente. El tamaño es solo un valor por defecto, y las siguientes secciones muestran por qué el nivel nunca debe elegirse por el tamaño.

Los encabezados son el esquema de la página

Los encabezados no son decoración. Juntos forman el esquema de la página, como el índice de un libro. Quienes usan lectores de pantalla saltan de encabezado en encabezado para encontrar lo que buscan, y los buscadores los leen para entender los temas de la página.

La regla es sencilla: un <h1> para el título de la página, <h2> para cada sección principal, <h3> para las subsecciones dentro de un <h2>, y así sucesivamente, sin saltarse niveles. Este ejemplo construye un índice a partir de los encabezados, igual que los ven las herramientas de asistencia:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #toc { background: #e5e7eb; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
  </style>
</head>
<body>
  <div id="toc"></div>
  <h1>Pasta recipes</h1>
  <h2>Tomato sauce</h2>
  <h3>Ingredients</h3>
  <h3>Steps</h3>
  <h2>Pesto</h2>
  <h3>Ingredients</h3>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map((h) => {
      const level = Number(h.tagName[1]);
      return '\u00a0'.repeat((level - 1) * 4) + h.tagName.toLowerCase() + ': ' + h.textContent;
    });
    document.getElementById('toc').innerHTML = lines.join('<br>');
  </script>
</body>
</html>

Cambia el segundo <h3> por <h5> y el esquema muestra un hueco: alguien que navega por encabezados se preguntaría dónde está el h4.

Cambiar el tamaño de un encabezado

Elige el nivel según su posición en el esquema y luego define el aspecto con CSS. El título de una barra lateral puede tener que ser un <h2> pero verse pequeño; el título de una portada puede ser un <h1> muy grande:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { font-size: 44px; margin-bottom: 4px; }
    h2 { font-size: 18px; color: #2563eb; text-transform: uppercase; letter-spacing: 0.05em; }
    .quiet { font-weight: 500; font-size: 16px; color: #4b5563; }
  </style>
</head>
<body>
  <h1>Big hero title</h1>
  <h2>Small section label</h2>
  <p>Still an h2 for screen readers, whatever it looks like.</p>
  <h2 class="quiet">A quiet h2 with a class</h2>
</body>
</html>

Lo mismo vale al revés: no uses una etiqueta de encabezado solo para que un texto sea grande o esté en negrita. Para palabras en negrita dentro de una frase usa <strong>, y para texto grande que no es un encabezado usa un <p> con una clase. Consulta negrita para ver las etiquetas de texto.

Subtítulos y lemas

Un subtítulo justo debajo de un encabezado normalmente no es un encabezado: no empieza una sección nueva. Usa un párrafo y, si quieres, agrupa la pareja con <hgroup>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Subtitle</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    hgroup h1 { margin-bottom: 0; }
    hgroup p { margin-top: 4px; color: #4b5563; font-size: 18px; }
  </style>
</head>
<body>
  <hgroup>
    <h1>Coffee Guide</h1>
    <p>Everything about brewing at home</p>
  </hgroup>
  <h2>Grinding</h2>
</body>
</html>

El esquema queda limpio (un h1 y luego secciones h2), y el lema sigue visualmente junto al título.

Enlazar a un encabezado

Dale un id a un encabezado y cualquier enlace con #id en su href salta directamente a él. Así funcionan los índices y los botones de "copiar enlace a la sección":

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    section { min-height: 400px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav><a href="#install">Install</a> | <a href="#usage">Usage</a></nav>
  <section><h2 id="install">Install</h2></section>
  <section><h2 id="usage">Usage</h2></section>
</body>
</html>

Errores comunes

Elegir el nivel por su tamaño. Elige por la posición en el esquema y luego dale estilo con CSS.
Saltarse niveles. Pasar de <h2> directamente a <h4> rompe la navegación para quienes usan lectores de pantalla.
Encabezados para dar énfasis. Una línea en negrita dentro de un párrafo es <strong>, no <h4>.
Sin <h1>, o un logo como único <h1>. El <h1> debe nombrar el contenido de la página, como el título del artículo o del producto.
Encabezados vacíos. Un encabezado con solo un icono o sin nada dentro se anuncia en blanco. Pon texto real en él.

Preguntas frecuentes

¿Cuántas etiquetas de encabezado hay en HTML?

Seis: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. <h1> es el más importante (el título de la página) y <h6> el que menos. No existe <h7>; una etiqueta así se trata como un elemento en línea desconocido.

¿Cuáles son los tamaños por defecto de los encabezados HTML?

Con el texto por defecto de 16px, los navegadores muestran h1 a 32px (2em), h2 a 24px (1.5em), h3 a 18.72px (1.17em), h4 a 16px (1em), h5 a 13.28px (0.83em) y h6 a 10.72px (0.67em), todos en negrita.

¿Puedo tener más de un h1 en una página?

HTML lo permite, pero un solo <h1> que nombre la página es la estructura más clara para quienes usan lectores de pantalla y para los buscadores. Usa <h2> para las secciones principales debajo de él.

¿Puedo saltarme niveles de encabezado, como pasar de h2 a h4?

Evítalo. Quienes usan lectores de pantalla navegan por nivel de encabezado, y un salto de h2 a h4 sugiere que falta una sección. Elige el nivel según su posición en el esquema y cambia el tamaño con CSS.

¿Cómo cambio el tamaño de un encabezado?

Define font-size en el CSS, por ejemplo h2 { font-size: 20px; } o una clase en un encabezado concreto. Nunca elijas un nivel de encabezado por su tamaño por defecto.

Conceptos relacionados