Elemento main de HTML5

El elemento main es una de las más recientes adiciones que se han hecho a la especificación de HTML5, en este artículo te explicamos su funcionamiento.

El elemento main fue recientemente añadido a la especificación de HTML5 del W3C. Esta nueva etiqueta es un equivalente exacto del Aria role main, y esta diseñado para indicar a los lectores de pantalla o cualquier otra tecnología de apoyo de lectura, exactamente donde empieza el contenido principal de una página, por lo que puede ser utilizado para establecerse como objetivo del comando de teclado “skip links” (Permite a los lectores omitir secciones de navegación).

Este elemento también puede ser utilizado para la sindicación y reenvío de contenido. Los navegadores móviles podrían hacer uso de él para enfocar el zoom de la página en su contenido, cuando el navegador no encuentre un diseño adaptable presente. Es por ello que solamente debe utilizarse una vez por página, si por ejemplo tenemos un div que abarque todo el contenido de la página, este nuevo elemento puede sustituirlo.

Ya que hemos asentado las bases relacionadas a este elemento, es tiempo de profundizar un poco y averiguar dónde y cuándo es apropiado utilizar esta etiqueta para delimitar una sección.

Historia

La creación del elemento main y su incursión en la especificación del W3C, se debió a un continuo debate producido por la necesidad de contar con un elemento adecuado para indicar y describir en él, el contenido principal de una página. El hecho de que anteriormente fueran aprobados para utilizarse en esta nueva versión de HTML los elementos header, article y footer, motivó aún más a continuar con este planteamiento.

La propuesta fue aprobada finalmente en noviembre de 2012, y la etiqueta fue incluida en la especificación HTML5.1 del lenguaje y recientemente se añadió a la especificación oficial de HTML5, sin alguna objeción.

Definición

Según la definición que le da la especificación del W3C al elemento main, esta etiqueta sirve para abarcar el contenido principal del cuerpo de un documento o aplicación. El área de contenido principal consta de datos y elementos que se relacionan directamente o amplían el tema central del documento o la función central de una aplicación.

Dado que el elemento main ahora se incluye en la nueva especificación HTML, el elemento body ha vuelto a utilizarse en base a su definición de la versión HTML4, es decir, body es el elemento que representa el contenido del documento.

Detalles

Una faceta importante del elemento main es que sólo puede ser utilizado una vez por página. En caso de utilizar varios elementos del mismo tipo, el validador del W3C lanza un error.

Otra estipulación de este elemento, es que no debe utilizarse como hijo de un elemento article, aside, footer, header o nav. Debido a que main no se utiliza para seccionar contenido, no afecta el esquema del documento de la misma forma en que lo hacen article, nav o section.

Soporte

Al igual que con la introducción de muchos otros nuevos elementos de HTML5, no todos los navegadores reconocen al elemento main, y por consecuente no tienen estilos predefinidos para ello. En caso de utilizar esta etiqueta dentro de nuestros desarrollos, tendremos que asegurarnos de que se muestra como un elemento de nivel de bloque, para ello podemos establecer la siguiente sentencia CSS:

main{
 display: block;
}

Por el momento, también tendremos que hacer uso de JavaScript para que este elemento se pueda crear e implementar en el código para versiones antiguas de IE.

<script>document.createElement('main');</script>

Firefox 21, Chrome 26 y WebKit r140374 han implementado soporte básico para ésta etiqueta. Todos ellos han asignado el ARIA role main al elemento main, por lo que pueden reconocer el elemento sin ningún problema.

Conclusión

Como hemos visto, es muy sencillo implementar este elemento en el código, con invertir un par de minutos de nuestro tiempo podemos lograrlo. No hay excusa para omitirlo, es momento de empezar a añadirlo a los sitios que actualmente estemos desarrollando.