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.