Sauberer HTML-Code unterstützt das HTML lernen

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

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

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

Für einen sauberen Code arbeiten Sie Umbrüchen und 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 nun die folgenden HTML-TAGs (noch) nicht kennen – anhand vom Aufbau und den 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>

vorheriges Kapitel: validieren HTML-Seite

nächstes Kapitel: Listen, Aufzählungen