Balise HTML <main>

Définition et utilisation

<main> L'étiquette <main> définit le contenu principal du document.

<main> Le contenu de l'élément doit être unique pour le document. Ne pas inclure de contenu répété dans plusieurs documents, par exemple, les barres latérales, les liens de navigation, les informations sur le copyright, le logo du site et les formulaires de recherche, etc.

Remarque :Il ne peut pas y avoir plusieurs L'élément <main>. L'élément <main> ne peut pas être <article>et<aside>et<footer>et<header> ou <nav> Les éléments descendants de l'élément.

Exemple

Exemple 1

Spécifier le contenu principal du document :

<main>
  <h1>Les navigateurs les plus populaires</h1>
  <p>Chrome, Firefox et Edge sont les navigateurs les plus utilisés aujourd'hui.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome est un navigateur web développé par Google, lancé en 2008......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox est un navigateur web open source développé par Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge est un navigateur web développé par Microsoft, lancé en 2015......&</p>
  </article>
</main>

Essayez-le vous-même

Exemple 2

Défini par CSS <main> Style des éléments :

<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>Les navigateurs les plus populaires</h1>
  <p>Chrome, Firefox et Edge sont les navigateurs les plus utilisés aujourd'hui.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome est un navigateur web développé par Google, lancé en 2008......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox est un navigateur web open source développé par Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge est un navigateur web développé par Microsoft, lancé en 2015......&</p>
  </article>
</main>
</body>
</html>

Essayez-le vous-même

Attributs globaux

<main> Cette balise prend également en charge Attributs globaux dans HTML.

Attributs d'événement

<main> Cette balise prend également en charge Attributs d'événement dans HTML.

Compatibilité du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge pleinement cette balise pour la première fois.

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