Encabezado
Biblioteca de componentes
Cómo usar este componente
Utilice el componente Encabezado para organizar y estructurar el contenido de la página web. Debe seleccionarse para títulos de página, títulos de sección o 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, mejorando la legibilidad y la navegación.
Todos los epígrafes
H1 Negro/900 48px/2.67 rem
Encabezado H2
H2 Negro/900 36px/1rem
Encabezado H2
H2 con borde (el borde es 8px, azul primario 70)
Encabezado H3
H3 Negrita/700 32px/1.78rem
Encabezado H4
H4 Inter Negrita/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 instrucciones para utilizar el componente Encabezado de forma eficaz. Estos consejos ayudarán a garantizar que sus encabezados sean funcionales y accesibles.
- Use 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 en la página.
- Anide los encabezados y ordénelos secuencialmente (p. ej., 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 omitir los niveles de encabezado (por ejemplo, de H2 a H4).
- No use más de un H1 en una sola página.
Ejemplos
- Use mayúsculas y minúsculas, en lugar de mayúsculas y minúsculas.
- Siga la jerarquía adecuada, los encabezados deben ordenarse secuencialmente.
- No use todas las mayúsculas.
- 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 pautas de mejores prácticas.
Accesibilidad
Mantenga un tamaño de fuente adecuado para facilitar la lectura, especialmente en pantallas más pequeñas y para usuarios con discapacidad visual.
Siga las pautas 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 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 en la página.
Lista de verificación del coordinador web
- Aplicar la jerarquía adecuada: Siga el orden secuencial (H1 a H6) sin omitir niveles.
- Asignar ID: para los vínculos de anclaje, asigne ID a los encabezados.
- Limitar el uso de H1: Solo se debe usar un H1 por página.
- Estilo consistente: use mayúsculas y minúsculas de oración y mantenga fondos de márgenes consistentes para espacios en blanco.
- Verifique la accesibilidad: asegúrese de que el tamaño y el espaciado de la fuente cumplan con las pautas WCAG 2.1.
- Siga las mejores prácticas de la Guía de estilo de escritura web.
Cuándo usar
Utilice el componente Encabezado para organizar y estructurar el contenido de la página web. Debe seleccionarse para los títulos de las páginas, los títulos de las secciones o los subtítulos para crear una jerarquía de contenido clara.