Encabezado
Skip to main content
Careers Contact us

Encabezado

Biblioteca de componentes

Cómo usar este componente

Utiliza el componente de Encabezado para organizar y estructurar el contenido de la página web. Debe seleccionarse para los títulos de página, encabezados de sección o subtítulos para crear una jerarquía de contenido clara.

El componente Encabezado proporciona una forma estructurada de presentar y etiquetar secciones de una página web, mejorando la legibilidad y la navegación.

Componente de YouTube

Ver transcripción del vídeo del componente de rumbo.

Todos los encabezados

H1 Black/900 48px/2.67 rem

Rumbo H2

1 Rumbo H2

H2 Black/900 36px/1rem

Rumbo H2

1 Rumbo H2

H2 con borde (el borde es 8px, azul primario 70)

Dirección H3

1 Dirección H3

H3 Bold/700 32px/1.78rem

Dirección H4

1 Dirección H4

H4 Inter Bold/700 24px/1.3rem

Rumbo H5
1 Rumbo H5

H5 Bold/700 20px/1.1 rem

Rumbo H6
1 Rumbo H6

H6 Bold/700 18px/1rem

Mejores prácticas

Sigue estas pautas para usar eficazmente el componente de Encabezado. Estos consejos ayudarán a garantizar que tus cabeceras sean funcionales y accesibles.

  • Utiliza encabezados para organizar el contenido y proporcionar estructura a los lectores.
  • Asegúrate de que el título de la página sea el único H1 en la página.
  • Encabezamientos de anido y ordenarlos secuencialmente (por ejemplo, H2 seguido de H3).
  • Usa el caso de frase para los títulos.
  • No uses encabezados para modificar el tamaño de la fuente o el estilo visual.
  • Evita saltar niveles de rumbo (por ejemplo, de H2 a H4).
  • No uses más de un H1 en una sola página.

Ejemplos

Mal ejemplo:
  1. Usa caso de frase en lugar de Título Majúscula.
  2. Sigue la jerarquía adecuada, los encabezados deben ordenarse secuencialmente.
  3. No uses solo mayúsculas.
  4. Este encabezado probablemente debería ser un H2, ya que está al mismo nivel que los tipos de frutas.

Buen ejemplo: Sigue la jerarquía adecuada y las directrices de buenas prácticas.

Accesibilidad

Los encabezados deben usarse para organizar el contenido y proporcionar estructura a los lectores. Consulte el artículo del W3C sobre Encabezados y Etiquetas para más detalles.

  • No se deben aplicar encabezados para modificar el tamaño de la fuente o el estilo visual.
  • Los encabezados deben ordenarse secuencialmente, sin que se omitan niveles de encabezado. Por ejemplo, no pongas un nivel de encabezado en H2 y luego pongas el siguiente nivel de encabezado en la página en H4.
  • El título de la página debería ser el único H1 en la página.
  • El texto del encabezado debe ser único y descriptivo del contenido de esa sección.
  • Sigue las directrices WCAG 2.1 para el espaciado de texto.

Lista de verificación para Coordinador Web

  • Aplicar la jerarquía adecuada: Seguir el orden secuencial (H1 a H6) sin saltar niveles.
  • Asignar IDs: Para enlaces ancla, asigna IDs a los encabezados.
  • Límite de uso de H1: Solo se debe usar un H1 por página.
  • Estilo consistente: Usa el caso de la frase y mantén los márgenes inferiores consistentes para los espacios en blanco.
  • Comprueba la accesibilidad: Asegúrate de que el tamaño y el espaciado de la fuente cumplen con las directrices WCAG 2.1.
  • Sigue las mejores prácticas de la Guía de Estilo de Escritura Web.
  • Si marcas "Incluir etiqueta numérica" para el encabezado, incluye un número entero en el campo de texto Número.
    • El texto numérico debe ser números enteros (1, 2, 3, etc.) — no pueden ser letras ni valores decimales.
    • Los valores numéricos deben aplicarse manualmente, así que asegurarse de que la numeración sea secuencial y en orden lógico.

Cuándo utilizarlo

Utiliza el componente de Encabezado para organizar y estructurar el contenido de la página web. Debe seleccionarse para los títulos de página, encabezados de sección o subtítulos para crear una jerarquía de contenido clara.