> Faqs > Cuándo usar la etiqueta <main> del HTML 5 y cuándo usar el aria attribute main="role"

Cuándo usar la etiqueta <main> del HTML 5 y cuándo usar el aria attribute main="role"

Actualmente ¿se debe usar la etiqueta <main> en HTML 5? O ya no se recomienda usarla.

¿Para qué sirve el main="role" dentro de una etiqueta <main>? ¿es obligatorio ponerlo?

Respuestas

La etiqueta <main> sirve para colocar el contenido principal de una página. Pero en realidad la podrías usar usar como un <div>. Es decir, los navegadores la van a interpretar de la misma manera a la hora de renderizar el documento. En realidad se usa <main> más por su aspecto semántico.

Desde un punto de vista semántico, con <main> estás indicando que esta etiqueta engloba un área principal de contenido. Generalmente se entiende que <main> sirve para indicar que es el área principal del documento HTML, pero por su semántica, <main> podría ser también cualquier área principal... por ejemplo, podrías tener un <section> que dentro tuviera una parte principal con un <main>.

Personalmente dejo la etiqueta <main> solamente para el contenido que hay en el área principal del documento HTML.

El tema del role="main" es un aria-attribute y tiene un cometido relacionado con la accesibilidad. Sirve para indicar qué parte del documento HTML tiene el contenido principal. En este caso, en la página debería haber un único elemento con el role="main".

En realiad, la etiqueta donde uses el aria-attribute role="main" es indiferente. Podría ser un <div>:

<div role="main">
  <p>Contenido principal</p>
</div>

Pero ya que existe en <main> y que tiene la misma función dentro de la semántica del HTML5, lo normal es encontrarse el uso de ambas partes, etiqueta y atributo, al mismo tiempo. Así que lo típico es usar <main> con un código como este:

<main role="main">
  <p>Contenido principal</p>
</main>

Sobre ¿son obligatorios ponerlos? pues no... nadie te obliga a usarlos, ni el <main> como tampoco el role="main", ni necesitas usarlos ambos a la vez. Es solo una cuestión de mejorar el código del documento. Desde un punto de vista de la semántica y de la acccesibilidad es importante usar esas etiquetas. También te servirán para que los buscadores sepan interpretar qué parte de tu contenido tiene la información principal en cada documento HTML.

Agustín
255 6 15 14

La etiqueta <main> es muy recomendable de usar, por supuesto, para indicar dónde está el contenido principal, de entre todos los bloques de contenido que tengas en una página.

Es intersante usar <main> para que Google interprete qué parte es la importante de un sitio, así como cualquier otro sistema que necesite interpretar una página y entender la función de cada bloque de contenido.

No sé por qué puedas suponer que no sea recomendable usarla...

Borja
325 6 27 17
Hola, estoy estudiando desarrollo web de forma autodidacta, y en internet hay muchas cosas obsoletas o que se contradicen, por eso mi pregunta. Una pregunta mas, cuando uso main se debe poner el atributo role y el valor main? Si tienes más preguntas, por favor, vuelve a crear una FAQ adicional explicando tu pregunta con todos los detalles que puedas. Gracias! No necesitas poner el role main pero a menudo se usan juntos. lo importante desde el punto de vista del HTML es la etiqueta y el role es para accesibilidad. ya lo han contestado.