Encabezado HTML: cómo usar <h1> – <h6>

Un encabezado HTML es un elemento que se utiliza para estructurar jerárquicamente el contenido de una página web. Existen seis niveles de encabezados, desde <h1> hasta <h6>, que indican la importancia y jerarquía de la información.

Usarlos correctamente no solo mejora la legibilidad para los usuarios, sino también la optimización en motores de búsqueda y asistentes de IA.

En este artículo aprenderás qué son los encabezados HTML, cómo usarlos junto con los párrafos, buenas prácticas y ejemplos prácticos que podrás aplicar de inmediato.

Encabezado HTML: etiquetas <h1> — <h6>

Los encabezados HTML son un conjunto de seis etiquetas heading (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) que se utilizan para indicar los títulos de las secciones de una página web. Son etiquetas de apertura y cierre; requieren una etiqueta de cierre (con una barra inclinada), por ejemplo: </h1>.

El nivel del encabezado indica su importancia y lugar en la jerarquía del documento:

• <h1>: Encabezado del primer nivel, el más alto, generalmente corresponde al título de la página o a su idea principal.
• <h2>: Encabezado del segundo nivel, indica las secciones principales de la página.
• <h3>: Encabezado del tercer nivel para subsecciones dentro de <h2>.
• <h4>, <h5>, <h6>: Siguientes niveles de anidamiento. Cuanto mayor sea el número, menor será el “estatus” del encabezado.

Cada nivel define el significado y la estructura, no la apariencia. Aunque el navegador cambia el tamaño y la negrita del texto en los encabezados de forma predeterminada, no se deben usar estas etiquetas solo para cambiar el formato del texto. Lo prioritario es la jerarquía y la importancia de los encabezados. El formato se modifica mejor con estilos CSS.

Los navegadores aplican por defecto diferentes formatos (tamaño de fuente, negrita) a estas etiquetas, reflejando visualmente su estado jerárquico. <h1> se muestra con el tamaño y la negrita más grandes, y <h6> es el menos visible.

<div>
  <h1>Este es un encabezado h1</h1>
  <h2>Este es un encabezado h2</h2>
  <h3>Este es un encabezado h3</h3>
  <h4>Este es un encabezado h4</h4>
  <h5>Este es un encabezado h5</h5>
  <h6>Este es un encabezado h6</h6>
</div>

<div>
  <h1>Este es un encabezado h1</h1>
  <h2>Este es un encabezado h2</h2>
  <h3>Este es un encabezado h3</h3>
  <h4>Este es un encabezado h4</h4>
  <h5>Este es un encabezado h5</h5>
  <h6>Este es un encabezado h6</h6>
</div>

No es obligatorio usar los seis niveles. Normalmente, tres son suficientes: <h1>, <h2> y <h3>; con más niveles, el lector puede confundirse.

Jerarquía de encabezados correcta

Al usar encabezados, es importante construir una estructura lógica de la página, no solo elegir el tamaño de fuente correcto. Esto ayuda tanto a los usuarios como a los motores de búsqueda a comprender mejor el contenido.

La regla principal: los encabezados deben ir en orden, del mayor al menor.

Si tienes un <h1>, el siguiente nivel debe ser <h2>, luego <h3>, y así sucesivamente. No se deben omitir niveles; esto confunde tanto a los lectores como a los lectores de pantalla (programas que leen textos a personas con discapacidad visual).

Ejemplo de jerarquía correcta:

<!-- Jerarquía correcta: los encabezados siguen una secuencia -->
<h1>Encabezado principal de la página</h1>
<h2>Sección 1</h2>
<h3>Subsección 1.1</h3>
<h2>Sección 2</h2>
<h3>Subsección 2.1</h3>
<h4>Subsección 2.1.1</h4>

<!-- Jerarquía correcta: los encabezados siguen una secuencia -->
<h1>Encabezado principal de la página</h1>
<h2>Sección 1</h2>
<h3>Subsección 1.1</h3>
<h2>Sección 2</h2>
<h3>Subsección 2.1</h3>
<h4>Subsección 2.1.1</h4>

