Sauberer HTML-Code unterstützt das Lernen von HTML

Warum überhaupt der Hinweis auf sauberen Code? Dafür gibt es einige Gründe:

  1. WYSIWYG-Editoren machen es nicht :-)
  2. Eine eventuelle Fehlersuche geht später schneller
  3. Nachträgliche Änderungen und Hinzufügen von Informationen ist problemlos
  4. Sie selber sehen Ihre Fehler schneller
  5. Der Kursleiter sieht gemachte Tippfehler schneller

Diesen sauberen HTML-Code machen Sie eigentlich nur für sich selber. Den Webbrowsern ist egal, ob sie den Inhalt in einer einzigen Zeile bekommen oder wenigstens mit Umbrüchen oder mit Einrückungen. Sie zeigen alle 3 Varianten gleich an!

Für einen sauberen Code arbeiten Sie mit Umbrüchen, Leerzeilen und Einrückungen. So sollte z. B. jeder Text-Abschnitt (<p>-TAG) davor und danach eine leere Zeile haben, damit Sie sehen, wo die Abschnitte sind. Sehen Sie folgendes Beispiel:

<p>Hier fängt unser erster Abschnitt mit seinem Inhalt an. 
Dabei können Sie wie hier gezeigt sofort nach dem 
p-Tag anfangen zu schreiben oder...</p>

<p>
wie in diesem zweiten Absatz in der nächsten Zeile nach dem 
p-Tag und am Ende auch wieder eine Zeile freilassen.
</p>

Mit Einrückungen arbeiten Sie bei HTML-TAGs, die mehrere Befehle benötigen, wie z. B. bei Aufzählungen oder Tabellen, die im folgenden Kapitel kommen. So ist auf einen Blick im Quellcode sichtbar, wo Aufzählungen anfangen und aufhören und was zusammengehört. Also auch wenn Sie die folgenden HTML-TAGs (noch) nicht kennen – anhand des Aufbaus und der Einrückungen sehen Sie schnell, was zusammengehört.

<ul>
  <li>erster Aufzählungspunkt</li>
  <li>zweiter Aufzählungspunkt</li>
  <li>dritter Aufzählungspunkt, der mehr Platz benötigt</li>
  <li>nach Ende keine Einrückung mehr</li>
</ul>

Und das Ganze als Negativbeispiel für unübersichtliche Gestaltung des HTML-Codes bei denselben Aufzählungen:

<ul><li>erster Aufzählungspunkt</li><li>zweiter 
Aufzählungspunkt</li><li>dritter Aufzählungspunkt, der 
mehr Platz benötigt</li><li>nach Ende keine 
Einrückung mehr</li></ul>

Am folgenden Beispiel sehen Sie sehr schön, dass alleine durch die Darstellung ein Verständnis möglich ist (obwohl wir bisher keine Tabellen hatten). Sie sehen auf einen Blick, wo die Tabellen anfangen und aufhören.

So sollte z. B. ein Tabellenaufbau dann aussehen. Achten Sie auf die Einrückungen, die die einzelnen Zellen verdeutlichen.

<table>
    <tr>
        <td>
            INHALT
        </td>
        <td>
            INHALT
        </td>
    </tr>
</table>