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)
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>
?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: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.
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)?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.Oliver ¶
2. Januar 2013, 16:45 Uhr
Ich hab eh nie verstanden, warum es das noch nicht gibt.
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.
Francesco ¶
2. Januar 2013, 19:40 Uhr
@ekle: Sowas wie HTML5 Bones vielleicht?
Robert Agthe ¶
3. Januar 2013, 00:50 Uhr
Kann nich mal jemand nen Tool bauen, der einen den ganzen Käse wegabstrahiert ? :D
Peter Kröner ¶
3. Januar 2013, 00:51 Uhr
Nö. Das Tool müsste ja deinen Inhalt verstehen.
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.
Christian ¶
27. November 2013, 17:17 Uhr
Wie ist der Stand denn heute? Kann man bereits ohne Kompromisse einsetzen?
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!
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?Also entweder
<div role="main"></div>
oder<main></main>
aber nix anderes?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 dasrole
-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.
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?
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?