Einrückung

Wenn du HTML schreibst, dann wird der Code schnell unübersichtlich.

Besonders die Hierarchie der Elemente wird schwer zu erkennen. Webdesigner und Programmierer lösen das Problem, in dem sie den Code lesbar machen.

Code lesbar machen: Leerzeilen und Tabs

Du kannst ausserhalb von Elementen mehrere Leerzeichen nutzen, um die Elemente einzurücken.
Der andere Trick ist, die Elemente in eine neue Zeile zu stellen und, z.B. mit der TAB-Taste, weiter einzurücken als das jeweilige Elternelement.

Vorher/Nachher-Vergleich

Vorher (ohne Einrückung):

&lt;html&gt;&lt;head&gt;&lt;/head&gt;

&lt;body&gt;&lt;div&gt;&lt;p&gt;Wer den ganzen Tag fernsieht, bekommt nichts gebacken.&lt;/p&gt;&lt;p&gt;Wie siehst du das?&lt;/p&gt;&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

Ohne Einrückung sieht das ganze zwar kompakt aus, aber sobald man versucht noch weitere Elemente hinzuzufügen, kommt man schnell durcheinander.

Nachher (mit Einrückung):

&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
    &lt;div&gt;
      &lt;p&gt;Wer den ganzen Tag fernsieht, bekommt nichts gebacken.&lt;/p&gt;
      &lt;p&gt;Wie siehst du das?&lt;/p&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;

Wie sieht es damit aus? Das Ganze ist besser zu erkennen. Man sieht sofort, auf welchen Ebenen die div-Elemente und die p-Elemente liegen.

Code lesbar machen: Leerzeilen und Tabs

Vorher/Nachher-Vergleich

HTML Schnellstart Modul 4