Índice
- Introducción
- Las regiones semánticas y su relación con los roles
- Utilidad de las regiones semánticas
- Etiquetar las regiones semánticas
- Función de cada región
- ¿Cómo anido section y article?
- Conclusión
Introducción
En el principio, sólo existía div. Era la herramienta única y universal para agrupar elementos. Sin embargo, con la llegada de HTML 5, vinieron las regiones semánticas. Estas tenían la intención de poner orden en el caos, dotando de significado a la forma en que se agrupaban los elementos.
El problema es que a veces no queda muy claro para qué sirve cada una y acaba habiendo elementos section por todas partes. En este tutorial, arrojaremos algo de luz sobre el uso de cada una de ellas.
Las regiones semánticas y su relación con los roles
La primera aproximación a este concepto fue con el uso del atributo role definido en WAI-ARIA. Con él, podíamos definir el papel de cada región de la página. De hecho, cuando el soporte de HTML 5 todavía no estaba del todo extendido, la recomendación era utilizar la duplicidad región semántica con atributo role, ya que así nos asegurábamos de que el navegador o la herramienta de asistencia de turno pudieran interpretar correctamente el significado.
Hoy en día, este enfoque no tiene mucho sentido. Hace tiempo que todos los navegadores son compatibles con las regiones semánticas. Aun así, el atributo role pervive, ya que permite ofrecer significado adicional para muchos otros casos.
Utilidad de las regiones semánticas
El principal beneficio de utilizar regiones semánticas es que podemos distinguir programáticamente el propósito de cada área de la página. Esto puede ser aprovechado por agentes como los motores de búsqueda, pero también supone un beneficio para las personas que usan tecnologías de asistencia, tales como lectores de pantalla. Es una información adicional que se les provee para que puedan comprender mejor la navegación por la web.
Etiquetar las regiones semánticas
Siempre que podamos, las regiones semánticas deberían estar etiquetadas para poder distinguirse unas de otras. Podemos hacer esto con el atributo aria-labelledby preferentemente, ya que hará coincidir la descripción con un texto visible. Si no, podemos utilizar el atributo aria-label.
De esta forma, no sólo estamos proporcionando la función que desempeña esa región, sino también su nombre concreto. Por ejemplo, podemos tener varias áreas de navegación en la página, pero sólo una es el menú principal. El resto pueden ser un mapa del sitio, un índice de contenidos o hasta unas breadcrumbs.
Función de cada región
Aquí se ofrece un resumen de la función que desempeña cada región semántica:
- main: Engloba el contenido principal de la página. Sólo debería haber una región main en cada página.
- nav: Engloba un conjunto de enlaces de navegación. Puede ser el menú principal, un mapa del sitio al pie, un índice en un artículo, breadcrumbs…
- header: Representa la cabecera de una sección de la página. No tiene por qué ser la cabecera principal. Puede haber varios, como en el caso de las entradas de un blog, donde cada una tendría su propio header. Sólo debe haber un elemento header de más alto nivel, que será considerado como el encabezado de la página.
- footer: Representa el pie de una sección de la página. Como el header, no tiene por qué ser el pie principal de la página. Puede haber varios. Sólo debe haber un footer de más alto nivel, que será considerado el footer de la página.
- section: Una sección de la página. Típicamente, tiene un encabezado que identifica su contenido. Una forma de determinar si una región debería ser section o no, es pensar si tendría sentido incluirla como entrada en un índice de la página.
- article: Es un fragmento de la página con significado autocontenido. Deberías poder entenderlo sin necesidad del resto de la página como contexto. Un ejemplo típico es un tweet.
- aside: Define el contenido como complementario. El contenido debería estar relacionado con su entorno, como una barra lateral.
¿Cómo anido section y article?
No hay una forma correcta de hacerlo. Depende de cómo sea el contenido de tu página. Por ejemplo, en un blog, un article , que representa una entrada, puede constar de varios section. En cambio, en otro tipo de página, una section puede contener elementos article en su interior.
Conclusión
Las regiones semánticas pueden ser una herramienta poderosa para mejorar la navegación de muchos usuarios por tu web. Sin embargo, utilizadas de la forma incorrecta, pueden generar problemas no deseados o que no sirvan para nada en absoluto.
