Dominar el uso del encabezado HTML es un paso fundamental para cualquier persona que trabaje con desarrollo web o contenidos digitales. No se trata solo de crear títulos grandes y en negrita; es la base para dar estructura, jerarquía y significado a tus páginas, mejorando tanto la experiencia del usuario como tu posicionamiento en buscadores.

A menudo surge una confusión inicial con el término. Para aclararlo desde el principio, en HTML existen dos tipos de “encabezados”:

  • Encabezado de Sección (<header>): Es una etiqueta estructural. Piensa en ella como un contenedor para la parte superior de una web, donde van el logo, el menú de navegación, etc.
  • Encabezado de Texto (<h1> – <h6>): Estas son las etiquetas de encabezado de las que hablaremos. Se usan para crear títulos y subtítulos y organizar el contenido en un esquema lógico.

¿Qué es un Encabezado HTML y por qué es Importante?

Un encabezado HTML, representado por las etiquetas <h1> a <h6> (del inglés heading), es un título que introduce una nueva sección de contenido. El número en la etiqueta define su nivel en la jerarquía del documento:

  • <h1>: Es el encabezado de nivel más alto, el título principal.
  • <h6>: Es el encabezado de menor importancia.

Estas etiquetas le comunican a los navegadores y a los motores de búsqueda como Google la estructura de tu contenido. Piensa en ellas como el índice de un libro: el <h1> es el título del libro, los <h2> son los capítulos, y los <h3> son las subsecciones dentro de cada capítulo.

Código de ejemplo que muestra una Estructura Encabezado HTML jerárquica para mejorar el SEO y la accesibilidad web.
Así se ve una Estructura Encabezado en HTML bien organizada en el código. La jerarquía es clave para el SEO y la legibilidad del contenido.

La Jerarquía es Clave: Nunca te Saltes Niveles

El propósito más importante de los títulos HTML es crear una estructura lógica y predecible. Por esta razón, la regla de oro es nunca saltarse niveles jerárquicos.

Debes empezar siempre con un <h1> y continuar hacia abajo de forma ordenada (<h2>, luego <h3>, etc.). Omitir un nivel rompe el esquema y puede confundir tanto a los motores de búsqueda como a las tecnologías de asistencia.

Ejemplo 1: Estructura de un proyecto

<h1>Cómo construir una sauna</h1>
    <h2>1. Elegir los cimientos</h2>
        <h3>Tipos de cimientos</h3>
            <h4>1.1. Cimientos de tira</h4>
                <h5>Características de los cimientos de tira</h5>
    <h2>2. Levantar las paredes</h2>
        <h3>Materiales recomendados</h3>

Ejemplo 2: Estructura de un artículo de blog

<h1>Recetas con Trigo Sarraceno</h1>
    <h2>Recetas en Olla de Cocción Lenta</h2>
        <h3>Trigo Sarraceno con Pollo y Verduras</h3>
    <h2>Recetas al Horno</h2>
        <h3>Pastel de Trigo Sarraceno con Carne</h3>
Ejemplo visual de los niveles de encabezados HTML, mostrando el código y el resultado para una correcta jerarquía web.
Este ejemplo de niveles de encabezados HTML muestra cómo el código se traduce en una estructura visual clara y jerárquica.

Referencia adicional: Elementos títulos HTML

Buenas Prácticas para SEO y Legibilidad

Para sacar el máximo provecho al encabezado en HTML, sigue estas recomendaciones clave:

  • Utiliza un único <h1> por página: Aunque técnicamente es posible usar más de uno, la mejor práctica para el SEO es tener un solo <h1>. Este debe actuar como el título principal y describir de forma clara y concisa el contenido de la página.
  • No uses encabezados para estilizar: La función de estas etiquetas es semántica (dar significado), no visual. Si quieres que un texto sea grande o esté en negrita por motivos de diseño, utiliza CSS en su lugar.
  • Incluye palabras clave: Asegúrate de que tus encabezados, especialmente el <h1> y los <h2>, incluyan las palabras clave principales de tu contenido de forma natural.

Referencia: Encabezados HTML SEO y SERP.

La Importancia Crítica en la Accesibilidad Web

Un uso correcto de la jerarquía de encabezados es vital para la accesibilidad. Los usuarios con discapacidad visual dependen de lectores de pantalla para navegar por la web. Estos programas les permiten saltar entre encabezados para escanear el contenido y entender su estructura rápidamente.

Si la estructura es ilógica o faltan niveles, la experiencia de navegación se vuelve frustrante y confusa, impidiendo que el usuario acceda a la información.

Información Técnica: Estilos CSS por Defecto

¿Te has preguntado por qué <h1> se ve más grande que <h2> sin que escribas una sola línea de CSS? Los navegadores aplican estilos por defecto a cada encabezado HTML.

Aunque siempre debes usar CSS para personalizar el diseño, es útil conocer estos valores base:

  • Todos los encabezados (h1 a h6) tienen display: block; y font-weight: bold;.
  • h1: font-size: 2em; (el doble del tamaño base del texto).
  • h2: font-size: 1.5em;
  • h3: font-size: 1.17em;
  • h4: font-size: 1em; (el mismo tamaño que el texto normal, pero en negrita).
  • h5: font-size: 0.83em;
  • h6: font-size: 0.67em;

Conclusión: El Encabezado HTML como Pilar de tu Contenido

En resumen, el encabezado en HTML es mucho más que un simple título. Es una herramienta indispensable para organizar tu contenido, guiar al lector, mejorar la accesibilidad y, fundamentalmente, comunicarle a los motores de búsqueda de qué trata tu página. Al respetar su jerarquía y aplicar estas buenas prácticas, estarás construyendo una base sólida para un contenido exitoso y bien posicionado.

Categorizado en:

HTML,