Neu in HTML 5.1: <main> und <template>
Zu den neuen Elementen im HTML-5.1-Entwurf zählt das
Eine der großen Neuerungen von HTML5 besteht in der Aufwertung semantischer Tags, die die Struktur des Inhalts und nicht die konkrete Form dessen Darstellung beschreiben. Zu diesem Zweck wurden bereits einige neue Elemente eingeführt, wie <header>, <footer>, <section> und <article>.
Rein technisch gesehen entsprechen diese Tags im Wesentlichen zwar einem <div>-Element, doch können beispielsweise Screenreader und Suchmaschinen sie einfacher interpretieren, da das Element selbst bereits eine Bedeutung aufweist.
Der aktuelle Entwurf zu HTML 5.1 [1] sieht einige weitere Elemente vor, die diesen eingeschlagenen Weg fortsetzen.
Das <main>-Element
Zum einen beschreibt der Entwurf das <main>-Element, das ergänzend zu <header>, <footer> & Co. den eigentlichen Inhalt einer Webseite einschließt. Das Tag enthält also ausschließlich solchen Inhalt, der seitenspezifisch und nicht -übergreifend zur Verfügung steht – oder, wie es die Spezifikation [2] formuliert:
"The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application."
Das <main>-Element darf aus nahe liegenden Gründen höchstens einmal pro Webseite verwendet werden, aber beliebig viele Tags enthalten, die den Inhalt weiter untergliedern, wie das <article>-Tag.
Dementsprechend darf das <main>-Element aber weder in einen Header, einen Footer oder ein ähnliches Konstrukt eingebettet werden noch ein derartiges Konstrukt enthalten. Statt dessen muss es auf der gleichen Ebene wie diese verwendet werden.
Da das <main>-Tag bislang lediglich im Rahmen eines Entwurfs vorliegt, wird es derzeit von keinem Webbrowser unterstützt. Da allerdings jeder Webbrowser ihm unbekannte Elemente ignoriert, kann man es dennoch bereits guten Gewissens verwenden.
Dabei ist einzig zu beachten, die CSS-Eigenschaft display dieses Elements auf den Wert block zu setzen. Außerdem empfiehlt der Entwurf, bis auf Weiteres auch das ARIA-Attribut role anzugeben und dessen Wert auf main zu setzen. Wenn eines Tages alle relevanten Webbrowser das <main>-Element unterstützen, kann dieses Attribut dann entfallen.
Das <template>-Element
Ein weiteres Element, das jedoch in einem eigenständigen Entwurf [3] behandelt wird, ist das <template>-Element. Es dient der Definition von HTML-Fragmenten, die die Webseite zur Laufzeit auswerten und verarbeiten kann. Die Spezifikation definiert das Element wie folgt:
"This specification defines the HTML Template element, which allows for the declaration of document fragments which are unused by the document when loaded, but are parsed as HTML and are available at runtime for use by the web page."
Das <template>-Element kann man dabei an jeder beliebigen Stelle einer Webseite innerhalb des <head>- und des <body>-Tags verwenden, bei Bedarf auch mehrfach. Es ersetzt damit das bislang häufig eingesetzte Konstrukt, ein <script>-Tag mit einem vom Webbrowser für Skripte nicht unterstützen Content Type wie text/html anzugeben.
Der Erwartung entsprechend definiert der Entwurf, dass das <template>-Element beliebigen anderen Inhalt aufnehmen kann, dieser zur Ladezeit aber nicht ausgewertet wird. Außerdem wird die Anzeige des Elements unterdrückt und sein Inhalt von Abfragen mit Selektoren wie getElementById oder querySelector ausgeschlossen.
Anders als beim <main>-Tag ist es bei einem <template>-Element gerade nicht wünschenswert, dass der Webbrowser es anzeigt. Da, wie bereits erwähnt, jeder Webbrowser ihm unbekannte Elemente jedoch ignoriert, ist es erforderlich, dem CSS-Attribut display den Wert none zuzuweisen.
tl;dr: Der Entwurf zu HTML 5.1 definiert einige neue Elemente. Dazu zählt unter anderem das <main>-Tag, das den spezifischen Inhalt einer Webseite umschließt. Außerdem gibt es einen weiteren Entwurf, der das <template>-Tag definiert, um clientseitig zur Laufzeit verarbeitete HTML-Fragmente zu verwalten. ( [4])
URL dieses Artikels:
https://www.heise.de/-1812026
Links in diesem Artikel:
[1] http://drafts.htmlwg.org/html/master/
[2] http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element
[3] https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html
[4] mailto:webmaster@goloroden.de
Copyright © 2013 Heise Medien