Encabezados HTML : de a
Los elementos <h1> – <h6> son la columna vertebral de la estructuración semántica de cualquier página web. En este artículo descubrirás su jerarquía, cuándo y cómo usarlos, ejemplos prácticos, buenas prácticas de SEO y accesibilidad, y una comparativa visual con otras técnicas de organización de contenido.
1️⃣ Jerarquía y significado semántico
Los encabezados forman un árbol lógico:
<h1>– título principal de la página (máximo 1 por documento).<h2>– secciones de nivel 1.<h3>– sub‑secciones dentro de un<h2>.- … hasta
<h6>, que representa el nivel más profundo.
Los motores de búsqueda y lectores de pantalla utilizan esta jerarquía para comprender la estructura del contenido.
2️⃣ Ejemplos básicos en HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de encabezados</title>
</head>
<body>
<h1>Título principal de la página</h1>
<h2>Sección 1</h2>
<h3>Sub‑sección 1.1</h3>
<h4>Detalle 1.1.1</h4>
<h5>Nota 1.1.1.1</h5>
<h6>Referencia final</h6>
</body>
</html>Observa cómo el número de h disminuye a medida que el texto se vuelve menos importante.
3️⃣ Comparativa visual: encabezados vs. tarjetas de Bootstrap
Encabezados (jerarquía)
<h1>– Título principal<h2>– Sección principal<h3>– Sub‑sección<h4>– Detalle<h5>– Nota<h6>– Referencia
Tarjetas Bootstrap (presentación visual)
Card title
Contenido estructurado mediante tarjetas.
Subtitle
Uso típico para bloques de información.
Las tarjetas son útiles para el diseño visual, pero no sustituyen la semántica de los encabezados.
4️⃣ SEO y accesibilidad
4.1 SEO
- Incluye la palabra clave principal en
<h1>. - No repitas
<h1>en la misma página; usa<h2>para subsecciones. - Los
<h2>-<h4>deben contener sinónimos o términos relacionados para reforzar la topical relevance.
4.2 Accesibilidad (WCAG 2.1)
- Los lectores de pantalla anuncian cada nivel de encabezado, facilitando la navegación.
- Evita saltos de nivel (p.ej., pasar de
<h2>a<h4>sin<h3>). - Usa atributos
role="heading"yaria-levelsolo cuando el elemento no sea unhnativo.
5️⃣ Buenas prácticas y trucos
- Un solo
<h1>por página: garantiza que el motor de búsqueda entienda cuál es el tema principal. - Consistencia visual con CSS: puedes estilizar
h2, h3, …sin perder semántica.h2 {font-size: 2rem; margin-top: 1.5rem;} h3 {font-size: 1.75rem; margin-top: 1.25rem;} - Uso de
sectionyarticlepara agrupar encabezados y crear bloques lógicos. - Generación dinámica en frameworks (React, Vue, Angular) – mantén la jerarquía al renderizar componentes.
function PageTitle({title}) { return <h1>{title}</h1>; } function Section({title, children}) { return ( <> <h2>{title}</h2> {children} </> ); }
6️⃣ Solución de problemas comunes
| Problema | Causa frecuente | Solución recomendada |
|---|---|---|
Multiples <h1> en la misma página |
Plantillas reutilizadas sin control | Reemplaza los extras por <h2> o usa componentes con slot para encabezado. |
Saltos de nivel (p.ej., <h2> → <h4>) |
Olvido de encabezado intermedio | Inserta <h3> vacío o reestructura el contenido. |
| CSS que oculta visualmente un encabezado pero lo deja en el DOM | Uso de display:none para “limpiar” diseño |
Utiliza visually-hidden de Bootstrap (clase .sr-only) para accesibilidad. |
7️⃣ Resumen rápido
- Un
<h1>por página → tema principal. - Usa
<h2>‑<h6>de forma descendente y lógica. - Aplica estilos con CSS, no con
<font>ni atributos de presentación. - Optimiza para SEO y WCAG: palabras clave en
<h1>, estructura coherente. - Combina con componentes Bootstrap para diseño visual sin sacrificar semántica.
Guía completa de los encabezados HTML : de <h1> a <h6> con ejemplos y buenas prácticas