HTML

Tutorial HTML: Encabezados (h1-h6)

Aprende la jerarquía, uso semántico y buenas prácticas de los encabezados HTML h1 a h6 para mejorar accesibilidad y SEO.

Jerarquía y propósito de los encabezados HTML

Los encabezados en HTML son elementos fundamentales que proporcionan estructura y organización al contenido de una página web. Funcionan como títulos y subtítulos que dividen la información en secciones lógicas, facilitando la navegación y comprensión del contenido.

HTML ofrece seis niveles de encabezados, desde <h1> hasta <h6>, formando una jerarquía clara donde el <h1> representa el título principal con mayor importancia, y cada nivel subsiguiente (<h2>, <h3>, etc.) representa subtítulos de importancia decreciente.

Estructura jerárquica

La jerarquía de encabezados funciona como un esquema o índice del documento:

<h1>Título principal del documento</h1>
  <h2>Sección importante</h2>
    <h3>Subsección</h3>
    <h3>Otra subsección</h3>
  <h2>Otra sección importante</h2>
    <h3>Subsección</h3>
      <h4>Detalle de la subsección</h4>
      <h4>Otro detalle</h4>

Esta estructura jerárquica no es solo visual, sino que define la relación semántica entre las diferentes secciones del contenido. Cada nivel de encabezado establece un nuevo contexto dentro del nivel superior.

Propósito de los encabezados

Los encabezados en HTML cumplen varios propósitos esenciales:

Organización del contenido: Dividen la información en secciones lógicas y relacionadas, mejorando la legibilidad.
Jerarquía de información: Establecen la importancia relativa de cada sección dentro del documento.
Navegación estructural: Permiten a los usuarios comprender rápidamente la estructura del documento y encontrar la información que buscan.
Representación visual: Los navegadores aplican automáticamente estilos que reflejan la importancia de cada nivel (tamaño de fuente, negrita, espaciado).

Características de cada nivel

Cada nivel de encabezado tiene un propósito específico dentro de la jerarquía del documento:

<h1>: Representa el título principal de la página. Debe ser único en el documento y describir el propósito o tema general.

<h1>Guía completa de fotografía digital</h1>

<h2>: Define las secciones principales dentro del documento. Divide el contenido en bloques temáticos importantes.

<h2>Fundamentos de la exposición</h2>
<h2>Composición fotográfica</h2>

<h3> a <h6>: Representan niveles progresivamente más específicos de subtítulos dentro de cada sección.

<h3>Velocidad de obturación</h3>
<h4>Efectos creativos con velocidades lentas</h4>

Visualización predeterminada

Los navegadores aplican estilos predeterminados a los encabezados que reflejan su jerarquía:

El <h1> se muestra con el tamaño de fuente más grande
Cada nivel subsiguiente se muestra progresivamente más pequeño
Todos los encabezados aparecen en negrita por defecto
Incluyen márgenes para separarlos del contenido circundante

Esta representación visual ayuda a los usuarios a identificar rápidamente la estructura del documento, aunque estos estilos pueden modificarse mediante CSS.

Buenas prácticas

Para aprovechar al máximo los encabezados HTML:

Usa un solo <h1> por página, que represente el tema principal del documento.
Mantén la jerarquía lógica: No saltes niveles (por ejemplo, de <h2> a <h4> sin usar <h3>).

<!-- Correcto -->
<h2>Sección principal</h2>
<h3>Subsección</h3>
<h4>Detalle</h4>

<!-- Incorrecto -->
<h2>Sección principal</h2>
<h4>Detalle</h4> <!-- Falta el nivel h3 -->

Utiliza encabezados para estructura, no solo para efectos visuales. Si necesitas texto grande o en negrita sin valor estructural, usa CSS en lugar de elementos de encabezado.
Sé descriptivo pero conciso en el texto de los encabezados. Deben comunicar claramente el contenido de la sección.

