path: root/files/de/web/html/element/main/index.html

---
title: <main>
slug: Web/HTML/Element/main
tags:
  - Element
  - HTML
  - HTML Gruppierender Inhalt
  - Referenz
translation_of: Web/HTML/Element/main
---
<h2 id="Übersicht">Übersicht</h2>

<p>Das <em>HTML Main Element</em> (<strong>&lt;main&gt;</strong>)<strong> </strong>kann als ein Container für den leitenden Inhalt benutzt werden. Der Hauptteil besteht aus Inhalt, der direkt bezogen oder auf das zentrale Thema eines Bereichs oder der zentralen Funktionalität einer Applikation aufbaut. Der Inhalt sollte zum Dokument einzigartig sein, ausgenommen jeglicher Inhalt, welcher auf dem gesamten Dokument wiederholt ist wie zum Beispiel Seitenleisten, Navigationlinks, Information über das Urheberrecht, Seitenlogos, und Sucheingaben (augenommen, wenn die Hauptfunktion eine Sucheingabe ist). Anders als {{HTMLElement("article")}} und {{HTMLElement("section")}}, trägt dieses Element dem Entwurf des Dokuments nicht bei.</p>

<div class="note"><strong>Hinweis:</strong>

<ul>
 <li><code>&lt;main&gt;</code> <strong>darf kein</strong> Nachfolger eines {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}} oder {{HTMLElement("nav")}} Elements sein.</li>
 <li><strong>Nur ein</strong> <a href="http://www.w3.org/TR/html51/semantics.html#the-main-element">main</a> Element kann pro Dokument verwendet werden.</li>
</ul>
</div>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories" title="HTML/Content_categories">Inhalt Kategorien</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Fließender Inhalt</a>, fühlbarer Inhalt.</td>
  </tr>
  <tr>
   <th scope="row">Erlaubter Inhalt</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">Fließender Inhalt</a>.</td>
  </tr>
  <tr>
   <th scope="row">Tag-Wegfall</th>
   <td>Keine; Sowohl Anfangs- als auch End-Tag sind erforderlich.</td>
  </tr>
  <tr>
   <th scope="row">Erlaubte Elternelemente</th>
   <td>Alle Elemente, die <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content" title="HTML/Content_categories#Flow_content">fließenden Inhalt</a> akzeptieren.</td>
  </tr>
  <tr>
   <th scope="row">DOM-Schnittstelle</th>
   <td>{{domxref("HTMLElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attribute">Attribute</h2>

<p><span style="line-height: 21px;">Das Element enthält ausschließlich <a href="/de/docs/Web/HTML/Globale_Attribute">globale Attribute</a></span><span style="line-height: 21px;">.</span></p>

<h2 id="Beispiel">Beispiel</h2>

<pre class="brush: html">&lt;!-- Anderer Inhalt --&gt;

&lt;main&gt;
  &lt;h1&gt;Äpfel&lt;/h1&gt;
  &lt;p&gt;Der Apfel ist das Kernobst des Apfelbaumes.&lt;/p&gt;

  &lt;article&gt;
    &lt;h2&gt;Rote Köstlichkeiten&lt;/h2&gt;
    &lt;p&gt;Diese hervorragenden roten Äpfel sind die verbreitetsten
    wie man sie in Supermärkten finden kann.&lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
  &lt;/article&gt;

  &lt;article&gt;
    &lt;h2&gt;Großmütterchen&lt;/h2&gt;
    &lt;p&gt;Diese saftigen grünen Äpfel sind eine großartige Füllung
    für meine Apfelkuchen.&lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
    &lt;p&gt;... &lt;/p&gt;
  &lt;/article&gt;

&lt;/main&gt;

&lt;!-- Anderer Inhalt --&gt;</pre>

<h2 id="Specifications" name="Specifications">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', '#the-main-element', '&lt;main&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Die Einschränkung der Nichtnutzung von <code>&lt;main&gt;</code> als ein Nachfahre eines {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, oder {{HTMLElement("nav")}} Elements wurde aufgehoben.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Keine Änderung von {{SpecName('HTML5 W3C')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Ursprüngliche Definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser-Kompatibilität</h2>

<p>Das <code>&lt;main&gt;</code> Element wird flächendeckend unterstützt (ausgenommen für Internet Explorer). Es wird vorgeschlagen, bis das &lt;main&gt; Element von Internet Explorer unterstützt wird, <code>das</code> <code>"main"</code> ARIA role dem <code>&lt;main&gt;</code> Element hinzufügen:</p>

<pre class="brush: html">&lt;main role="main"&gt;
  ...
&lt;/main&gt;
</pre>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Funktion</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basis Unterstützung</td>
   <td>Chrome 26</td>
   <td>{{ CompatGeckoDesktop("21.0") }}</td>
   <td>{{CompatNo()}}</td>
   <td>Opera 16</td>
   <td>Safari 7</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Funktion</th>
   <th>Android</th>
   <th>Firefox Mobil (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobil</th>
   <th>Safari Mobil</th>
  </tr>
  <tr>
   <td>Basis Unterstützung</td>
   <td>{{CompatNo()}}</td>
   <td>{{ CompatGeckoMobile("21.0") }}</td>
   <td>{{CompatNo()}}</td>
   <td>{{CompatNo()}}</td>
   <td>{{CompatNo()}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="sect1"> </h2>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>Basis Strukturelemente: {{HTMLElement("html")}}, {{HTMLElement("head")}}, {{HTMLElement("body")}}</li>
 <li>Sektionzugehörige Elemente: {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, oder {{HTMLElement("nav")}}</li>
</ul>

<p> </p>