Ein neues Element für HTML5: <main>

Achtung: dieser Beitrag ist alt! Es kann gut sein, dass seine Inhalte nicht mehr aktuell sind.

Wie sicher den Wenigsten entgangen ist, wird fleißig an einem neuen Element für HTML5 gearbeitet. Das <main>-Element soll for the identification of the main content area of a document genutzt werden und damit die bekannten HTML5-Elemente <section>, <header> und Konsorten ergänzen. Stand heute ist das Ganze eigentlich noch nichts weiter, als ein Vorschlag zur Erweiterung des bestehenden Standards, doch da weitgehend Konsens über die Einführung des neuen Elements besteht, kann man sich <main> durchaus schon genauer anschauen.

Wozu <main>?

Das neue Element bietet genau wie alle anderen neuen HTML5-Elemente zwei Dinge: zum einen ist es ein zusätzliches Sprachmittel für die Auszeichnung von Website-Teilbereichen, zum anderen hat es eingebaute ARIA-Funktionen, die wenn das neue Element korrekt benutzt wird, automatisch der Barrierefreiheit der Seite guttun. In Sachen Optik und Verhalten entspricht es genau wie <section> und Konsorten dem, was man vom guten alten <div> kennt.

Gedacht ist <main> für die Auszeichnung des jeweiligen Hauptinhalts einer Seite; im Falle eines Blogs wäre das zum Beispiel die Spalte mit allen Artikeln:

<!doctype html>
<meta charset="utf-8">
<title>Katzenbilder24.com</title>

<header>
  <h1>Katzenbilder-Blog</h1>
  <nav>
    <ul>
      <li><a href="/">Start</a></li>
      <li><a href="/about">Über</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Flauschiges Kätzchen</h2>
    <p>Text, Bild...</p>
  </article>
  <article>
    <h2>Pelziges Kätzchen</h2>
    <p>Text, Bild...</p>
  </article>
</main>

<aside>
  <section>
    <h2>Tagcloud</h2>
    <p>Tags, Tags, Tags</p>
  </section>
  <section>
    <h2>Blogroll</h2>
    <p>Links, Links, Links</p>
  </section>
</aside>

Anders als <section> hat <main> keinen Einfluss auf die Überschriftenstruktur (Outline) einer Webseite und es darf auch nicht in anderen Abschnitts-Elementen vorkommen – es soll den Hauptinhalt einer Seite markieren, nicht den Hauptinhalt eines Abschnitts der Seite. Ein korrekt verwendetes <main>-Element hat demnach keine <article>, <aside>, <footer>, <header> oder <nav>-Elemente als Vorfahren und ist das einzige Element seiner Art auf der Seite.

Als Bonus hat <main>, wie alle anderen neuen HTML5-Elemente auch, fest eingebaute ARIA-Eigenschaften. Das bedeutet im Endeffekt, dass man bei der korrekten Verwendung von <main> ohne zusätzlichen Aufwand eine zugänglichere Webseite erstellt, da das neue Element automatisch ein role="main" trägt. Dank <main> wird es in Zukunft ziemlich schwierig, diese Annotation zu vergessen.

Braucht man <main> überhaupt?

Einige haben argumentiert, dass man das neue Element gar nicht bräuchte, denn es wäre ja möglich, den Hauptinhalt einer Webseite einfach dadurch zu kennzeichnen, dass man ihn „den Rest“ sein lässt. Beispiel:

<!doctype html>
<meta charset="utf-8">
<title>Katzenbilder24.com</title>

<header>
  <h1>Katzenbilder-Blog</h1>
  <nav>
    <ul>
      <li><a href="/">Start</a></li>
      <li><a href="/about">Über</a></li>
    </ul>
  </nav>
</header>

<article>
  <h2>Flauschiges Kätzchen</h2>
  <p>Text, Bild...</p>
</article>
<article>
  <h2>Pelziges Kätzchen</h2>
  <p>Text, Bild...</p>
</article>

<aside>
  <section>
    <h2>Tagcloud</h2>
    <p>Tags, Tags, Tags</p>
  </section>
  <section>
    <h2>Blogroll</h2>
    <p>Links, Links, Links</p>
  </section>
</aside>

Auch ohne <main> ist klar, was hier der Hauptinhalt ist; alles, was nicht in <header> und <aside> steht, also die Ansammlung der Article-Elemente. Dank role-Attribut ist auch der Barrierefreiheit so viel Genüge getan, wie es mit dem neuen Element der Fall wäre. Es gibt aber vier gute Argumente, die für die Einführung des neuen Elements sprechen:

  • Ein Bereich, der der Hauptinhalt einer Webseite ist, kommt auf vergleichsweise vielen Webseiten vor. Vermutlich auf den meisten. Insofern ist es naheliegend, hierfür ein eigenes Element einzuführen, denn schließlich haben andere häufig auftretende Konstruktionen wie z.B. Navigationen ja auch ihre eigenen Elemente.
  • Aus eigener Erklärbär-Erfahrung kann ich berichten, dass HTML5-Neulinge, wenn man sie Markup schreiben lässt, fast immer den Hauptinhalt in ein Extra-Element Marke <section id="main"> kapseln. Es scheint so zu sein, dass es autorenfreundlich wäre, dafür ein passendes Werkzeug d.h. das neue Element bereitzustellen.
  • Es wäre zwar möglich, manuell role="main"-Attribute zu vergeben, aber es ist zu bezweifeln, dass das wirklich auf breiter Front passiert. Mit dem neuen Element kann das nicht mehr vergessen werden, was (korrekte Verwendung des Elements vorausgesetzt) ohne zusätzlichen Aufwand der Zugänglichkeit der Webseite guttäte – weniger Arbeit für den Autoren, mehr Spaß beim Benutzer.
  • Die HTML Design Principles sagen ganz klar: In case of conflict, consider users over authors over implementors over specifiers over theoretical purity

Bis auf die theorietreue Sparsamkeitsfraktion würden also alle Beteiligten von der Einführung des <main>-Elements profitieren. Bleibt also nur die Frage: wann kommt die Einführung?

Welche Browser unterstützen <main>?

Zur Zeit gibt es das neue (wirklich sehr neue) Element nur als Experimental-Implementierung in Preview-Versionen von Firefox und Chrome. Das ist allerdings nicht zwingend ein Problem, da die Funktionalität von <main> händisch nachgerüstet werden kann. Vorausgesetzt der Browser verarbeitet das Element prinzipiell richtig (was alle Browser außer IE 6, 7 und 8 machen sollten), so muss es nur richtig formatiert und mit den passenden ARIA-Attributen versehen werden. Heißt also: display:block im CSS vergeben und bei der Benutzung in HTML nicht das Attribut role="main" vergessen. Dies wird zwar, sobald alle Browser das neue Element nativ unterstützen, doppelt gemoppelt sein, aber das ist, wenn überhaupt, ein Problem, dessen Lösung man sicher guten Gewissens auf diesen fernen Zeitpunkt vertagen kann.

Wie immer gilt aber, dass in Sachen HTML5-Markup keine übermäßige Eile geboten ist. Alle „alten“ Webseiten werden auch in Zukunft ohne <main> ganz wunderbar funktionieren – nur wenn ein Redesign ansteht, lohnt es sich, über den Einsatz des neuen Elements nachzudenken.

Kommentare (16)

  1. erlehmann

    2. Januar 2013, 15:51 Uhr

    Also wenn ich jetzt <main role=main> machen muss, damit es geht, warum nicht gleich <div role=main>?

  2. Peter Kröner

    2. Januar 2013, 16:03 Uhr

    Wenn wir davon ausgehen, dass <main> tatsächlich demnächst Standard wird, wird die Div-Variante dann einfach nicht die richtige sein. Zitat HTML5-Specs:

    Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose

    Das ist natürlich zum jetzigen Zeitpunkt alles ein wenig spekulativ. Und man könnte behaupten, dass der Fehler dann rein semantiktheoretisch wäre und das Div zumindest in Sachen Barrierefreiheit genau so gut funktionieren würde.

    Am Ende könnte es sein, dass sich die Frage gar nicht stellt. Die Browser, die das neue Element schon unterstützen, implementieren auch die ARIA-Features korrekt. Wenn auch alle anderen von Anfang an richtig machen, kann man sich das Extra-Attribut schenken.

  3. Dennis

    2. Januar 2013, 16:12 Uhr

    Interessant, also ersetzt <main> das bisherige <section role="main">? Ich hatte irgendwo (leider weiß nicht mehr wo) gelesen, dass <main> dazu dient section (mit role main) und aside zu umschließen, also nicht wie in deinem Beispiel oben. Was ist denn nun richtig (bzw. richtiger)?

  4. Peter Kröner

    2. Januar 2013, 16:17 Uhr

    Es kommt auf den Inhalt an. Der Zweck von <main> ist, den Hauptinhalt zu kapseln. Aber was der Hauptinhalt ist, ist offen gelassen – das muss der Autor entscheiden. Im Falle meines Katzenbilderblogs hab ich gesagt, dass die Linklisten in der <aside> kein Teil des Hauptinhalts sind, denn das sind ja keine Katzenbilder. Es gibt sicher aber Fälle bzw. Inhaltskonstellationen, in denen man das anders machen kann und ein <aside> dann Teil des Hauptinhalts ist.

  5. Oliver

    2. Januar 2013, 16:45 Uhr

    Ich hab eh nie verstanden, warum es das noch nicht gibt.

  6. ekle

    2. Januar 2013, 17:20 Uhr

    Cool wäre mal ein Beispiel Dokument, was all die neuen Struktur-Tags enthält, und weiter gepflegt wird. So ähnlich wie die HTML5 Boilerplate aber ohne Design, nur mit Struktur Informationen. Von <aside> höre ich z.b. das erste mal.

  7. Francesco

    2. Januar 2013, 19:40 Uhr

    @ekle: Sowas wie HTML5 Bones vielleicht?

  8. Robert Agthe

    3. Januar 2013, 00:50 Uhr

    Kann nich mal jemand nen Tool bauen, der einen den ganzen Käse wegabstrahiert ? :D

  9. Peter Kröner

    3. Januar 2013, 00:51 Uhr

    Nö. Das Tool müsste ja deinen Inhalt verstehen.

  10. Robert Agthe

    3. Januar 2013, 01:13 Uhr

    Ja, wäre ja mal was. Ich sag dem teil einfach was ich ins Internetz schreiben will, und zack da stehts. Ach ne, dass war ja Facebook.

  11. Christian

    27. November 2013, 17:17 Uhr

    Wie ist der Stand denn heute? Kann man bereits ohne Kompromisse einsetzen?

  12. Peter Kröner

    27. November 2013, 22:59 Uhr

    Grundsätzlich schon. Mit dem html5shiv klappt's auch in älteren Browsern. Zwar sind sich W3C und WHATWG noch immer nicht in allen Details einig, aber dass das neue Element kommt, scheint außer Frage zu sein. Ich werde deine Frage beizeiten in einem neuen Teil der Fragen-Artikelserie etwas ausführlicher beackern, aber wie gesagt: lass dich nicht aufhalten!

  13. Nils

    26. Dezember 2013, 10:21 Uhr

    Vielleicht darf ich in dem Kontext mal eine Frage einstreuen, die mich schon immer ein bisschen verwirrt hat:
    Ist nicht die Verwendung <section role="main">, wie sie Dennis oben angesprochen hat, nicht falsch?

    The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

    Also entweder <div role="main"></div> oder <main></main> aber nix anderes?

  14. Peter Kröner

    30. Dezember 2013, 18:39 Uhr

    Ich halte es für etwas schwierig, hier das eine für falscher oder für richtiger zu erklären. Grundsätzlich gilt, dass man immer das passende Element verwenden sollte und nichts anderes. So gesehen wären <div role="main"> und <section role="main"> beide nicht richtig, denn es gibt ja <main>.

    Wenn wir uns dann dazu entschließen (aus welchen Gründen auch immer) es falsch zu machen, sehe ich auch keinen so großen Unterschied zwischen <div> und <section> ausmachen. Für das <div> spricht, dass es genau wie <main> keinen Eintrag in der erzeugt, so dass das vermutlich die bessere Wahl wäre. Aber man muss auch ganz ehrlich sagen, dass wir uns, wenn wir mit der Outline argumentieren, schon ganz weit draußen in der Theoriewüste bewegen. Für alles was relevant ist (SEO, Lesbarkeit des Quelltexts, Barrierefreiheit) ist es wirklich ziemlich egal, solange das role-Attribut da ist.

    Es gilt wie immer die Faustregel für semantisches HTML: wenn man die Wahl zwischen A und B hat und nach 5 Minuten Nachdenken und Recherche nicht zweifelsfrei klar ist, was richtiger ist, ist es vermutlich ziemlich egal.

  15. Micheal Röhwer

    31. Januar 2014, 22:56 Uhr

    Hi,

    Also meine Projekte erstelle ich immer mit dem folgendem Schema:

    <style>
    .hidden { position: absolute; clip: rect(2px 2px 2px 2px); /* IE6 & 7 */ clip: rect(2px, 2px, 2px, 2px); }
    </style>
    <header>
    <h1>Katzenbilder-Blog</h1>
    <nav>
    <h2 class="hidden">Nav Überschrift</h2>
    <ul>
    <li><a href="/">Start</a></li>
    <li><a href="/about">Über</a></li>
    </ul>
    </nav>
    </header>
    <main>
    <h2 class="hidden">Main Überschrift</h2>
    <article>
    <section>
    <h3>Flauschiges Kätzchen</h3>
    </section>
    <section>
    <h3>Pelziges Kätzchen</h3>
    </section>
    </article>
    <aside>
    <section>
    <h3>Tagcloud</h3>
    </section>
    <section>
    <h3>Blogroll</h3>
    </section>
    </aside>
    </main>
    <footer>
    <h2 class="hidden">footer Überschrift</h2>
    </footer>

    einfach mal mit dem Outliner kontrollieren:

    Was hältst du von dieser Semantik?

  16. Peter Kröner

    31. Januar 2014, 23:09 Uhr

    Wenn „Flauschiges Kätzchen“ und „Pelziges Kätzchen“ hier keine zwei Blogartikel sondern auch wirklich zwei Teile eines Artikels sein sollen, dann sieht das ganz gut aus. Aber wozu der class="hidden"-Kram?

Die Kommentarfunktion ist seit Juli 2014 deaktiviert, weil sie zu sehr von Suchmaschinenoptimierern für manuellen Spam mißbraucht wurde. Wenn du Anmerkungen oder Fragen zum Artikel hast, schreib mir eine E-Mail oder melde dich via Twitter.

Folgt mir!

Kauft mein Zeug!

Cover der HTML5-DVD
Infos auf html5-dvd.de, kaufen bei Amazon

Cover des HTML5-Buchs
Infos auf html5-buch.de, kaufen bei Amazon

Cover des CSS3-Buchs
Infos auf css3-buch.de, kaufen bei Amazon