HTML - Strukturierung - Div-Suppe
1. Was'n dat?
Darunter versteht man einfach gesagt die Neigung, anstelle alter Layouttabellen dieselbe(!) Struktur mit <div>-Elementen
nachzubauen. Leider ist das der völlig falsche Weg, da jedwede semantische Bedeutung der Inhalte flöten geht. Darum zeige ich euch mal,
wie anno Tobak die Seiten aussahen und was man dann daraus gemacht hat. Allerdings in sehr vereinfachter Form, hier geht es (schon
wieder) nur um das Prinzip.
2. Eine Navigation
Alter Müll
<table border="0" ...>
<tr>
<td><a href="...">Bla</a></td>
</tr>
<tr>
<td><a href="...">Blubb</a></td>
</tr>
...
</table>
Neuer Müll
<div class="navi">
<div class="break"><a href="...">Bla</a></div>
<div class="break"><a href="...">Blubb</a></div>
...
</div>
3. Inhalt
Alter Müll
<table border="0" ...>
<tr>
<td class="headline">Überschrift</td>
</tr>
<tr>
<td class="fliesstext">Blubber, schwall, jodelblah</td>
</tr>
...
</table>
Neuer Müll
<div>
<div class="headline">Überschrift</div>
<div class="fliesstext">Blubber, schwall, jodelblah</div>
</div>
4. Fomulare
Alter Müll
<table border="0" ...>
<tr>
<td>Vorname</td>
<td><input type="text" .../></td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" .../></td>
</tr>
...
</table>
Neuer Müll
<div>
<div>
<span class="titel">Vorname</span>
<span><input type="text" .../></span>
</div>
<div>
<span class="titel">Name</span>
<span><input type="text" .../></span>
</div>
...
</div>
An letzterem Beispiel könnt ihr auch noch sehen, das es ebenfalls eine <span>-Suppe geben kann. Gut, die tritt nicht so häufig
auf, passt aber ebenfalls in das Bild.
5. Und wie macht man es richtig?
Das ist eigentlich ziemlich einfach, aber selbst ich halte mich nicht immer daran. Schaut euch ruhig mal meinen Quellcode an, da gibt es noch die ein oder andere Verbesserungsmöglichkeit. Gut, bei mir ist das die Macht der Gewohnheit, euch aber zeige ich jetzt, wie man es richtig macht.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt