Elemento main

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento main es un contenedor para los temas centrales de un documento o sección. Este contenido central puede interpretarse como todo lo que resta luego de quitar anuncios, encabezados (header), pies (footer), secciones de navegación (nav), vínculos relacionados y otros elementos secundarios.

El elemento main tiene mayor importancia para personas con discapacidades, que habitualmente acceden a la web a través de programas especiales como los navegadores de voz. En tales casos, los navegadores pueden ser instruidos para ir directamente al contenido principal del documento o sección (main), saltándose toda la información menos relevante.

Ejemplos

Este ejemplo muestra una estructura de documento típica donde el elemento main encierra a los contenidos esenciales.

<html>
  <head>
    <title>Artículo: Software libre</title>
  </head>
  <body>
    <header>
      <p>Bienvenido a ArtículosLocos!</p>
      <nav>
        <a href="/">Inicio</a>
        <a href="/articulos.html">Artículos</a>
        <a href="/contacto.php">Contáctanos</a>
      </nav>
    </header>
    <main>
      <h1>Software libre</h1>
      <p>El término software libre refiere el conjunto de software que por elección manifiesta de su autor, puede ser copiado, estudiado, modificado, utilizado libremente con cualquier fin y redistribuido con o sin cambios o mejoras.</p>
      <p>...</p>
    </main>
    <footer>
      <p>&copy; Todos los derechos reservados</p>
    </footer>
  </body>
</html>

Ahora, tenemos un documento con un par de artículos. El documento principal, así como ambos artículos, tiene una sección central delimitada por el elemento main.

<html>
  <head>
    <title>Últimos artículos</title>
  </head>
  <body>
    <main>
      <article>
        <header>
          <h1>Bajo el cielo azul</h1>
          <p>Publicado: <time>24-05-2015</time></p>
        </header>
        <main>
          <p>Nuestros sueños son la expresión de lo que contiene el alma...</p>
          <p>...</p>
        </main>
        <footer>
          <p>&copy; Todos los derechos reservados</p>
          <address>Jhon Doe (jhondoe@example.com)</address>
        </footer>
      </article>
      <article>
        <header>
          <h1>Bienvenidos</h1>
          <p>Publicado: <time>10-05-2015</time></p>
        </header>
        <main>
          <p>El sol se escondía nuevamente detrás del pasto llevándose mi esperanza de verla una vez más...</p>
          <p>...</p>
        </main>
        <footer>
          <p>&copy; Todos los derechos reservados</p>
          <address>Jhon Doe (jhondoe@example.com)</address>
        </footer>
      </article>
    </main>
  </body>
</html>

Atributos

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.