Etiqueta <main> de HTML

Definición y uso

<main> La etiqueta define el contenido principal del documento.

<main> El contenido del elemento debe ser único para el documento. No debe contener contenido repetido en múltiples documentos, como barras laterales, enlaces de navegación, información de copyright, logotipo del sitio y formularios de búsqueda, etc.

Nota:No puede haber múltiples Elemento <main>. El elemento <main> no puede ser <article>、<aside>、<footer>、<header> o <nav> Elementos descendientes del elemento.

Ejemplo

Ejemplo 1

Especificar el contenido principal del documento:

<main>
  <h1>Los navegadores más populares</h1>
  <p>Chrome, Firefox y Edge son los navegadores más utilizados en la actualidad.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome es el navegador web desarrollado por Google, lanzado en 2008......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox es un navegador web de código abierto desarrollado por Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge es un navegador web desarrollado por Microsoft, lanzado en 2015......&</p>
  </article>
</main>

Prueba personalmente

Ejemplo 2

Configuración de CSS <main> Estilos de elementos:

<html>
<head>
<style>
main {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}
main > h1, p, .browser {
  margin: 10px;
  padding: 5px;
}
.browser {
  background: white;
}
.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>
<main>
  <h1>Los navegadores más populares</h1>
  <p>Chrome, Firefox y Edge son los navegadores más utilizados en la actualidad.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome es el navegador web desarrollado por Google, lanzado en 2008......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox es un navegador web de código abierto desarrollado por Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge es un navegador web desarrollado por Microsoft, lanzado en 2015......&</p>
  </article>
</main>
</body>
</html>

Prueba personalmente

Atributos globales

<main> La etiqueta también admite Atributos globales en HTML.

Atributos de eventos

<main> La etiqueta también admite Atributos de eventos en HTML.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la etiqueta.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 12.0 21.0 7.0 16.0