HTML <main> Tag

Definition und Verwendung

<main> Der Tag definiert den Hauptinhalt des Dokuments.

<main> Inhalt der Elemente sollte für das Dokument einzigartig sein. Es sollte keine im mehreren Dokumenten wiederholte Inhalte enthalten, wie z.B. Seitenleisten, Navigationslinks, Urheberrechtsinformationen, Website-Logo und Suchformulare.

Hinweis:In einem Dokument dürfen nicht mehrere <main> -Element. <main> -Element kann nicht sein <article>und<aside>und<footer>und<header> oder <nav> Nachkommen der Elemente.

Beispiel

Beispiel 1

Hauptinhalt der Dokument festlegen:

<main>
  <h1>Am beliebtesten Browser</h1>
  <p>Chrome, Firefox und Edge sind die am häufigsten verwendeten Browser.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome ist ein von Google entwickelter Webbrowser, der 2008 veröffentlicht wurde......</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

Beispiel 2

CSS zur Einstellung verwenden <main> Stilelemente:

<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>Am beliebtesten Browser</h1>
  <p>Chrome, Firefox und Edge sind die am häufigsten verwendeten Browser.</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome ist ein von Google entwickelter Webbrowser, der 2008 veröffentlicht wurde......</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