Contao-Extensions vorgestellt: Semantic HTML5

Mittlerweile ist HTML5 auf dem Weg, im Massenmarkt anzukommen. Moderne Browser beherrschen den neuen Standard ohnehin, und einem veralteten Internet-Explorer kann man mit ein paar Brocken JavaScript prima auf die Sprünge helfen. Fehlt nur noch das CMS - hier ist die Situation etwas unbequemer. Das liegt nicht an der grundsätzlichen Unterstützung von HTML5, sondern daran, dass semantische Elemente nur sehr schlecht automatisiert erstellt werden können.

Beispielsweise bietet Contao seit Version 2.10 grundsätzlich die Ausgabe im HTML5-Format an. Bei der Gliederung in <header>,<nav>,<article> und <footer> bereits von Semantik zu sprechen ist jedoch etwas übertrieben. HTML5 bietet mehr an inhaltlichen Auszeichnungen, und dieses mehr will auch sinnvoll angelegt und verwaltet werden.

Ein Beispiel: Contao packt von Haus aus einen Artikel in das Tag <article> - was aber, wenn eine Seite mehrere Artikel besitzt? Dann wird <article> auch mehrfach ausgegeben. Das kann richtig sein, muss es aber nicht, denn die Spezifikation nennt als Anhaltspunkt für <article>, dass dieser Inhalt "an independent, self-contained part" (also ein unabhängiger, für sich selbst stehender Teil) einer Webseite ist. Also auch in dieser Form woanders (beispielsweise in einem Newsfeed) stehen kann.

Wenn dieser <article> in Beziehung zu anderem Inhalt steht, dann ist es eine <section> - wenn keine Beziehung besteht, dann ein eben <div>. Um die Möglichkeiten noch weiter zu vergößern, kann dann <section> auch noch benutzt werden, um einen langen <article> in Bereiche zu gliedern. Ooops.

So weit, so gut - und leider ist an dieser Stelle schon deutlich, dass ein hardcodiertes Zufügen von HTML-Tags nicht funktionieren kann. Und dass es erst recht nicht funktionieren kann, wie Contao das in Version 2.10.x gemacht hat  - alle Texte sind <article>, von <section> (und ebenso wenig wie von anderen Elementen) keine Spur. Eine Extension nimmt sich dieses Problems an und rüstet weitere Möglichkeiten nach. Mittels semantic_html5 ist es möglich, beispielsweiese eine Dokumentstruktur wie folgt aufzubauen:

<section id="main-content">
    <article>
            <h1>Titel</h1>
        <p>Text</p>
    </article>
    <article>
        <h1>Titel</h1>
        <p>Text</p>
    </article>
</section>
<aside class="sidebar">
    <section>
        <h2>Zusatzinformationen</h2>
    </section>
    <section>
        <h2>Weitere Zusatzinformationen</h2>
    </section>
</aside>

Als Grundstruktur schon nicht schlecht, und die Art und Weise, wie Semantic_HTML5 das macht, überzeugt auch. Ein neues Inhaltselement (HTML5-Element) steht nämlich innerhalb eines Artikels zur Verfügung. Legt man eins neu an, dann werden automatisch ein öffnendes und ein schließendes Element erzeugt. Im Artikel selbst werden dann die Inhalte zwischen diese 'sematischen Klammern' eingefügt - oder auch per Drag & Drop schnell hereingezogen. Das ist einfach.

Dazu kommt, dass der vordefinierte Satz an HTML5-Strukturelementen, den die Extension zur Verfügung stellt, nicht abschließend ist sondern nach Bedarf erweitert werden kann. <hgroup> ist genau so wenig ein Problem wie andere Strukturelemente, Microformate und vieles mehr.

Bleibt trotzdem, dass man sich beim Artikelaufbau ein paar mehr Gedanken machen muss. Ist es ein Artikel, oder sind es mehrere? Gibt es Sections? Auf die Inhalte kommt es an.

Und obendrein entfaltet HTML5-Semantik erst die vollen Möglichkeiten, wenn Seiten nicht mehr in Containern wie #left, #right und #main stattfinden (was ohnehin noch nie eine gute Idee war, weil eine Positionsangabe wie #left nichts im Inhalt zu suchen hat ...), sondern wenn ein robustes Gridsystem genutzt wird, dass alle Inhalte in einem Stück (innerhalb von #main) ausgibt und zur Positionierung dann Auszeichungen mit Klassen (<span class="grid_4">foo.bar</span>) nutzt.

In jedem Fall ist Semantic_HTML5 ein mächtiges (und beinahe unverzichtbares) Werkzeug für Contao und modernes Webdesign.

Link zum Extension-Repository: semantic_html5
Empfehlung: Unbedingt laden, wenn man Webseiten semantisch auszeichnen möchte.