Etiqueta HTML <principal>


Ejemplo

Especifique el contenido principal del documento:

<main>
  <h1>Most Popular Browsers</h1>
  <p>Chrome, Firefox, and Edge are the most used browsers today.</p>

  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>

  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>

  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</main>

Más ejemplos de "Pruébelo usted mismo" a continuación.


Definición y uso

La <main>etiqueta especifica el contenido principal de un documento.

El contenido dentro del <main>elemento debe ser exclusivo del documento. No debe contener ningún contenido que se repita en documentos como barras laterales, enlaces de navegación, información de derechos de autor, logotipos de sitios y formularios de búsqueda.

Nota: No debe haber más de un <main>elemento en un documento. El <main>elemento NO debe ser descendiente de un elemento <article>, <aside>, <footer>, <header> o <nav>.


Compatibilidad con navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el elemento.

Element
<main> 26.0 12.0 21.0 7.0 16.0

Atributos globales

La <main>etiqueta también es compatible con los atributos globales en HTML .


Atributos de eventos

La <main>etiqueta también es compatible con los atributos de eventos en HTML .



Más ejemplos

Ejemplo

Usa CSS para diseñar el elemento <main>:

<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>Most Popular Browsers</h1>
  <p>Chrome, Firefox, and Edge are the most used browsers today.</p>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</main>

</body>
</html>