Ejemplo práctico

Veamos cómo se implementaría una estructura de encabezados en una página sobre recetas de cocina:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Deliciosa Lasaña Casera</title>
</head>
<body>
    <h1>Deliciosa Lasaña Casera</h1>
    
    <h2>Ingredientes</h2>
    <h3>Para la salsa de carne</h3>
    <!-- Lista de ingredientes para la salsa -->
    
    <h3>Para la salsa blanca</h3>
    <!-- Lista de ingredientes para la salsa blanca -->
    
    <h3>Para el montaje</h3>
    <!-- Lista de ingredientes para el montaje -->
    
    <h2>Preparación</h2>
    <h3>Salsa de carne</h3>
    <!-- Pasos para preparar la salsa de carne -->
    
    <h3>Salsa blanca</h3>
    <!-- Pasos para preparar la salsa blanca -->
    
    <h3>Montaje y horneado</h3>
    <!-- Pasos para el montaje y horneado -->
    
    <h2>Consejos de presentación</h2>
    <!-- Consejos para servir el plato -->
    
    <h2>Variaciones</h2>
    <h3>Versión vegetariana</h3>
    <!-- Detalles sobre la versión vegetariana -->
    
    <h3>Versión sin gluten</h3>
    <!-- Detalles sobre la versión sin gluten -->
</body>
</html>

En este ejemplo, la estructura de encabezados crea una organización clara y lógica de la receta, permitiendo a los usuarios navegar fácilmente entre las diferentes secciones y comprender la relación entre ellas.

Diferencias visuales

Para ilustrar cómo se ven los diferentes niveles de encabezados en un navegador (sin CSS personalizado), aquí está la representación típica:

<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>
<h4>Encabezado de nivel 4</h4>
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>

Cada nivel es progresivamente más pequeño, reflejando visualmente la jerarquía de la información y ayudando a los usuarios a entender la estructura del documento a simple vista.

Uso semántico correcto de h1 hasta h6

El uso semántico de los encabezados HTML va más allá de simplemente estructurar visualmente una página. Implica utilizar cada nivel de encabezado de manera que refleje correctamente la relación jerárquica del contenido, siguiendo principios que mejoran tanto la experiencia del usuario como la interpretación por parte de las máquinas.

Principios del uso semántico de encabezados

Para implementar correctamente los encabezados desde una perspectiva semántica, debemos seguir estos principios fundamentales:

Secuencia lógica: Los encabezados deben seguir una progresión ordenada sin saltar niveles.

<!-- Correcto -->
<h1>Título principal</h1>
<h2>Sección importante</h2>
<h3>Subsección</h3>

<!-- Incorrecto -->
<h1>Título principal</h1>
<h3>Subsección</h3> <!-- Se saltó el nivel h2 -->

Contenido relevante: El texto de cada encabezado debe describir con precisión el contenido de su sección.

<!-- Correcto -->
<h2>Métodos de pago aceptados</h2>

<!-- Incorrecto (demasiado genérico) -->
<h2>Información</h2>

Independencia del estilo: La elección del nivel de encabezado debe basarse en su posición jerárquica, no en cómo queremos que se vea.

<!-- Incorrecto: usar h3 solo porque se quiere un texto más pequeño -->
<h3>Título principal de la página</h3> <!-- Debería ser h1 -->

Patrones de uso semántico por nivel

Cada nivel de encabezado tiene un propósito semántico específico:

<h1>: Identifica el tema principal de la página. Debe responder a la pregunta "¿De qué trata esta página?".

<h1>Política de privacidad</h1>

<h2>: Define las secciones principales que dividen el tema central en subtemas importantes.

<h1>Guía de viaje: Barcelona</h1>
<h2>Lugares de interés</h2>
<h2>Gastronomía local</h2>
<h2>Transporte público</h2>

<h3>: Subdivide las secciones <h2> en componentes más específicos.

