Registrieren/Anmelden

Eine Frage stellen

Thema erstellen

In HTML Listen erstellen und stylen: <ul>, <ol> und <li>

Wir werden in HTML Listen erstellen: geordnete, ungeordnete und verschachtelte Listen. Wie wir ihr aussehen verändern und die Aufzählungs-Punkte entfernen.
(Letztes Update von Niklas Baumgärtler am 11.9.2020)

Am Ende wirst du:

  • Geordnete und ungeordnete Listen erstellen können
  • Verschachtelte HTML-Listen erstellen können
  • Die Aufzählungspunkte bei Bedarf entfernen können
  • Die Listen auch sonst stylen können
Diese Einheit überspringen

In dieser Lektion werden wir nun wieder einige neuen HTML-Tags kennenlernen, die wir auf vielen Webseiten antreffen – Listen. Listen sind nicht nur immer dort praktisch, wo es um Aufzählungen geht, sondern auch Bestandteil von fast allen Navigations-Menüs auf Webseiten. Vielleicht hast du schon einmal eines der Navigations-Menüs gesehen, bei denen man ein Unter-Menü sehen kann, sobald man mit der Maus darüber fährt? Die bestehen in den meisten Fällen aus Listen. In einer späteren Lektion werden wir genau so etwas auch programmieren. Deswegen werden wir uns als erstes nun daran machen zu lernen wie wir in HTML Listen erstellen – die brauchen wir nämlich dafür 🙂

1. In HTML Listen erstellen: Die zwei Arten

Grundsätzlich gibt es in HTML zwei Arten von Listen – die ungeordnete Liste und die geordnete Liste. Beide sind, was die Programmierung und ihre Funktion angeht, sehr ähnlich aufgebaut.

Fangen wir mit der ungeordneten Liste an:

1.1 In HTML ungeordnete Listen erstellen

Für eine ungeordnete HTML-Liste brauchen wir zwei neue HTML-Tags, die beide zur zweiten Kategorie der Tags gehören. Sie bilden also mit Hilfe eines öffnenden und eines schließenden Tags einen Block.

Das erste HTLM-Tag, das du dafür benötigst, ist das <ul>-Tag. Das ist kurz für “unordered list”, oder eben ungeordnete Liste. Es steht für eine klassische Aufzählung mit Punkten, aber ohne Nummerierung oder a), b), c). Das <ul>-Tag sagt dem Browser, dass ab diesem Zeitpunkt eine ungeordnete Liste beginnt. Das schließende </ul>-Tag sagt ihm, dass die Liste hier vorbei ist.

Aber alleine mit dem <ul>-Block ist uns nicht geholfen – wir brauchen ja noch die einzelnen Aufzählungspunkte! Die fügen wir wieder mit Hilfe eines weiteren HTML-Tags der zweiten Kategorie dazu, und zwar mit Hilfe des <li>-Tags, das kurz für “list item” oder Listen-Element steht.

Wenn wir also eine ungeordnete Liste mit drei Aufzählungs-Elementen haben wollen, könnte das so aussehen:

<body>
 <ul>
  <li>Punkt 1</li>
  <li>Lustiger Punkt 2</li>
  <li>Pünktchen 3</li>
  </ul>
</body>

Und als Screenshot des Ganzen:

HTML Listen einfügen

Alles, was innerhalb eines <li>-Blocks steht, wird also zu einem Aufzählungs-Punkt, und der <ul>-Block sagt dem Browser, dass es sich um eine ungeordnete Aufzählung handelt.

Gar nicht so schwierig, oder? Dann lass uns zur geordneten Liste weitergehen.

1.2 Geordnete Liste erstellen

Der Unterschied zur ungeordneten Liste liegt einzig und alleine darin, dass du statt dem <ul>-Tag ein <ol>-Tag verwendest. Ansonsten bleibt alles gleich, auch die Sache mit den <li>-Blöcken. Wenn wir unseren Code von vorher einfach gleich lassen und nichts ändern außer die <ul> zu <ol>-Tags zu machen, bekommen wir dieses Bild zu sehen:

HTML geordnete Liste einfügen

Die Aufzählungs-Punkte von vorhin haben sich also in Zahlen nach aufsteigender Reihenfolge verwandelt. Nicht allzu schwierig, oder?

Aber wie kommt man dann beispielsweise auf so etwas wie weiter unten? Auf verschachtelte Listen?

  • Ebene 1
  • Ebene 1
    • Ebene 2.1
    • Ebene 2.2

2. In HTML verschachtelte Listen erstellen

