Etiqueta HTML `<main>`

La etiqueta <main> es un nuevo elemento de nivel de bloque en la especificación HTML5. La etiqueta especifica el contenido principal del <body> del documento. El contenido de la etiqueta <main> debe ser único y no duplica bloques del mismo tipo que se repiten en otros documentos, como el encabezado de un sitio, el encabezado, el pie de página, el menú, la búsqueda, la información de copyright, etc.

El elemento <main> no debe colocarse dentro de las etiquetas <article>, <aside>, <footer>, <header> o <nav>. Un documento no debe tener más de una etiqueta <main> que no tenga un atributo hidden especificado.

Este elemento forma parte del árbol DOM, pero se excluye del esquema del documento, a diferencia de elementos de encabezado como <h2>, que sí contribuyen a él.

La tecnología de asistencia puede usar puntos de referencia para identificar rápidamente y navegar a las secciones grandes del documento. Se recomienda usar el elemento <main> en lugar de declarar role="main", ya que el elemento lleva implícitamente ese rol ARIA.

Los usuarios de tecnologías de asistencia pueden saltarse grandes secciones de contenido repetido usando la técnica “skipnav”. Esto permite al usuario acceder fácilmente al contenido principal de una página. Si añades un atributo id al elemento <main>, será el destino de un enlace de navegación de salto.

Sintaxis

La etiqueta <main> viene en pares. El contenido se escribe entre las etiquetas de apertura (<main>) y cierre (</main>).

Ejemplo de la etiqueta HTML `<main>`:

Etiqueta HTML <main>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <main>
      <h1>Programming languages</h1>
      <p>
        Languages HTML and CSS are intended for site layout.
      </p>
      <article>
        <h2>HTML</h2>
        <p>
          HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages.
        </p>
        <p>... </p>
        <p>... </p>
      </article>
      <article>
        <h2>CSS</h2>
        <p>
          CSS is a language of styles, defining the display of HTML documents.
        </p>
        <p>... </p>
      </article>
    </main>
  </body>
</html>

Try it Yourself »

Resultado

main tag example

Atributos

La etiqueta <main> admite los atributos globales y los atributos de evento.

Cómo dar estilo a una etiqueta HTML <main>

css

main {
  padding: 20px;
  background-color: #f9f9f9;
}

Practice

What is the significance and usage of the <main> tag in HTML?

It is used to sectionalize the main content on a webpage.It helps web browsers and assistive devices understand the structure of the website.It modifies the style of the main content on a webpage.It may exist multiple times on a page.It's optional and can be omitted on a webpage.

Etiqueta HTML <main> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <main>: ​

Resultado ​