Encabezado
Skip to main content
Careers Contact us

Encabezado

Biblioteca de componentes

Cómo utilizar este componente

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

El componente Encabezado proporciona una forma estructurada de introducir y etiquetar secciones de una página web, lo que mejora la legibilidad y la navegación.

Componente de YouTube

Vea la transcripción del vídeo del componente Encabezado.

Todos los encabezados

H1 Negro/900 48px/2.67 rem

Encabezamiento H2

H2 Negro/900 36px/1rem

Encabezamiento H2

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

Encabezado H3

H3 Negrita/700 32px/1.78rem

Encabezado H4

H4 Inter Bold/700 24px/1.3rem

Encabezado H5

H5 Negrita/700 20px/1.1 rem

Encabezado H6

H6 Negrita/700 18px/1rem

Prácticas recomendadas

Siga estas directrices para utilizar el componente Encabezado de forma eficaz. Estos consejos te ayudarán a garantizar que tus encabezados sean funcionales y accesibles.

  • Utilice los encabezados para organizar el contenido y proporcionar estructura a los lectores.
  • Asegúrese de que el título de la página sea el único H1 de la página.
  • Anídelos y ordénelos secuencialmente (por ejemplo, H2 seguido de H3).
  • Use mayúsculas y minúsculas para los encabezados.
  • No utilices encabezados para modificar el tamaño de la fuente o el estilo visual.
  • Evite saltarse los niveles de encabezado (por ejemplo, de H2 a H4).
  • No utilice más de un H1 en una sola página.

Ejemplos

Mal ejemplo:
  1. Use mayúsculas y minúsculas, en lugar de mayúsculas y minúsculas. 
  2. Siga la jerarquía adecuada, los encabezados deben ordenarse secuencialmente.
  3. No use todas las mayúsculas.
  4. Es probable que este encabezado sea un H2, ya que está al mismo nivel que los tipos de fruta.

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

Accesibilidad

Mantenga un tamaño de fuente adecuado para la legibilidad, especialmente en pantallas más pequeñas y para usuarios con discapacidad visual.

Siga las pautas de WCAG 2.1 para el tamaño y el espaciado del texto.

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 obtener más detalles.

  • Los encabezados no deben aplicarse para modificar el tamaño de la fuente o el estilo visual.
  • Los encabezados se pueden anidar y deben ordenarse secuencialmente (no salte de H2 a H4).
  • El título de la página debe ser el único H1 de la página. 

Lista de verificación del coordinador web

  • Aplique la jerarquía adecuada: siga el orden secuencial (H1 a H6) sin saltarse niveles.
  • Asignar ID: En el caso de los enlaces de anclaje, asigne ID a los encabezados.
  • Limitar el uso de H1: Solo se debe usar un H1 por página.
  • Estilo coherente: utilice mayúsculas y minúsculas y mantenga márgenes inferiores coherentes para los espacios en blanco.
  • Comprueba la accesibilidad: Asegúrate de que el tamaño y el espaciado de las fuentes cumplan con las directrices de las WCAG 2.1.
  • Siga las mejores prácticas de la Guía de estilo de escritura web.

Cuándo usarlo

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