<h2>Lugares de interés</h2>
<h3>La Sagrada Familia</h3>
<h3>Parque Güell</h3>
<h3>Barrio Gótico</h3>

<h4>, <h5>, <h6>: Representan niveles cada vez más detallados de información dentro de sus secciones superiores.

<h3>La Sagrada Familia</h3>
<h4>Historia de la construcción</h4>
<h5>Etapa inicial (1882-1926)</h5>
<h5>Etapa moderna (1926-presente)</h5>
<h4>Información para visitantes</h4>

Implementación en diferentes contextos

El uso semántico varía según el tipo de contenido:

Artículos o blogs:

<article>
    <h1>Beneficios del ejercicio regular</h1>
    <h2>Mejoras cardiovasculares</h2>
    <p>El ejercicio regular fortalece el corazón...</p>
    <h2>Salud mental</h2>
    <p>La actividad física libera endorfinas...</p>
</article>

Páginas de documentación:

<h1>Documentación de la API</h1>
<h2>Autenticación</h2>
<h3>Obtener token</h3>
<h3>Renovar credenciales</h3>
<h2>Endpoints disponibles</h2>
<h3>Usuarios</h3>
<h4>Crear usuario</h4>
<h4>Actualizar usuario</h4>

Páginas de producto:

<h1>Cámara Digital EOS 2000D</h1>
<h2>Características principales</h2>
<h2>Especificaciones técnicas</h2>
<h3>Sensor</h3>
<h3>Conectividad</h3>
<h2>Accesorios compatibles</h2>

Errores comunes a evitar

Al implementar encabezados, es importante evitar estos errores frecuentes:

Usar encabezados solo por su apariencia visual:

<!-- Incorrecto -->
<h4>TÍTULO PRINCIPAL DE LA PÁGINA</h4> <!-- Se eligió h4 solo porque se quería un tamaño específico -->

Repetir el mismo nivel de encabezado consecutivamente sin estructura lógica:

<!-- Incorrecto -->
<h1>Nuestra empresa</h1>
<h2>Productos</h2>
<h2>Servicio 1</h2>
<h2>Servicio 2</h2>
<h2>Servicio 3</h2>
<!-- Mejor estructura: -->
<h1>Nuestra empresa</h1>
<h2>Productos</h2>
<h2>Servicios</h2>
<h3>Servicio 1</h3>
<h3>Servicio 2</h3>
<h3>Servicio 3</h3>

Usar múltiples <h1> en una misma página:

<!-- Incorrecto -->
<h1>Bienvenidos a nuestra tienda</h1>
<!-- Contenido -->
<h1>Productos destacados</h1> <!-- Debería ser h2 -->

Ejemplo de estructura semántica completa

Veamos un ejemplo de una estructura semántica correcta para una página de blog:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>El impacto del cambio climático</title>
</head>
<body>
    <header>
        <h1>El impacto del cambio climático en los ecosistemas marinos</h1>
        <p>Publicado el 15 de mayo de 2023 por Dra. Marina López</p>
    </header>
    
    <main>
        <h2>Introducción al problema</h2>
        <p>Los océanos absorben aproximadamente el 30% del CO2 producido...</p>
        
        <h2>Efectos en los arrecifes de coral</h2>
        <p>Los arrecifes de coral son especialmente vulnerables...</p>
        
        <h3>Blanqueamiento de coral</h3>
        <p>El aumento de la temperatura del agua provoca...</p>
        
        <h3>Acidificación oceánica</h3>
        <p>La absorción de CO2 está cambiando la química del agua...</p>
        
        <h4>Impacto en la calcificación</h4>
        <p>Los organismos que construyen estructuras de carbonato de calcio...</p>
        
        <h2>Consecuencias para la biodiversidad</h2>
        <p>La pérdida de hábitats marinos está provocando...</p>
        
        <h3>Especies en peligro</h3>
        <p>Numerosas especies dependen directamente de los arrecifes...</p>
        
        <h2>Estrategias de mitigación</h2>
        <p>Los científicos están desarrollando varias aproximaciones...</p>
    </main>
    
    <aside>
        <h2>Sobre la autora</h2>
        <p>La Dra. Marina López es oceanógrafa y especialista en...</p>
        
        <h2>Artículos relacionados</h2>
        <ul>
            <li><a href="#">Acidificación oceánica: causas y efectos</a></li>
            <li><a href="#">Tecnologías para la restauración de arrecifes</a></li>
        </ul>
    </aside>