Ejemplos con errores:

<!-- Se omite el nivel h2 -->
<h1>Encabezado principal</h1>
<h3>Subsección</h3>
<!-- Se omite el nivel h3 -->
<h1>Encabezado principal</h1>
<h2>Sección 2</h2>
<h4>Subsección</h4>

<!-- Se omite el nivel h2 -->
<h1>Encabezado principal</h1>
<h3>Subsección</h3>

<!-- Se omite el nivel h3 -->
<h1>Encabezado principal</h1>
<h2>Sección 2</h2>
<h4>Subsección</h4>

En la mayoría de los casos, solo se necesita un <h1> por página; indica el tema principal. Sin embargo, si se utilizan las etiquetas <section> o <article>, se pueden colocar <h1> dentro de ellas (HTML5 lo permite). Lo importante es no exagerar y no romper la lógica.

¿Cómo afecta la etiqueta <h1> al SEO?

La etiqueta <h1> es el encabezado principal de la página y los motores de búsqueda le prestan especial atención. Ayuda a los algoritmos a comprender de qué trata la página.

• El texto en <h1> ayuda a los robots a determinar el tema de la página.
• La longitud óptima del encabezado es de 50 a 70 caracteres.
• No se debe rellenar <h1> con palabras clave. Es mejor usar 1 o 2 frases clave de forma orgánica.
• Si no hay <h1> en la página, el motor de búsqueda indexará el contenido de todos modos, pero sin un encabezado principal es más difícil comprender el tema.

Estilización de encabezados y párrafos con CSS

Por defecto, el navegador aplica estilos a los encabezados y párrafos, pero puedes personalizarlos con CSS:

<style>
  h1 {
    color: #333;
    font-size: 2em;
  }
  p {
    color: #666;
    line-height: 1.5;
  }
</style>

<style>
  h1 {
    color: #333;
    font-size: 2em;
  }
  p {
    color: #666;
    line-height: 1.5;
  }
</style>

<h1 style="font-size:60px;">Encabezado 1</h1>

<h1 style="font-size:60px;">Encabezado 1</h1>

Consejos y mejores prácticas

• Planifica la estructura de antemano. Antes de maquetar, piensa qué niveles de encabezados tendrá la página. Esto ayudará a construir una jerarquía lógica y evitar omisiones de niveles.

• Agrega una tabla de contenido. Si el artículo es largo, una tabla de contenido facilita la navegación. Se puede generar automáticamente con JavaScript basándose en los encabezados <h2> y <h3>.

Así se hace:

HTML

<main>
  <div id="toc"></div>
  <article id="article">
    <h2 id="intro">Introducción</h2>
    <p>Texto de introducción...</p>
    <h2 id="usage">Cómo usar</h2>
    <p>Descripción general del uso.</p>
    <h3 id="step1">Paso 1</h3>
    <p>Descripción del primer paso.</p>
    <h3 id="step2">Paso 2</h3>
    <p>Descripción del segundo paso.</p>
    <h2 id="summary">Conclusión</h2>
    <p>Resumen de los resultados.</p>
  </article>
</main>

<main>
  <div id="toc"></div>
  <article id="article">
    <h2 id="intro">Introducción</h2>
    <p>Texto de introducción...</p>

    <h2 id="usage">Cómo usar</h2>
    <p>Descripción general del uso.</p>

    <h3 id="step1">Paso 1</h3>
    <p>Descripción del primer paso.</p>

    <h3 id="step2">Paso 2</h3>
    <p>Descripción del segundo paso.</p>

    <h2 id="summary">Conclusión</h2>
    <p>Resumen de los resultados.</p>
  </article>
</main>

CSS

