Título y encabezado
Los componentes título de página y encabezado se utilizan para dividir el contenido de nuestra página en bloques y poder crear así una estructura de apartados y subapartados.
Título de la página
Se corresponde con el título de la página en el idioma correspondiente, el que hemos introducido al crear la página. Se actualiza automáticamente si éste se cambia.
No es obligatorio que todas las páginas tengan el título de la página al principio del contenido aunque sí que es lo habitual y lo recomendado. Se podría eliminar o mover a otro contendor si así lo deseamos.
Novedad (julio de 2021) El componente Título de la página dispone de un panel de configuración que permite modificar el formato en que se muestra mediante diversas opciones:
Recuerda que, independientemente de las opciones de configuración acerca de cómo será mostrado, el texto siempre es el del título de la página en el idioma correspondiente y que la forma de modificarlo sería cambiar el propio nombre de la página.
En una primera sección de su panel de control se ofrecen diferentes "Estilos predefinidos", que se pueden aplicar pulsando sobre sus previsualizaciones.
Para mayor personalización, se dispone también de la sección "Ajustes personalizados", que permite establecer variaciones sobre los estilos predefinidos o establecer estilos propios. Por ejemplo, se pueden escoger opciones de tamaño de texto, conversión a mayúsculas, alineación horizontal, espaciados verticales, estilos de decoración...
Adicionalmente, en la pestaña 'Plantillas' se ofrecen combinaciones de contenedores y títulos configurados (con colores y tramas de fondo...).
Recuerda que, independientemente de las opciones de configuración acerca de cómo será mostrado, el texto siempre es el del título de la página en el idioma correspondiente y que la forma de modificarlo sería cambiar el propio nombre de la página.
Encabezado
Los encabezados se utilizan principalmente para estructurar la información en apartados y subapartados.
Desde el listado de componentes tenemos predefinidos dos estilos de encabezado distintos.
Cuando arrastramos un componente encabezado dentro de un contenedor, se genera automáticamente un componente editor con un formato preestablecido (con un nivel de encabezado h2 o h3 y un 'Formato de tipo de SEPARADOR'). Este formato no es fijo y una vez insertado en la página podríamos ajustar el nivel de apartado así como realizar cambios en su formato. Estas opciones de personalización las tenemos disponibles al principio del menú de estilos del componente editor:
Nivel de encabezado y tamaño al que se muestra:
Podemos establecer el nivel de Apartado o Subapartado (desde h2 hasta h6, pues h1 es siempre el título). Cada uno de ellos tiene un tamaño asociado (de mayor a menor). Novedad, noviembre de 2011:Ese tamaño asignado de forma predeterminada, lo podemos cambiar mediante las opciones del submenú “Cambiar tamaño de encabezado”:
Recuerda siempre que, por accesibilidad, debemos tener en cuenta que los niveles deben ser consecutivos y sin saltos entre ellos. Por ejemplo: después de un h1 debe ir un h2. Después de un h2 debe ir otro h2 si es otro apartado diferente, o un h3 si es un subapartado del anterior (siguiendo siempre un orden consecutivo y jerárquico, como estableciendo los niveles y subniveles de un índice de apartados).
Si una vez establecido el nivel que corresponde deseamos que se muestre en otro tamaño (diferente al asignado por defecto), podemos hacerlo mediante el submenú "Cambiar tamaño de encabezado".
Decoración del encabezado ("Formatos tipo SEPARADOR"):
Para cambiar el estilo del apartado/subapartado (el tipo de subrayado y decoración) bastaría con seleccionar otro dentro de los disponibles en el submenú “Formatos tipo SEPARADOR” que hay dentro del menú de estilos, bajo los diferentes niveles y tamaños de encabezado:
Novedad, noviembre de 2011 Al marcar un estilo diferente, se desmarcará automáticamente el anterior.
Novedad febrero 2022 Los formatos que se emplean normalmente para los apartados y subapartados (“Separador con subrayado y rectángulo” y “Separador con línea al lateral del texto”) se pueden seleccionar tanto con la decoración en azul como en naranja y, además, se adaptarán según la alineación del texto (izquierda, derecha o centrado). De esta forma, su aspecto se puede adaptar mejor a las distintas combinaciones de colores que estemos usando, así como a las diferentes opciones que tenemos para mostrar el título de la página.
Accesibilidad y niveles de encabezado
Para cumplir con nuestro objetivo de accesibilidad digital, nuestras páginas deben tener una estructura correcta de encabezados, con niveles de encabezado en orden lógico y consecutivo.
En las imágenes de previsualización de los componentes título y encabezados se pueden ver los niveles de encabezado (header) que tienen (h1, h2, h3).
Los títulos siempre tendrán el primer nivel de encabezado (h1) y no se puede modificar. Los componentes de encabezado con los diferentes formatos tienen los niveles 2 y 3 respectivamente (Apartado h2 y Subapartado h3). Esto es así porque, generalmente, se utiliza el azul para apartados y el naranja para subapartados.
Como se ha comentado en la sección anterior, se pueden modificar los formatos según nuestros gustos o necesidades, como también se pueden cambiar o establecer otros niveles de subapartado (hasta h6), pero es importante mantener un orden lógico y consecutivo. Por ejemplo: después de un h1 debe ir un h2. Después de un h2 debe ir otro h2 si es otro apartado diferente, o un h3 si es un subapartado del anterior (siguiendo siempre un orden consecutivo y jerárquico, como estableciendo los niveles y subniveles de un índice de apartados).
Novedad, noviembre de 2021 Si una vez establecido el nivel que corresponde deseamos que se muestre en otro tamaño (diferente al asignado por defecto), podemos hacerlo mediante el submenú “Cambiar tamaño de encabezado”.
Novedad, mayo de 2023 Para revisar y/o modificar fácilmente la jerarquía los encabezados de tus páginas, dispones de la herramienta "Esquema de contenidos navegable y editable" en la nueva pestaña de herramientas del panel izquierdo del editor de páginas.
Más información acerca de accesibilidad web, en la Unidad de Accesibilidad Digital.