14. Januar 2009
Gestern wurde ich kurzfristig gebeten, ein Shoptemplate zu begutachten. Folgender semantischer Schrecken offenbarte sich unter der Haube eines zunächst einmal optisch durchaus ansprechenden Layouts.
Call me Überschrift
Es ist nicht so, dass es keine Überschriften gab in diesem Template. Das H1-Element war durchaus vorhanden ...
<h1> <strong>Willkommen</strong> <strong>im <span style="color: #ff3301;">e</span>Shop</strong> </h1>
Zunächst stellt sich natürlich die grundsätzliche Frage nach der Notwendigkeit der STRONG-Elemente, aber auch das SPAN-Element zur Hervorhebung des Buchstaben “e” glänzt aufgrund der Inline-Styles auch nicht gerade vor Eleganz. Dabei wäre es so einfach ...
<h1>Willkommen im <span>e</span>Shop</h1>
Und damit wird den ersten Buchstaben auch erwischen, gönnen wir uns eine Zeile CSS ...
h1 span { color: #ff3301; }
Weitere Überschriften wollte die Dokumentenoutine der Webdeveloper-Toolbar leider nicht finden, obwohl das Layout optisch eindeutig eine sogar sinnvolle Überschriftenhierarchie zu verfolgen schien. Also wieder in den Code geschaut und siehe da, da war noch was. H2 bis H4-Elemente fand ich zwar nicht, dafür diese abenteuerliche Lösung ...
<strong class="h2"> ... </strong> ... <strong class="h3"> ... </strong> ... <strong id="test_smallHeader_FirstArticle" class="h4 big"> ... </strong>
Das ist jetzt zwar keine Divits (TM), aber der für dieses Krankheitsbild zuständige Erreger ist mit Sicherheit ein Verwandter ersten Grades. Wozu gibt es in HTML nochmal die Elemente H1 bis H6?
Was mit Anstrichen und so ...
Kennen Sie diese Dinger, die wo einen Punkt vor dem Text haben? Ich habs genau gesehen. Mein Nachbar hat so ein Ding neulich in der Hand gehabt und der hat gemein, das wär’ne ... Liste ... oder so. Naja, man muss ja nicht alles glauben, was die Nachbarn so erzählen. Wenn man weiß, wie DIVs funktionieren, kommt man auch recht gut ohne Listen durchs Leben.
<div class="box">
<div>
<div class="list-item"> ... </div>
<div class="list-item"> ... </div>
<div class="list-item"> ... </div>
<div class="list-item"> ... </div>
</div>
</div>
Schön, nicht? So wenig unterschiedliche Elemente. Man braucht sich fast nichts zu merken. Nicht so wie richtige Listen - mit all den UL’s und LI’s?
<ul class="box"> <li> ... </li> <li> ... </li> <li> ... </li> <li> ... </li> </ul>
Da rüber, dann um rechts um die Ecke und gleich wieder links ...
Menüs sind ja meist das Sahnestück und so war es dann auch hier. Warum der unbekannte Autor in diesem Fall jedoch von seiner Strategie, Listen mit DIV-Elementen zu bauen, abweicht, bleibt vorerst ungeklärt. Fakt ist jedoch, er kann auch mit Listen ... und nicht nur mit einer:
<dl class="box service">
<dt id="tm.service.dd">Service</dt>
<dd>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</dd>
</dl>
Was will uns der Autor damit sagen? Richtig, das ist ein Menü mit einem Titel, in diesem Fall “Service”. Schön auch, dass sich der Autor Gedanken um die semantische Auszeichnung gemacht hat. Schade nur, dass dabei solch ein Unfug entstanden ist. Folgendes Beispiel erfüllt den gleichen Zweck ...
<h6>Service</h6> <ul> <li>...</li> <li>...</li> <li>...</li> <li>...</li> </ul>
Die zahlreichen CSS-Klassen in den Codebeispielen habe ich jetzt bewusst nicht beachtet. Das zugehörige CSS ist aufgrund der vielen verschachtelten DIV-Elemente und langen Klassennamen ebenfalls giganisch und mit Sicherheit nicht pflegbar. Allein für die Darstellung der DL-Liste des Menüs entstammen gibt es innerhalb einer CSS-Datei 4 Anlaufstellen, um einzelne Eigenschaften zu verändern.
Mittwoch, 14.01.09 (17:40 Uhr)
Toll, wie soll ich jetzt noch schlafen können, nach solch einem Gruselmarkup. :)
Mittwoch, 14.01.09 (18:02 Uhr)
Sehr schöne Auflistung, da kann ich echt froh sein, dass ich selten im Code andere Leute wühlen muss, sondern dass eher meine Layouts umgesetzt werden.
Da ists dann aber ach oft so, das ich drauf hinweise was anders sein müsste (;
Mittwoch, 14.01.09 (18:08 Uhr)
Sehr schön geschrieben. Das versüßt einem das IE6-Hunting…
Mittwoch, 14.01.09 (18:13 Uhr)
Das sieht ja wirklich ganz herrlich aus. Nicht. So schlimm hab ich ja noch nicht mal am zarten Anfang meiner HTML-Karriere geschrieben.
Donnerstag, 15.01.09 (00:07 Uhr)
Reizend.
Ich glaube, mein absoluter Liebling ist dieses prägnante, einprägsame id=“test_smallHeader_FirstArticle”. Nichts gegen “sprechende” ids, aber man kann es auch übertreiben ...
Auch die div-Liste geht ja fast noch. Ich hatte aus Deinen entsprechenden tweets eher so eine Ansammlung loser a-Elemente - fein säuberlich durch br-Elemente “getrennt” - erwartet ;-)
Donnerstag, 15.01.09 (00:48 Uhr)
@YellowLed
Die gibts auch, sogar ohne <br>-Trennung. Habe ich nur vergessen, in den Beitrag mit aufzunehmen. Und die DIV-Liste ist doch ein würdiger Ersatz.
Donnerstag, 15.01.09 (16:09 Uhr)
Schade das es immer noch Leute gibt, die so etwas coden. Dabei findet man doch (fast) alles, wenn man sich einmal die Webstandards anschaut.
Mittwoch, 28.01.09 (23:11 Uhr)
hab mich lange durch os und xt commerce templates wühlen müssen, bin froh das ich so etwas zZ nicht mehr ertragen muss!
Leider zahlen noch zu viele Kunden dafür ohne die Qualität einschätzen zu können und fragen sich dann irgendwann warum sie so schlecht gelistet werden.
Danke für diese schöne Lektüre!
Samstag, 08.05.10 (16:23 Uhr)
In der aktuellen OXID-Version ist das HTML aber nicht mehr so schlecht, oder? ;)