HTML Grundkurs: Listen erstellen
In diesem Tutorial zeigen wir dir, wie du sortierte und unsortierte Listen erstellst. Darüber hinaus zeigen wir dir, wie du Listen verschachtelst.
Die 3 verschiedenen Listentypen
Man unterscheidet im HTML zwischen 3 verschiedenen Listentypen. Es gibt geordnete Listen, ungeordnete Listen und Beschreibungslisten. Alle Listentypen verfügen über ein öffnendes und ein schließendes Tag.
Geordnete Listen, sind nummerierte Listen, bei denen die Reihenfolge der Elemente wichtig ist. Für geordnete Listen verwenden man das OL-Tag. „OL“ steht dabei für „ordered list“, was auf Deutsch „geordnete Liste“ bedeutet.
Bei ungeordneten Listen ist die Reihenfolge der Elemente nicht so wichtig. Standardmäßig werden ungeordnete Listen mit Aufzählungszeichen (englisch: bullet points) versehen. Für ungeordnete Listen verwendet man das UL-Tag. „UL“ steht dabei für „unordered list“, was auf Deutsch „ungeordnete Liste“ bedeutet. Diese Liste verwendet man zum Beispiel für die Auflistung der Menüpunkte einer Navigationsleiste.
Der 3. Listentyp sind Beschreibungslisten. Diese Liste kann man zum Beispiel für Glossare verwenden. Für Beschreibungslisten verwendet man das DL-Tag. Da Beschreibungslisten selten zum Einsatz kommen, gehen wir in diesem Tutorial nicht weiter auf diesen Listentyp ein.
Eine sortierte Liste erstellen
Wir werden dir jetzt zeigen, wie du im HTML eine Liste erstellst.
Öffne dazu deine index.html Datei. Erstelle dann eine geordnete Liste, indem du ein öffnendes und ein schließendes OL-Tag erstellst. Innerhalb des öffnenden und des schließenden OL-Tag erstellst du 4 Einträge, die du jeweils mit einem öffnenden und mit einem schließenden LI-Tag von einander trennst.
Speichere dann deine Datei ab und öffne Sie in einem Browser.
Eine verschachtelte Liste erstellen
Jetzt möchten wir dir noch zeigen, wie du deine Liste verschachtelst. Das bedeutet, wir erstellen jetzt in deiner Liste eine neue Liste. Verschachtelte Listen verwendet man zum Beispiel, um einem Listepunkt Unterpunkte hinzuzufügen.
Öffne deine index.html Datei und füge dem 3. Eintrag deiner sortierten Liste innerhalb der LI-Tags eine neue und unsortierte Liste hinzu. Falls deine Liste nun genau wie meine aussieht, hast du alles richtig gemacht.
Speichere deine Datei ab und öffne Sie wieder in deinem Browser, um das Ergebnis deiner verschachtelten Liste zu sehen.
Im nächsten Tutorial zeigen wir dir, wie du eine Menüstruktur erstellst. Eine Menüstruktur oder auch Navigationsleiste genannt, ist für eine Webseite mit mehreren Unterseiten extrem wichtig.
