HTML <main> tag

Definitie en gebruik

<main> De tag definieert de belangrijkste inhoud van het document.

<main> De inhoud van het element moet uniek zijn voor het document. Het mag geen inhoud bevatten die in meerdere documenten voorkomt, zoals zijbalken, navigatielinks, copyrightinformatie, website-logo's en zoekformulieren, etc.

Opmerking:Er mogen geen meerdere <main> element. <main> element mag niet zijn <article>en<aside>en<footer>en<header> of <nav> Onderliggende elementen van het element.

Voorbeeld

Voorbeeld 1

Specificeer de belangrijkste inhoud van het document:

<main>
  <h1>Meest populaire browsers</h1>
  <p>Chrome, Firefox en Edge zijn de meest gebruikte browsers van tegenwoordig.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome is een internetbrowser ontwikkeld door Google, gelanceerd in 2008...</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015......&</p>
  </article>
</main>

Try it yourself

Voorbeeld 2

Gebruik CSS om in te stellen <main> Stijl van elementen:

<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>Meest populaire browsers</h1>
  <p>Chrome, Firefox en Edge zijn de meest gebruikte browsers van tegenwoordig.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome is een internetbrowser ontwikkeld door Google, gelanceerd in 2008...</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015......&</p>
  </article>
</main>
</body>
</html>

Try it yourself

Global attributes

<main> The tag also supports Global attributes in HTML.

Event attributes

<main> The tag also supports Event attributes in HTML.

Browser support

The numbers in the table indicate the first browser version to fully support this tag.

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