Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

HTML-Tipps für Webentwickler: Jede Woche neu

Hauptinhalte kennzeichnen mit main

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Unabhängig davon, ob es sich bei Ihrem Projekt um eine "große" Website handelt oder eine "kleine", Sie einen Webshop aufsetzen wollen oder einen privaten Blog betreuen – eines haben alle Webseiten gemeinsam: die Basis ist HTML. Profitieren Sie in dieser praktischen Tipps&Tricks-Sammlung von der jahrelangen Erfahrung der Trainerin Florence Maurice, die Ihnen unbekannte Features nahe bringt, zur Übersicht über die einzelnen Versionen verhilft oder oftmals nur mit kleinen, pfiffigen Hinweisen Ihren Alltag als Webdesigner und -programmierer erleichtert.
06:58
  Lesezeichen setzen

Transkript

Das "main"-Element hat einige Besonderheiten. Zum einen wurde es relativ spät eingeführt und zum anderen wird es in der Spezifikation der "WHATWG" und der "W3C" unterschiedlich definiert. Beim "W3C" findet sich das "main"-Element bei den Elementen, die Inhalte gruppieren. Also es steht in einer Reihe mit "p", oder mit "div", oder "figure" und"figcaption". Es ist nicht bei den gliedernden Elementen aufgeführt, also nicht bei den Elementen, wie "section", "art", et cetera. Was ist die Funktion von "main"? "main" soll den Hauptinhalt des Dokuments kennzeichnen, oder den Hauptinhalt der Anwendung. Wichtig ist auch folgender Punkt beim "W3C" ganz deutlich. Es darf genau nur ein "main"-Element in einem Dokument geben und das "main"-Element darf nicht ein Nachkommer von ,,, oder sein. Und es geht noch weiter. Es geht beim "main"-Element wirklich darum den Hauptinhalt einer Datei zu kennzeichnen. Nicht den Hauptinhalt eines Artikels beispielsweise. Sehen wir uns ein Beispiel an. Wir können das "main"-Element eben nehmen, um sagen, das ist der Hauptinhalt. Hierum geht es. Und am nächsten Beispiel wird das noch klarer. Da ist ein vollständiges Dokument abgebildet. Wir haben einen "header". Im "header" befindet sich eine Navigation mit einem "nav"-Element. Und dann kommt das "main"-Element. Das ist der Inhalt, worum es bei dieser Seite geht. Außerhalb des "main"-Elementes, ist hingegen die Navigation, die sich auf allen Seiten befindet. Der "header" befindet sich auch auf allen Seiten und damit ist diese nicht innerhalb von "main". Es kann aber natürlich innerhalb von "main" auch eine Navigation geben. Wenn es sich aber dann dabei, um eine Navigation handelt, die nicht auf alles Seiten vorkommt, sondern genau nur auf dieser. Und diesen Fall haben wir, weil da kann man dann zu den einzelnen Unterpunkten springen. Auch bei den anderen Elementen, wie zum Beispiel bezüglich "footer" und "header", hängt es immer davon ab, was genau damit ausgezeichnet wird. Und je nachdem können diese innerhalb von "main", oder außerhalb stehen. Das Beispiel 41 zeigt ein Beispiel, wo wir zum einen einen "header" außerhalb von "main" haben und ein "header" innerhalb von "main". Der "header" außerhalb von "main" bezeichnet Inhalte, die es auf allen Seiten gibt. Der "header" innerhalb von "main", etwas was eben mit dem Hauptinhalt auf der Seite selbst zu tun hat, und genauso verhält es sich auch mit einem "footer". Den kann es innerhalb von "main" geben, wenn es eben zum Hauptinhalt gehört, oder außerhalb. Das ist dann so ein allgemeiner "footer", der auf allen Seiten zu finden ist. Genauso kann auch ein"aside"-Element zu dem Hauptinhalt gehören. Da haben wir hier ein Beispiel. Dann ist es innerhalb von "main". Es kann aber natürlich "aside" auch verwendet werden beispielsweise für eine Werbung, die auf allen Seiten auf irgendeiner Form vorkommt und nichts mit dem Hauptinhalt zu tun hat. Dann ist dieses "aside" außerhalb von "main". Was machen Browser eigentlich aus dem "main"-Element. Ich habe hier ein kleines Beispiel kopiert. Sehen wir uns das einmal im Firefox an. Und da gibt es auch ein "main"-Element und wir sehen, dass die Standardformatierungen, die damit verbunden sind, ganz minimal sind. Das ist nämlich nur ein "display: block". Dieses "display: block" sollten Sie eventuell auch benutzen, um sicherzugehen, dass es auch in älteren Browsern, wie gewünscht dargestellt wird. Und so wird das beispielsweise auch in "normalize" ergänzt. Sie können beim "main"-Element auch noch "role-main" ergänzen. Laut self-HTML ist das nicht mehr unbedingt notwendig. Es gibt dann auch andere Untersuchungen, die zeigen, dass es einfach noch ein bisschen bessere Unterstützung hat, wenn man das kombiniert. "main" mit "role="main". Das hier ist eine Untersuchung von Jan Hellbusch, der sich das angeschaut hat, wie das mit den aktuellen Screenreadern ausschaut. Was ist den eigentlich der Vorteil von "main" überhaupt? Und das ist eben ein Vorteil für Screenreader. Screenreader können, wenn Sie ein "main"-Element einsetzen, dann dem Benutzer die Option anbieten, direkt zu diesem Hauptinhalt zu springen. Ein bisschen verwirrend ist, dass das "W3C" und die Artbeitsgruppe "WHATWG", sich bezüglich des "main"-Elementes unterscheiden. Ich bin jetzt gerade in der "WHATWG"-Spezifikation und da finde ich den Hinweis, dass es keine Einschränkung gibt, was die Anzahl an "main"-Elementen in einem Dokument betrifft. Das heißt laut "WHATWG", können Sie mehrere "main"-Elemente in einem Dokument nutzen. Laut "W3C" hingegen nicht. Gibt auch die Diskussion, man sollte doch sich da einmal anpassen, aber noch nicht mit einem entgültigen Ergebnis. Wie geht man damit um? Das heißt, beim "W3C" steht deutlich, wir sollen genau nur ein "main"-Element verwenden. Das "WHATWG" sagt, wir dürfen auch mehrere verwenden. Wenn Sie sichergehen wollen es immer korrekt zu machen, dann nehmen Sie nur genau ein "main"-Element, weil das ist natürlich auch laut "WHATWG" erlaubt. Also das "main"-Element dient dazu den Hauptinhalt zu kennzeichnen. Sie umfassen damit die Sachen, die auf der Seite selbst besonders sind. Außerhalb des "main"-Elements hingegen stehen die Inhalte, die auf allen Seiten vorkommen. Sicherheitshalber können Sie dann dafür sorgen, dass es auch in älteren Browsern richtig dargestellt wird mit "display: block". Und der Vorteil liegt eben darin, dass Screenreader damit die Option ihren Nutzern bieten können, direkt zum Hauptinhalt zu springen.