Verschachtelte HTML-Listen kannst du manchmal bei Aufzählungen brauchen, aber das ist nicht ihre mächtigste Eigenschaft. Wirklich interessant wird es dort, wo wir z.B. die Liste der tieferliegenden Ebene mit Hilfe von CSS-Befehlen verstecken, um dann dort wo der Benutzer mit der Maus darüberfährt die tieferliegende Ebene doch anzuzeigen. Dann hast du in kürzester Zeit selbst ein Aufklapp-Menü programmiert!

Aber lass uns erstmal unsere erste verschachtelte Liste anlegen, bevor wir das mit dem Aufklappen angehen. Damit das klappt, musst du einfach innerhalb eines <ul>- oder eines <ol>-Blocks deiner ersten Liste noch eine Liste einfügen. Also zum Beispiel so:

<body>
 <ul>
  <li>Punkt 1</li>
  <li>Lustiger Punkt 2
   <ul>
    <li>Punkt 1 der tieferen Liste</li>
    <li>Punkt 2 der tieferen Liste</li>
   </ul>
  </li>
 </ul>
</body>

Das Ergebnis sieht dann in etwa so aus:

HTML verschachtelte Listen einfügen

Du kannst Listen im Grunde endlos weit ineinander verschachteln, in dem du einfach immer noch eine Liste innerhalb der tieferliegenden Liste einfügst. Auch wenn die Sinnhaftigkeit des Ganzen natürlich irgendwann auch seine Grenzen findet – mehr als 3-4 Ebenen tief wirst du in der Realität kaum verschachteln 😉

Aber was ist, wenn wir z.B. keine Punkte vor der Liste haben wollen? Oder andere Abstände? Zum Glück haben wir noch unsere style.css vom letzten Mal – da tragen wir nun all das ein!

3. Listen mit Hilfe von CSS stylen

Einer der am häufigsten nachgefragten Fragen in Bezug auf Listen neben jener wie wir in HTML Listen erstellen ist jene, wie man die Punkte wegbekommt. Die Antwort ist relativ einfach: Die Liste (also der UL-Block oder der OL-Block) muss den CSS-Befehl “list-style: none;” zugewiesen bekommen.

Entweder löst du das über das style-Attribut des HTML-Elements, z.B. so:

<ul style='list-style: none'>
  <li>Eine Aufzählung</li>
  <li>Zweites Item</li>
</ul>

Oder über einen Eintrag in deiner .css-Datei. Da gibt es nun mehrere Optionen:

ul {
  list-style: none;
}

.meine_liste {
  list-style: none;
}

#meine_liste_die_nur_1x_vorkommt {
  list-style: none;
}

Bei der ersten Option verlieren alle Listen auf deiner HTML-Seite ihre Punkte.

Bei der zweiten Option verlieren nur die Listen auf deiner HTML-Seite ihre Punkte, die das class-Attribut “meine_liste” zugewiesen bekommen haben.

Bei der dritten Option trifft dies nur auf ein einziges HTML-Element zu. Nämlich jenes mit dem id-Attribut “meine_liste_die_nur_1x_vorkommt”.

Egal wie du es gelöst hat, das Ergebnis sollte nun in etwa so aussehen:

HTML Listen einfügen 4

Wenn du nun z.B. den Abstand zwischen den einzelnen Verschachtelungs-Ebenen ändern möchtest, kannst du das tun, indem du den <ul>, <ol> bzw. <li>-Elementen verschiedene Werte in Richtung padding, margin und ihren Unter-Richtungen (wie z.B. padding-top) zuweist.

Versuche z.B., größere Abstände zwischen den einzelnen Aufzählungs-Punkten zu definieren, in dem du das margin-top der <li>-Elemente mit Hilfe der .css-Datei änderst. Ist auch eine super Übung zum Gewöhnen an CSS. Und am Ende, wenn wir uns daran machen unsere erste “richtige” eigene Webseite zu gestalten, wird es gut sein, wenn du dich ein wenig daran gewöhnt hast. Dann geht der Rest schneller 😉

So, das wars auch schon wieder mit dieser Lektion! In der nächsten werden wir uns wieder viel mit CSS beschäftigen. Denn da wir nun endlich alle Grundvoraussetzungen dafür erlernt haben, wird es höchste Zeit, endlich mal selbst diese stylischen Klapp-Menüs zu programmieren 🙂

Du hast nun:

  • Gelernt, wie du geordnete und ungeordnete Listen erstellst
  • Verschachtelte HTML-Listen erstellt
  • Verstanden, wie du die Aufzählungspunkte entfernen kannst
  • Deine Listen mit Hilfe von CSS an deine Bedürfnisse angepasst
Diese Einheit abschließen

Mit deinem kostenlosen Account kannst du:

  • deine selbst programmierte Webseite auf verschiedenen Geräten ansehen und auch deinen Freunden zeigen
  • Fragen an mich und die Community stellen
  • mehr Hilfsmittel benutzen, um dich besser im Kurs zu orientieren