skip to content

Archiv

Kann Websitebaker HTML5?

Revival: DIVs sind NUR zum Gestalten da.

Ja, klar! Natürlich. Warum diese Frage dennoch so oft im Forum gestellt wird - und warum die Diskussion immer kontrovers geführt wird - liegt an einigen kleinen Missverständnissen.

HTML5 bedeutet nicht, dass es flutscht und blinkt - dafür ist CSS und Javascript zuständig. Und hier sein auch gleich erwähnt, dass es hier NICHT um Videos, Audio, Canvas und sonstwas geht.

<section> hat nichts mit Section zu tun

Allein durch die DocType-Definition <!DOCTYPE html> im Template wird eine Seite HTML5. Die neuen Tags <article>, <aside>, <header>, <section>... sind dazu nicht nötig. Und: Sie dienen nicht der Gestaltung, sondern der semantisch richtigen Strukturierung.

Was bedeutet das? - ein Beispiel: Schon lange gibt es im Editor neben dem Format "Normal" auch noch das Format "Normal (DIV)". Optisch fällt der Unterschied meistens nur durch andere Abstände auf. Im Sinne der semantisch korrekten Strukturierung sind aber Welten dazwischen: "Normal (DIV)" sollte in HTML5 nicht verwendet werden, weil ein <div> eben keinen Absatz definiert - das macht <p>.

Analog dazu sollen die Tags <article>, <aside>, <header> und <section> (und weitere) die größeren div-Container ersetzen und ihnen eine semantisch richtige Bedeutung geben.

Zur Klarstellung: Das KANN man machen - muss man aber nicht. 

Wozu ist das gut?

Im wesentlichen geht es darum, dass Inhalte maschinell verarbeitet werden können. Ein Suchmaschinen-Spider kann einen mit <article> gekennzeichneten Block einfach aus der Umgebung - also der Seite - herausnehmen und gesondert verwerten. Faktisch bedeutet es in der Regel, dass Inhalte technisch einfacher kopiert werden können und auf anderen Websites erscheinen können. Ob das wünschenswert ist, will ich jetzt nicht beurteilen.

Für Menschen haben die Tags keine Bedeutung, optisch unterscheiden sie sich ja nicht von normalen <div>. Und auch Google wird sich wenig darum kümmern, zum einen weiß Google ohnehin seit Jahren, wie man den Inhalt einer Seite liest, zum anderen werden die Tags sehr häufig falsch genutzt; man kann sich also nicht darauf verlassen.

Für "barrierefreie" Seiten gäbe es theoretische Vorteile, allerdings wird das noch ein schönes Weilchen dauern, bis auch die Screenreader diese nutzen - wenn überhaupt.

Nebenschauplatz: Frameworks

Derzeit poppen massig Frameworks aus dem Boden, die diese neuen Tags nutzen. Inwieweit es sinnvoll ist, die Tags so zu nutzen, wie ein Framework das haben will, ist fraglich: Es führt häufig dazu, dass die eigentliche semantische Bedeutung ad absurdum geführt wird.

Mitdenken ist gefragt

Wer das obige verstanden hat, wird auch verstehen, warum WebsiteBaker von sich aus kein HTML5 produziert: Weil es Sache des Templates und der Moduleinstellungen ist, die von Fall zu Fall verschieden sein können.

Würde WB zb um jeden Abschnitt ein <section> angeben, wäre das semantisch völlig unsinnig: Ist eine Bildergallerie eine <section> oder ein <article>? Oder ist ein Code-Abschnitt <section>? Hängt wohl vom Fall ab.

Wer findet, dass jeder WYSIWYG-Abschnitt ein <article> ist, kann einfach die view.php des Moduls so ändern, dass der Tag ausgegeben wird:

echo '<article>'.$content.'</article>';

Im Template selbst kann man machen, was man will: Es spricht nichts dagegen, die Navigation mit <nav> auszugeben oder den Header mit <header>. Allerdings muss man sich dann um alte Browser kümmern, die diese Tags noch nicht kennen.

Warum im WB-Paket kein HTML5 Template enthalten ist

Das gehört in die Kategorie "Marketing by Stupidity". Es gab schon etliche Anläufe, sie wurden alle abgewürgt. Statt dessen wird auch mit WB 2.8.4 das 10 Jahre alte Tabellen'design' Round und ein paar neuere Designs aus den Internet-50er Jahren ausgeliefert.

Irgendwann wurde zwar ein Contest ausgerufen; die Vorgaben waren so haarsträubend und realitätsfern, dass kein einziger Vorschlag kam. Vielleicht wird einer der Blockierer mit viel Gejammer (Weil er ALLES selbst machen muss) einen Erguss beisteuern. Mal sehen.

 

Back

Kommentare:

13.09.2015

Kurt P.

Audio funktioniert auch mit folgendem HTML5 Code: - Im WBCE neuen Abschnitt Code2 hinzufügen und dort eintragen.

13.09.2015

Kurt P.

audio src="/media/beispiel.mp3" preload="auto" controls /audio

19.09.2015

Andreas

Coraets
Sehr schönes Design mit innovativer Navigation, die sich dennoch leicht und übersichtlich auf Smartphone und Desktop bedienen lässt.
Wenn ich meine neue Seite mit WB und diesem Template annähern schön umgesetzt bekomme freue ich mich jetzt schon.
Danke für die tolle Vorlage :)

Kommentar

Name:

E-Mail (required, not public):

Webseite:

Kommentar :

Up
K