htmlcinco

HTML 5, encontrá novedades, tutoriales y traducciones sobre este lenguaje.

El nuevo elemento de HTML5: main

El nuevo elemento de HTML5: main

Hace poco, el elemento main fue incluído formalmente en la especificación de HTML5 de la W3C. Si bien ya teníamos elementos como header, section, article o footer, no existía una etiqueta precisa que describiese el contenido principal de una página.

Hasta ahora, la mayoría de los desarrolladores, utilizabamos la etiqueta div para englobar el contenido primario de un documento, asignandole al mismo un id de valor «main» (que significa principal en inglés). Ahora el id puede seguir siendo el mismo, pero la etiqueta debería cambiar a main si queremos maquetar correctamente.

El propósito principal de esta etiqueta es desde un punto de vista de accesibilidad, ya que ayuda a que los screen readers (lectores de pantalla) y otras tecnologías asistenciales puedan identificar donde comienza el contenido principal de la página y donde termina.

Según la especificación: el elemento main representa el contenido principal del cuerpo (body) de un documento.

Uso del elemento main

Una característica importante a tener en cuenta sobre este elemento, es que puede ser usado una sola vez por página, algo que parece bastante obvio si pensamos su propósito. Usar más de un elemento main, hará que nuestro HTML sea inválido para la W3C.

Este elemento no puede ser hijo de ninguno de los siguientes: header, nav, article, aside y footer.

Soporte en navegadores

Chrome 26 y Fiefox 21 ya tienen soporte para main.
Sin embargo, así como sucede con muchas de las nuevas etiquetas de HTML5, algunos navegadores todavía no reconocen a main ni tampoco tienen estilos por defecto para el mismo. Esto se soluciona incluyendo el archivo HTML5 shiv en nuestro proyecto, ya que incluye el arreglo correspondiente.

Comparte conocimiento:
Share on twitter
Twitter
Share on linkedin
Linkedin
0
Share on facebook
Facebook
0
Share on google
Google
Please Add coin wallet address in plugin settings panel
¿Quieres saber más?
¡Suscríbete a nuestro newsletter!

Respetamos tu privacidad y tu tiempo, no recibirás ningún tipo de correo basura.

8 comentarios para “El nuevo elemento de HTML5: main”

  1. Eborio Linárez dice:

    Muchas gracias por el artículo, a empezar a utilizar MAIN

  2. Mauro dice:

    Hola. Interesante el artículo pero por favor, deja activo el campo DATE para poder seguirte en cuanto a las fechas de publicación de los posts. Este por ejemplo me parece es de ppio de año por la versión del Chrome y Firefox que mencionás.
    Un abrazo y muy bueno el sitio.
    M.

  3. Terminator dice:

    Creo que la información no es correcta con respecto a las div, la div es una caja contenedora y el id puede ser cualquiera, no nos hagamos la picha un lio.

  4. Drumsman dice:

    Claramente ‘Terminator’ no ha entendido a lo que el post se refiere con respecto a la mención de la etiqueta div.

  5. holger dice:

    me gustaria que dieran un ejemplo de como usar la etiqueta Main

  6. juan dice:

    elias es un crack

  7. Rodolfo dice:

    Hola a esta etiqueta igual puedo ponerle una clase??

    osea

    <main class=""??

  8. admin dice:

    Sí claro, es como cualquier otra etiqueta!

Dejar un comentario

¿Quieres saber más?

 

¡La mejor información en tu correo!

(proximamente importantes novedades)