</body>
</html>

En este ejemplo, la estructura de encabezados crea una jerarquía clara que refleja la organización lógica del contenido, facilitando tanto la lectura humana como la interpretación por parte de tecnologías asistivas y motores de búsqueda.

Herramientas para verificar la estructura semántica

Para asegurar que estamos utilizando los encabezados correctamente, podemos utilizar:

Validadores de HTML: Verifican la sintaxis correcta del código.
Extensiones de navegador: Muestran el esquema de encabezados de una página.
Herramientas de auditoría de accesibilidad: Identifican problemas en la jerarquía de encabezados.

<!-- Estructura que pasaría una validación semántica -->
<h1>Título principal</h1>
<h2>Primera sección importante</h2>
<h3>Subsección</h3>
<h3>Otra subsección</h3>
<h2>Segunda sección importante</h2>

El uso semántico correcto de los encabezados HTML no solo mejora la estructura de nuestro documento, sino que también contribuye significativamente a la accesibilidad, usabilidad y optimización para motores de búsqueda de nuestras páginas web.

Encabezados e impacto en accesibilidad y SEO

Los encabezados HTML (<h1> a <h6>) juegan un papel crucial más allá de la simple organización visual del contenido. Su implementación adecuada tiene un impacto directo y significativo tanto en la accesibilidad web como en el posicionamiento en buscadores (SEO).

Impacto en la accesibilidad

Los usuarios con discapacidades visuales que utilizan lectores de pantalla dependen fundamentalmente de la estructura de encabezados para navegar por las páginas web de manera eficiente:

Los lectores de pantalla permiten saltar entre encabezados para explorar rápidamente el contenido sin tener que escuchar toda la página secuencialmente.

<!-- Estructura que facilita la navegación con lectores de pantalla -->
<h1>Guía de viajes: Italia</h1>
<h2>Ciudades principales</h2>
<h3>Roma</h3>
<h3>Florencia</h3>
<h3>Venecia</h3>
<h2>Gastronomía</h2>
<h2>Mejor época para viajar</h2>

La mayoría de lectores de pantalla ofrecen atajos de teclado para navegar entre encabezados del mismo nivel (por ejemplo, moverse entre todos los <h2>) o generar un índice de contenidos basado en la estructura de encabezados.
Una jerarquía incorrecta de encabezados puede desorientar completamente a los usuarios de tecnologías asistivas:

<!-- Estructura problemática para la accesibilidad -->
<h1>Título principal</h1>
<h4>Sección importante</h4> <!-- Salto incorrecto de niveles -->
<h2>Otra sección</h2> <!-- Inconsistencia en la jerarquía -->

Técnicas de accesibilidad con encabezados

Para maximizar la accesibilidad mediante encabezados:

Estructura lógica: Mantén una progresión ordenada que refleje la relación jerárquica real del contenido.
Descriptivos y concisos: Los encabezados deben comunicar claramente el contenido de cada sección en pocas palabras.

<!-- Encabezado descriptivo -->
<h2>Métodos de pago disponibles</h2>

<!-- Encabezado poco descriptivo -->
<h2>Información</h2>

Evita encabezados vacíos: Cada encabezado debe contener texto descriptivo, no solo imágenes sin texto alternativo.

<!-- Incorrecto -->
<h2><img src="icon.png"></h2>

