Die Aufzählung ist schon ein etwas komplexeres Konstrukt aus zwei Verschiedenen Tags: <ul> und </ul> um die Aufzählung an sich zu beginnen bzw. zu beenden und <li> und </li> für die jeweiligen Aufzählungspunkte. Probieren Sie zunächst folgendes Beispiel aus und testen Sie sich dann selbständig durch einige Variationen durch. Sie können Aufzählungspunkte selbst hinzufügen/entfernen und umschreiben.
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
</head>
<body>
<h1>Meine Lieblingsfilme</h1>
<ul>
<li>Pulp Fiction</li>
<li>Donnie Darko</li>
<li>Butterfly Effect</li>
</ul>
</body>
</html>
Sie werden sehen, dass die einzelnen Aufzählungspunkte zwischen den <li></li> Tags etwas nach rechts versetzt sind. Dieses Vorgehen nennt man „Einrücken“ des Codes. Tags der gleichen logischen Zusammengehörigkeit werden dabei durch die Tabulator-Taste etwas nach rechts verschoben.
Genau wie Leerzeichen ignoriert der Browser diese Tabulatoren. Das korrekte Einrücken ist aber ein wesentlicher Bestandteil des Programmierens, da es Ihnen hilft, die Übersicht im Code zu behalten. Gerade bei großen, verschachtelten Codes ist es wichtig, zu wissen welches Tag zu welchem Tag gehört.
Ein Beispiel dafür werden wir uns in Form von „Unter-Aufzählungen“ ansehen. Dabei wird innerhalb eines Aufzählungspunktes, also zwischen <li> und </li> eine neue Aufzählung mit <ul> … </ul> gestartet. Natürlich können wir auch die bisher gelernten Methoden zur Textformatierung innerhalb der Aufzählung verwenden. Sehen wir uns dazu ein Codebeispiel an….
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
</head>
<body>
<h1>Meine Familie</h1>
<ul>
<li>
<h2>Eltern</h2>
<ul>
<li>Mama</li>
<li>Papa</li>
</ul>
</li>
<li>
<h2>Großeltern</h2>
<ul>
<li>Oma mütterlich</li>
<li>Opa mütterlich</li>
<li>Oma väterlich</li>
<li>Opa väterlich</li>
</ul>
</li>
<li><h2>Bruder</h2></li>
</ul>
</body>
</html>
Es wäre mit der Zeit sehr schwer geworden, die Übersicht zu behalten und sich zu merken, welches <ul> zu welchem </ul> und welches <li> zu welchem </li> gehört. Dadurch, dass das Anfangstag jeweils auf gleiche Höhe eingerückt ist wie das Endtag, erkennen Sie auf den ersten Blick, wo die einzelnen Aufzählungen und Unter-Aufzählungen beginnen.