HTML - Strukturierung - Sauberer Aufbau

1. Anno dunnemals

Früher nahm man es mit sauberem Code weiß Gott nicht so genau. Ich selber habe noch 1999(!) einen Absatz zwar mit einem öffnenden <p>-Tag eingeleitet, ihn aber nie mit einem schließenden abgeschlossen. Gut, damals hat das keine Sau gejuckt. CSS stand noch in den Sternen und von validem HTML-Code hatten die meisten "Entwickler" eh noch nie was gehört. Außerdem war man damals einfach froh, wenn eine Seite so aussah, wie sie aussehen sollte.

2. In unseren Tagen

... muss man sich zwar immer noch mit der korrekten Darstellung eines Auftritts herumschlagen. Aber im Gegensatz zu früher gibt es dafür heute völlig andere Gründe. Damals haben sich die Browser bei der Darstellung nur sehr wenig an Standards orientiert und man presste alles so lange in ein so enges Gerüst bis es passte.

Heute dagegen halten sie sich an Standards und darum ist schlampiger HTML-Code auch eine der Hauptursachen dafür, dass uns die Darstellung einer Seite auch mal um die Ohren fliegt. Darum weise ich vorab schon mal auf dicksten Böcke hin, die gemeinhin so geschossen werden.

3. Falsche Verschachtelung

Hat früher keinen Browser gejuckt, da die Darstellungsmöglichkeiten eh eingeschränkt waren. Heutzutage dagegen muss man sauber arbeiten!

<p>
  Dies ist ein Text mit einem <em>betonten Abschnitt, der
  obendrein noch ein <span>enthält</em></span>.
</p>

Na, fällt es euch auf? Genau die Reihenfolge der schließenden Tags stimmt nicht! Erst kommt ein öffnendes <em> und darin befindet sich ein <span>. So weit so gut. Aber wie sieht die Reihenfolge der schließenden Tags aus? Zuerst kommt das </em> und erst danach das </span>. Es wurde also die Reihenfolge vertauscht. Achtet daher bitte darauf, dass so was nicht passiert.

4. Schließende Tags

Wurden früher sehr gerne vergessen (siehe oben). Und es spielte auch keine große Rolle. Heute wird so was mit dem Tode bestraft. Bildlich gesprochen. Also produziert auf gar keinen Fall so einen Steinzeitmist.

<ul>
  <li>Bla
  <li>Blubb
  <li>blubber
</ul>
<p>Ein Text
<p>Noch ein Text

5. Block- in Inline-Elementen

Fand man früher fast nie, da man eh nur eine begrenzte Anzahl von Tags kannte und zur Verfügung hatte. Außerdem wusste zu der Zeit kaum einer von dem Unterschied, weil man eh nur mit Tabellen gearbeitet hat/arbeiten musste. Heute dagegen ist das anders. Leider wird da besonders mit <div>- und <span>-Elementen ziemlich viel Schindluder getrieben.

<span>
  <div>
    <p>Der Text</p>
  </div>
</span>

Leute!

Block-Elemente wie in diesem Beispiel <div> und <p> haben nichts in einem Inline-Element wie <span> zu suchen. Und das gilt für alle anderen auch. Capice! Außerdem gibt es in dem Zusammenhang noch eine andere Krankheit, aber darauf gehe ich im folgenden Abschnitt ein.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt