Elemento main en HTML

El elemento html main es el contenido principal del cuerpo del documento (el elemento <body>) o una parte del documento o aplicación. El área de contenido principal incluye todo el contenido que está directamente relacionado con el tema del documento, se agrega al tema del documento o representa la funcionalidad principal de la aplicación.

Puede utilizar varios elementos <main> en la página si procede. Por ejemplo, si hay una página que representa varios artículos (cada uno de ellos dentro de un elemento <article>, y cada uno de ellos tiene contenido adicional en su interior, como información del autor, anuncios, etc.) tiene sentido poner el elemento <main> dentro de cada artículo para identificar el contenido principal de este artículo.

Este ejemplo muestra cómo el elemento se usa correctamente <main> con elementos <article>:

< main > 
  < article > 
    < h1 > manzanas </ h1 > 
    < section > 
      < h2 > variedades de manzanas </ h2 > 
      < p > Párrafo o párrafos que explican los diferentes tipos de manzanas </ p > 
    </ section > 
    < section> 
      < article >
     <h2> Comentario del profesor de botánica  </h2> 
        <p>Párrafo aclarando la opinión del profesor</ p > 
        < footer de página > 
          < p >
            Publicado en
            < time  datetime = "2020-05-26 09:00" > 26 de mayo </ time > 
          </ p > 
        </ footer > 
      </ article > 
      < article  class = "user_review" > 
        < h2 > Nuestra opinión sobre el comentario del profesor </ h2 > 
        < p > Un párrafo que explica nuestra opinión sobre lo que dijo el profesor </ p > 
        < time  datetime = "2020-05-27 09:00" > </ time > 
      </article > 
    </section > 
    < footer > 
      < p >
        El artículo fue publicado en
        < time  datetime = "2020-05-25 09:00" > 25 de mayo </ time > Publicado por Jon Doe.
      </ p > 
    </ footer > 
  </ article > 
</ main >

Etiqueta html main

Clasificaciones de contenido	Contenido organizacional.
Contenido permitido	El contenido es organizativo.
Acrónimo	Debe tener una etiqueta de inicio y no debe tener una etiqueta de fin.
Elementos del padre	Cualquier elemento que acepte el contenido organizativo, siempre que no sea uno de los siguientes: `<aside>` o `<footer>`, `<header>` o `<nav>`.
Interfaz DOMO	HTMLElement

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
26	21,0	Soportado	7	16

Características

En este elemento se pueden utilizar propiedades globales.

Descripción de uso

El contenido del elemento debe ser <main> exclusivo del documento o secciones del documento. El contenido duplicado en un grupo de documentos o en más de una sección del documento, como la barra lateral, los enlaces de navegación y los derechos de autor. El logotipo del sitio o los formularios de búsqueda no deben incluirse dentro del elemento a <main> menos que una búsqueda de formulario (por ejemplo) sea una parte importante de la funcionalidad de un documento.

El elemento no contribuye al <main> diseño del documento y, a diferencia de elementos como <body> o encabezados como <h2>, el elemento <main> no afecta la estructura de la página desde un punto de vista DOM, solo tiene la intención de caracterizar aún más el contenido de la página.

Formato predeterminado

La mayoría de los navegadores muestran el elemento <main> con la propiedad establecida display en block:

main {
  display: block;
}