10 Sauberer HTML-Code unterstützt das HTML lernen

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. du selber siehst deinen Fehler schneller
5. dein Lehrer sieht gemachte Tippfehler schneller

Diesen sauberen HTML-Code machst du eigentlich nur für dich. Dem Webbrowser ist es egal, ob er den Inhalt in einer einzigen Zeile bekommt oder wenigstens mit Umbrüchen oder mit Einrückungen. 

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

<p>Hier fängt unser erster Abschnitt mit seinem Inhalt an. 
Dabei kannst du 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. Diese
Version ist übersichtlicher.
</p>

Mit Einrückungen arbeitest du, wenn mehrere HTML-TAGs geschachtelt werden, 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 du die folgenden HTML-TAGs (noch) nicht kennst – anhand vom Aufbau und den Einrückungen siehst du 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 siehst du sehr schön, dass alleine durch die Darstellung ein Verständnis möglich ist (obwohl wir bisher keine Tabellen hatten). Du siehst auf einen Blick, wo die Tabellen anfangen und aufhören.

So sollte z. B. ein Tabellenaufbau dann aussehen. Acht auf die Einrückungen, die die einzelnen Zellen verdeutlichen. Dazu aber später mehr. Nutze also Einrücken und Leerzeilen für eine gute Übersicht.

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