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.

Zurück

Einen Kommentar schreiben

Kommentar von Heiko Fuhrmann |

Vielen Dank für den Artikel. Das Thema ist auch bei uns gerade hochaktuell.

Das Modul ist zwar eine große Hilfe, macht die Pflege einer Website für den Endkunden jedoch nicht gerade leichter.

Hoffentlich passiert hier bei Contao selbst noch einiges.

Antwort von Carolina Koehn

Auch bei Contao wird da sicher noch etwas passieren, das ist klar. Was die Bedienung durch Kundinnen und Kunden angeht zahlt sich vermutliche eine kluge Strategie bei der Anlage der Contentelemente aus. Eine Möglichkeit wäre sicher, den Strukturteil gar nicht editierbar zu machen und die Inhalte aus anderen Contentelementen zu beziehen.

Ich werde demnächst mal etwas dazu schreiben, wie man einen semantischen HTML5-Workflow abbildet.

Danke für's Feedback, Heiko. 

 

Kommentar von Peter Müller |

Auch von mir ein herzliches Danke Schön für den Beitrag.

Ich habe die Erweiterung zwar immer noch nicht ausprobiert, aber durch deinen Artikel ist auf der ToDo-Liste es um einige Plätze nach oben gerutscht. Zusammen mit unsemantic ;-)

Hast Du Fragen oder Anregungen? Dann nutze die Kommentarfunktion.

Die Verarbeitung Ihrer Daten erfolgt im Rahmen unserer Datenschutzerklärung.