#toc {
  background: #f9f9f9;
  border: 1px solid #ccc;
  padding: 1em;
  margin-bottom: 2em;
  max-width: 300px;
  font-family: sans-serif;
}
#toc h2 {
  font-size: 1.2em;
  margin-bottom: 0.5em;
}
#toc ul {
  list-style: none;
  padding-left: 1em;
}
#toc ul li {
  margin: 0.3em 0;
}
#toc ul ul {
  padding-left: 1em;
  font-size: 0.9em;
}
#toc a {
  color: #5a0000;
  text-decoration: none;
}

#toc {
  background: #f9f9f9;
  border: 1px solid #ccc;
  padding: 1em;
  margin-bottom: 2em;
  max-width: 300px;
  font-family: sans-serif;
}

#toc h2 {
  font-size: 1.2em;
  margin-bottom: 0.5em;
}

#toc ul {
  list-style: none;
  padding-left: 1em;
}

#toc ul li {
  margin: 0.3em 0;
}

#toc ul ul {
  padding-left: 1em;
  font-size: 0.9em;
}

#toc a {
  color: #5a0000;
  text-decoration: none;
}

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const toc = document.getElementById("toc");
  const headers = document.querySelectorAll("#article h2, #article h3");
  const tocList = document.createElement("ul");
  let currentH2Item = null;
  headers.forEach(header => {
    if (!header.id) {
      header.id = header.textContent.toLowerCase().replace(/\s+/g, '-');
    }
    const link = document.createElement("a");
    link.href = `#${header.id}`;
    link.textContent = header.textContent;
    const listItem = document.createElement("li");
    listItem.appendChild(link);
    if (header.tagName === "H2") {
      currentH2Item = listItem;
      tocList.appendChild(currentH2Item);
    } else if (header.tagName === "H3" && currentH2Item) {
      let subList = currentH2Item.querySelector("ul");
      if (!subList) {
        subList = document.createElement("ul");
        currentH2Item.appendChild(subList);
      }
      subList.appendChild(listItem);
    }
  });
  const tocTitle = document.createElement("h2");
  tocTitle.textContent = "Tabla de contenido";
  toc.appendChild(tocTitle);
  toc.appendChild(tocList);
});

document.addEventListener("DOMContentLoaded", () => {
  const toc = document.getElementById("toc");
  const headers = document.querySelectorAll("#article h2, #article h3");

  const tocList = document.createElement("ul");
  let currentH2Item = null;

  headers.forEach(header => {
    if (!header.id) {
      header.id = header.textContent.toLowerCase().replace(/\s+/g, '-');
    }

    const link = document.createElement("a");
    link.href = `#${header.id}`;
    link.textContent = header.textContent;

    const listItem = document.createElement("li");
    listItem.appendChild(link);

    if (header.tagName === "H2") {
      currentH2Item = listItem;
      tocList.appendChild(currentH2Item);
    } else if (header.tagName === "H3" && currentH2Item) {
      let subList = currentH2Item.querySelector("ul");
      if (!subList) {
        subList = document.createElement("ul");
        currentH2Item.appendChild(subList);
      }
      subList.appendChild(listItem);
    }
  });

  const tocTitle = document.createElement("h2");
  tocTitle.textContent = "Tabla de contenido";
  toc.appendChild(tocTitle);
  toc.appendChild(tocList);
});

Resultado:

Lee también: ¿Cómo Insertar CSS en HTML?: Todos los Métodos

• Encabezado oculto para semántica: Si necesitas mantener la estructura pero no mostrar el encabezado en la página, usa la clase .visually-hidden. Este texto será invisible visualmente, pero estará disponible para los motores de búsqueda y los lectores de pantalla.

HTML

<h1 class="visually-hidden">Manual de usuario</h1>

<h1 class="visually-hidden">Manual de usuario</h1>

CSS

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

• Verifica el código. Usa validator.w3.org para asegurarte de que la estructura HTML sea correcta: que no haya violaciones de anidamiento ni etiquetas de cierre omitidas.

FAQs sobre encabezado en HTML