Das neue HTML5 main Element

written by devangelist on Februar 13, 2013 in HTML and HTML5 with 2 comments

HTML5 ist schon seit einiger Zeit eines der Trend-Themen im Web. Doch wie lange ist es her, dass wir zuletzt etwas wirklich Neues bekommen haben? Die bereits seit Jahren eingeführten, neuen Tags wie section, article, header, footer, etc. haben die Struktur semantisch bereits so weit beeinflusst, dass es recht schwierig ist, eine neues sinnvolles Tag zu finden. Brauchen wir also wirklich noch ein neues Element? Ich sage Ja!

In jeder Webseite findet sich irgendwo im HTML-Code der eigentliche Content der Seite. Gerne verwendet wurde bspw. ein <div id=”wrapper”>, <div id=”main”>, oder im Falle einer ARIA Unterstützung ein Element mit dem Attribut role=”main”. In HTML5 wurde das div von einem <section id=”main”> abgelöst. Anders ausgedrückt: ein Anhaltspunkt, welcher durch eine spezielle Id oder Klasse gekennzeichnet ist.

Mit dem <main>-Element ist dabei ein für alle Mal Schluss und genau diese Vereinheitlichung erläutert den Sinn des Elementes: Es gibt nichts was uns sagt, wo sich der Content der Webseite befindet.

Bei der Optik und im Verhalten wiederspiegelt es ein normales <section>, auch bekannt als <div>. Was hingegen neu ist, ist die eingebaute ARIA-Funktion, welche natürlich zum Vorteil der Barrierefreiheit der Seite kommt. Ein role=”main”-Attribut tut zwar denselben Zweck, aber die breite Masse wird dies nur schwer erreichen.

Es geht also um den Hauptinhalt, kein Hauptinhalt eines Abschnittes! Damit ist gemeint, dass es weder zwei Mal vor kommt, noch Elemente wie <footer> und <header> beinhaltet oder in diesen gekapselt ist.

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8" />
        <title>Das neue main-Element</title>
    </head>
    <body>
        <header>
            <h1>Der HTML Blog</h1>
            <nav>
                <a href="#">Start</a>
            </nav>
        </header>
        <main>
            <article>
                <h2>Was es neues in HTML5 gibt</h2>
                <p>Es gibt neue Tags wie section, aside, article, ...</p>
            </article>
            <article>
                <h2>Das neue main-Element in HTML5</h2>
                <p>Zeigt uns, wo sich der Hauptinhalt befindet</p>
            </article>
        </main>
        <footer>
            Copyright HTML-Blog 2013
        </footer>
    </body>
</html>

Die meisten Browser kennen das main-Element (noch) nicht. Aber keine Sorge, alle gängigen Browser unterstützen dafür unbekannte Tags, welche um richtig angezeigt zu werden, noch eine display:block-Angabe im CSS enthalten müssen. Wenn auf die Barrierefreiheit geachtet wird, sollte trotzdem das role=”main”-Attribut gesetzt werden, selbst wenn dies etwas unlogisch klingt: <main role=”main”>.

main {
    display: block;
}

Weitere Infos gibt es in der W3C-Spezifikation.

Das neue HTML5 main Element: 1 Stern2 Sterne3 Sterne4 Sterne5 Sterne 4,33 von 5 Punkte, 6 abgegebene Stimmen.
Loading ... Loading ...

About the Author

Roberto Bez ist passionierter Webentwickler und TechLead bei der HolidayCheck AG. Für Roberto bedeutet das Entwickeln nicht nur Arbeit, sondern auch Freude, Motivation und täglich neue, aufregende Herausforderungen. Besonders gerne setzt er sich mit neuen Webtechnologien sowie Datenbanken aller Art auseinander und versucht diese in die tägliche Anwendungsentwicklung miteinzubringen. Neben dem Entwickeln trifft man ihn gerne Abends beim Laufen oder im Sommer bei Mountainbike-Touren durch die schönen Berge Südtirols.