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:
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin
Share on Facebook
Facebook
0
  • Bitcoin
  • Ethereum
  • Bitcoin cash
  • Tether
  • Stellar
Scan to Donate Bitcoin to 1L9sRKFJaXHQ8skQXR9b76KATmtEa9hsPn

Bitcoin!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin

Scan to Donate Ethereum to 0xff68A1f93A2910A9DB02f7ab0DeD97F0ad62b541

Ethereum!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Ethereum. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Ethereum

Scan to Donate Bitcoin cash to qqysclxkfj4wnrqepksydauq74lzud805v9zlptxa8

Bitcoin cash!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin cash. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin cash

Scan to Donate Tether to 0xff68A1f93A2910A9DB02f7ab0DeD97F0ad62b541

Tether!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Tether. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Tether

Scan to Donate Stellar to GDIP3K46BRH3CDVGKDYWNEVHFI5LGG5MOBWU7QUCOCNOW4DJYIEMY2QC

Stellar!

Si el artículo te resultó útil, no dudes en colaborar con nosotros con Stellar. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Stellar

¿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)