HTML Elemento principal


Ejemplo

El elemento <main> contiene el contenido principal de su página web. Este contenido es exclusivo de la página individual y no debe aparecer en ninguna otra parte del sitio. El contenido repetido, como encabezados, pies de página, navegación, logotipos, etc., se coloca fuera del elemento.

  • El elemento <main> solo debe usarse una vez como máximo en una sola página.
  • El elemento <main> no debe incluirse como descendiente de un article , aside , footer , header o elemento de nav .

En el siguiente ejemplo, estamos mostrando una única publicación de blog (e información relacionada, como referencias y comentarios).

<body>
    <header>
        <nav>...</nav>
    </header>

    <main>
        <h1>Individual Blog Post</h1>
        <p>An introduction for the post.</p>

        <article>
            <h2>References</h2>
            <p>...</p>
        </article>

        <article>
            <h2>Comments</h2> ...
        </article>
    </main>

    <footer>...</footer>
</body>
  • La publicación del blog se encuentra dentro del elemento <main> para indicar que este es el contenido principal de esta página (y, por lo tanto, único en todo el sitio web).

  • Las etiquetas <header> y <footer> son hermanos del elemento <main> .


Notas:

La especificación HTML5 reconoce el elemento <main> como un elemento de agrupación y no como un elemento de sección .

Se recomienda agregar el atributo de función ARIA role="main" a otros elementos destinados a ser utilizados como contenido principal para ayudar a los agentes de usuario que no admiten HTML5 y también para proporcionar más contexto para aquellos que lo hacen.

El elemento <main> por defecto tiene la función principal, por lo que no es necesario proporcionarlo.

Haga clic aquí para leer la especificación oficial de HTML5 para el elemento <main>