<!-- Correcto -->
<h2><img src="icon.png" alt="Métodos de pago"> Métodos de pago</h2>

Prueba con lectores de pantalla: Verifica cómo se comporta tu estructura de encabezados con tecnologías asistivas reales.

Encabezados y SEO

Los motores de búsqueda otorgan especial importancia a los encabezados para comprender la estructura y relevancia del contenido:

El <h1> es considerado uno de los factores más importantes para determinar el tema principal de la página. Los motores de búsqueda le dan mayor peso que a otros elementos.
Los encabezados secundarios (<h2> a <h6>) ayudan a los buscadores a identificar subtemas y establecer relaciones semánticas dentro del contenido.
Las palabras clave colocadas estratégicamente en los encabezados tienen mayor impacto en el posicionamiento que las mismas palabras en párrafos normales.

<!-- Optimizado para SEO -->
<h1>Reparación de bicicletas en Madrid: Servicios profesionales</h1>
<h2>Tipos de reparaciones de bicicletas que ofrecemos</h2>
<h3>Reparación de frenos y transmisiones</h3>
<h3>Ajuste y mantenimiento de suspensiones</h3>
<h2>Zonas de Madrid donde ofrecemos servicio a domicilio</h2>

Estrategias de optimización SEO con encabezados

Para aprovechar el potencial SEO de los encabezados:

Incluye palabras clave primarias en el <h1>, asegurándote de que sea natural y descriptivo.
Distribuye palabras clave secundarias en los encabezados de nivel inferior, manteniendo la relevancia temática.
Evita el keyword stuffing (sobrecarga de palabras clave), que puede ser penalizado por los buscadores.

<!-- Incorrecto: keyword stuffing -->
<h2>Reparación bicicletas Madrid reparar bicicleta Madrid arreglo bicicletas</h2>

<!-- Correcto -->
<h2>Servicio de reparación de bicicletas a domicilio en Madrid</h2>

Mantén coherencia entre el título de la página (<title>), el encabezado principal (<h1>) y el contenido.
Usa encabezados para estructurar artículos largos, lo que mejora tanto la experiencia de usuario como las señales para los buscadores.

Herramientas para evaluar encabezados

Existen diversas herramientas que pueden ayudarte a evaluar y mejorar el uso de encabezados:

Extensiones de navegador como "HeadingsMap" o "WAVE" que muestran la estructura jerárquica de encabezados.
Herramientas de auditoría SEO como Screaming Frog, SEMrush o Ahrefs, que analizan la estructura de encabezados y sugieren mejoras.
Validadores de accesibilidad como WAVE o axe, que identifican problemas en la jerarquía de encabezados.

Caso práctico: Mejorando accesibilidad y SEO simultáneamente

Veamos un ejemplo de transformación de una estructura deficiente a una optimizada:

Estructura original (problemática):

<div class="main-title">Cursos de fotografía digital en Barcelona</div>
<div class="subtitle">Nuestros cursos</div>
<p><strong>Curso básico de fotografía</strong></p>
<div class="subtitle">Horarios disponibles</div>
<div class="subtitle">Precios y descuentos</div>
<p><strong>Curso avanzado</strong></p>

Estructura mejorada (optimizada para accesibilidad y SEO):

<h1>Cursos de fotografía digital en Barcelona</h1>
<h2>Nuestros cursos</h2>
    <h3>Curso básico de fotografía</h3>
    <p>Aprende los fundamentos de la fotografía digital con nuestro curso para principiantes...</p>
    <h3>Curso avanzado de fotografía</h3>
    <p>Perfecciona tus habilidades y domina técnicas profesionales...</p>
<h2>Horarios disponibles</h2>
    <p>Ofrecemos diferentes horarios para adaptarnos a tus necesidades...</p>
<h2>Precios y descuentos</h2>
    <p>Consulta nuestras tarifas competitivas y programas de descuento...</p>

