Recientemente, fue añadido oficialmente a la especificación HTML del W3C. Ahora que el polvo se ha asentado, es hora de sumergirse y averiguar dónde y cuándo <main> sería apropiado. Empecemos.

Historia

La inclusión de un elemento main (o similar) se ha debatido durante mucho tiempo en los grupos de trabajo, con autores y otras personas que a menudo se preguntaban por qué teníamos nuevos elementos como <header>, <article> y <footer> pero ningún elemento para describir con precisión el contenido principal de una página.

La propuesta fue aceptada en noviembre de 2012 y <main> se incluyó en la especificación HTML5.1. Posteriormente, se añadió a la especificación de HTML5 tras no haber habido objeciones. Veamos cómo la especificación describe <main>.

Especificación del W3C

El propósito principal de <main> es asignar el role main de ARIA a un elemento en HTML. Esto ayudará a los lectores de pantalla y otras tecnologías de asistencia a entender dónde comienza el contenido principal. La especificación del W3C describe <main> como una representación:

El contenido principal del cuerpo de un documento o aplicación. El área de contenido principal consiste en el contenido que está directamente relacionado con el tema central de un documento o la funcionalidad central de una aplicación, o que lo amplía.HTML Standard del W3C

Dado que el elemento <main> está ahora incluido en la especificación HTML, el elemento <body> ha vuelto a su definición de HTML4:

El elemento body representa el contenido del documento.HTML Standard del W3C

Más Detalles

Una faceta importante de <main> es que sólo puede utilizarse una vez por página, en lugar de permitir múltiples <main>s.

Según la especificación, el validador del W3C arroja un error si se intentan utilizar varios elementos <main> por documento.

Otra estipulación de <main> es que no puede usarse como descendiente de un elemento <article>, <aside>, <footer>, <header> o <nav>.

Debido a que <main> no está seccionando el contenido, no afecta al esquema del documento de la misma manera que lo hacen <article>, <nav> o <section>.

Versión del WHATWG

La definición de por parte del WHATWG es diferente a la versión del W3C. Es posible utilizar más de un elemento main, pero solo uno no debe tener el atributo hidden.

Un documento no debe tener más de un elemento main que no tiene el atributo hidden especificado.WHATWG HTML

<!doctype html>
<html lang=en-CA>
<meta charset=utf-8>
<title> … </title>
<link rel=stylesheet href=spa.css>
<script src=spa.js async></script>
<nav>
 <a href=/>Home</a>
 <a href=/about>About</a>
 <a href=/contact>Contact</a>
</nav>
<main>
 <h1>Home</h1>
 …
</main>
<main hidden>
 <h1>About</h1>
 …
</main>
<main hidden>
 <h1>Contact</h1>
 …
</main>
<footer>Made with ❤️ by <a href=https://htmldesdecero.es/>HTML Desde Cero 👻</a>.</footer>

Importante

La especificación no permite más de una etiqueta <main> en la misma página, si no tienen el atributo especial hidden. Este atributo se añade a un elemento HTML, por ejemplo, en aplicaciones de una sola página, para cambiar el contenido de una página haciendo visible uno u otro <main> en diferentes estados de la aplicación. El atributo hidden indica al navegador que el elemento no debe mostrarse ni utilizarse cuando se está mostrando y utilizando el contenido de otro <main>.

Recomendamos utilizar la versión del W3C de como se ha descrito anteriormente.

Cómo Ponerlo en Marcha

Al igual que con la introducción de muchos otros elementos nuevos de HTML5, no todos los navegadores reconocen o tienen estilos preestablecidos para él. Tendrás que asegurarte de que se muestre como un elemento de nivel de bloque en tu CSS: 

main {display:block;}

Por el momento, también tendrás que usar JavaScript para crear el elemento para las versiones más antiguas de IE: 

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

Ejemplo de Uso de <MAIN>

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Ejemplo de la Etiqueta HTML main</title>
</head>
<body>
<main>
  <h1>Navegadores Web</h1>
  <p>Actualmente los navegadores más utilizados son Google Chrome, Firefox y Opera.</p>
  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome es un navegador web gratuito y derivado de proyectos de código abierto, desarrollado por Google en 2008.</p>
  </article>
  <article>
    <h1>Opera</h1>
    <p>Opera es un navegador web creado por la empresa noruega Opera Software en 1995.</p>
  </article>
  <article>
    <h1>Mozilla Firefox</h1>
    <p>Firefox, el navegador web gratuito y de código abierto de Mozilla, se presentó al público en 2004.</p>
  </article>
</main>
</body>
</html>

No pienses que tienes que poner absolutamente todo tu contenido en el elemento main. No, también podemos utilizar otros elementos fuera de él, como header y footer: 

<body>
    <header>
        ..............
    </header>
    <main>
        .................   
    </main>
    <footer>
        .................   
    </footer>
</body>

Nuevamente, recuerda que el elemento main no puede estar anidado dentro de elementos como article, aside, footer, header, nav. Además, sólo se permite un elemento main en una página web.

También cabe señalar que actualmente existen pequeños problemas de compatibilidad con este elemento en los navegadores. En particular, IE 11 no admite este elemento (los demás navegadores lo soportan totalmente), por lo que en este caso se debe utilizar el atributo role: 

<main role="main">
  ...
</main>

Soporte para Navegadores

Firefox 21, Chrome 26 y WebKit r140374 han implementado un soporte básico para .

Todos ellos han asignado el rol ARIA role="main" al elemento <main>, por lo que las tecnologías de asistencia pueden ahora reconocer el elemento <main> sin problemas.

CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básicoChrome 2621.0 (21.0)Sin soporteSin soporteSin soporte

Resumen

Como puedes ver, es súper fácil empezar con <main>. Sólo lleva unos minutos, así que ahora es el momento de empezar a añadirlo a los sitios que crees.

Si no estás seguro de cuándo y dónde usar <main>, no dejes de preguntarlo en los comentarios e intentaré ayudarte.

4/5 - (2 votos)