Der Inhaltsbereich

In den meisten Webseitenlayouts gibt es neben Bereichen für Header, Navigation, Sidebar usw. einen hauptsächlichen Inhaltsbereich. Da dieser oft auch eigene CSS-Eigenschaften erhalten soll, wurde er in der Vergangenheit typischerweise in Form eines allgemeinen Bereichs und dem Namen main ausgezeichnet, also mit <div id="main">…</div>. HTML5 spendiert für diese weit verbreitete Praxis ein neues Element — das main-Element.

Beispiel

<body>
  <header>
    <h1>Die Welt an diesem Tag</h1>
  </header>
  <main>
      <p>Viele Nachrichten</p>
  </main>
  <nav id="topnav">
    <p>Viele Links</p>
  </nav>
  <nav id="leftnav">
    <p>Noch mehr Links</p>
  </nav>
</body>

Erläuterung

Mit <main>….</main> (main = Haupt…) können sie den inhaltstragenden Bereich einer Webseite auszeichnen, falls diese noch weitere, nicht direkt zum Inhalt gehörende Bereiche wie Navigationen, Seitenleisten, Werbebereiche usw. enthält.

Das main-Element sollte sinnvollerweise nur einmal pro Webseite vorkommen.

HTML-technisch gehört das main-Element zu den gruppierenden Elementen (Grouping), nicht zu den Webseiten-Bereichen (Sectioning). Es sollte aus semantischen Gründen nicht innerhalb von Elementen wie section, article oder aside notiert werden.

In Browsern, die das main-Element erkennen, wird es wie ein gewöhnliches Block-Element ohne besondere Eigenschaften behandelt. Es erzeugt also eine neue Zeile im Textfluss und nimmt per Voreinstellung die gesamte verfügbare Breite ein.

Weitere Hinweise

Das main-Element wurde erst 2012 in den Living-Standard von HTML5 aufgenommen und gehört somit nicht zur ersten Generation der neuen HTML5-Elemente.

Referenzinformationen

HTML5 XHTML5

 


Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.

Sofern nicht anders angegeben, steht der Inhalt dieser Seite unter Lizenz Creative Commons Attribution-ShareAlike 3.0 License