Mittwoch,
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.

 


Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

Dieser Eintrag kann nicht mehr kommentiert werden.