Esta estructura mejorada:

Facilita la navegación para usuarios de lectores de pantalla
Comunica claramente la jerarquía de la información
Incorpora palabras clave relevantes en posiciones estratégicas
Mejora la indexación por parte de los motores de búsqueda

Equilibrio entre accesibilidad y SEO

Afortunadamente, las prácticas que benefician la accesibilidad suelen coincidir con las que favorecen el SEO:

Una estructura clara y lógica mejora tanto la experiencia de usuarios con discapacidades como la comprensión por parte de los buscadores.
Los encabezados descriptivos ayudan a los usuarios de lectores de pantalla y también proporcionan contexto semántico a los algoritmos de búsqueda.
La jerarquía coherente facilita la navegación para todos los usuarios y permite a los buscadores establecer relaciones temáticas precisas.

Errores comunes que afectan tanto a la accesibilidad como al SEO

Usar encabezados para efectos visuales en lugar de para estructura semántica.

<!-- Incorrecto: usar h3 solo por su tamaño -->
<h3>AVISO IMPORTANTE</h3> <!-- No forma parte de la jerarquía lógica -->

Saltar niveles de encabezados sin seguir una progresión lógica.
Duplicar el <h1> en una misma página, lo que confunde tanto a usuarios de lectores de pantalla como a los motores de búsqueda sobre el tema principal.
Encabezados genéricos que no aportan valor informativo ni para usuarios ni para buscadores.

<!-- Poco útil para accesibilidad y SEO -->
<h2>Más información</h2>

<!-- Mejor -->
<h2>Especificaciones técnicas del producto</h2>

La implementación adecuada de encabezados HTML representa uno de los casos más claros donde la optimización para motores de búsqueda y la mejora de la accesibilidad van de la mano, beneficiando a todos los usuarios y mejorando el rendimiento general del sitio web.

Aprende HTML online

Otros ejercicios de programación de HTML

Evalúa tus conocimientos de esta lección Encabezados (h1-h6) con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.

Aprende la jerarquía, uso semántico y buenas prácticas de los encabezados HTML h1 a h6 para mejorar accesibilidad y SEO.

Jerarquía y propósito de los encabezados HTML

Estructura jerárquica

Propósito de los encabezados

Características de cada nivel

Visualización predeterminada

Buenas prácticas

Ejemplo práctico

Diferencias visuales

Uso semántico correcto de h1 hasta h6

Principios del uso semántico de encabezados

Patrones de uso semántico por nivel

Implementación en diferentes contextos

Errores comunes a evitar

Ejemplo de estructura semántica completa

Herramientas para verificar la estructura semántica

Encabezados e impacto en accesibilidad y SEO

Impacto en la accesibilidad

Técnicas de accesibilidad con encabezados

Encabezados y SEO

Estrategias de optimización SEO con encabezados

Herramientas para evaluar encabezados

Caso práctico: Mejorando accesibilidad y SEO simultáneamente

Equilibrio entre accesibilidad y SEO

Errores comunes que afectan tanto a la accesibilidad como al SEO

Otros ejercicios de programación de HTML

Todas las lecciones de HTML

Introducción Y Entorno

Sintaxis Y Estructura

Sintaxis Y Estructura

Sintaxis Y Estructura

Sintaxis Y Estructura

Sintaxis Y Estructura

Textos Y Enlaces

Textos Y Enlaces

Textos Y Enlaces

Textos Y Enlaces

Textos Y Enlaces

Organización De Contenido

Organización De Contenido

Organización De Contenido

Organización De Contenido

Elementos Multimedia

Elementos Multimedia

Elementos Multimedia

Elementos Multimedia

Metadatos Y Seo

Metadatos Y Seo

Metadatos Y Seo

Metadatos Y Seo

Optimización Html

Optimización Html

Optimización Html

Optimización Html

Objetivos de aprendizaje de esta lección