| 

.NET C# Java Javascript Exception

8
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 ...

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.

Note: There is a rating embedded within this post, please visit this post to rate it.
html5 html
Weitere News:
Schreibe einen Kommentar:
Themen:
html html5
Entweder einloggen... ...oder ohne Wartezeit registrieren
Benutzername
Passwort
Passwort wiederholen
E-Mail