Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » HTML lernen – Website erstellen & strukturieren » Listen, Aufzählungen <ul>, <ol>, <li>

Listen und Aufzählungen in HTML

Listen und Aufzählungen kommen laufend vor und sind besonders zu Weihnachten sehr wichtig. Ein Wunschzettel kann auch als Liste angesehen werden. Genauso natürlich To-do-Listen, Telefonlisten und Ähnliches.

Listen mit Spiegelstrichen in HTML

Jeder Punkt in Auflistung wird von dem HTML-TAG <li> umschlossen. Dabei steht <li> für das englische „list item“ = Element der Liste.

Erstellen wir für folgende 3 Aufzählungspunkte eine Liste – stellen Sie sich vor, was als Belag auf Ihre Pizza soll:

  • Schinken
  • und ganz viel Käse, also Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse und nochmals Käse
  • Pilze

Es ist wichtig, wenn ein Punkt sehr viel Text hat, dass ein Umbruch in der folgenden Zeile erfolgt. Was fällt bei dem Text auf?

Er fluchtet bei Ihrem Ergebnis nicht (im Gegensatz zum oben gezeigten). Und wenn wir den HTML-Code validieren lassen, bekommen wir auch eine Fehlermeldung.

Hier lernen wir unseren ersten HTML-TAG kennen, der nicht alleine vorkommen kann. Es muss noch zusätzlich die Art der Liste definiert werden. Hierfür gibt es den HTML-TAG <ul> - dieser umschließt alle Listenelemente:

Am Beispiel wird deutlich, wie die TAGs zusammenspielen und welche TAGs wie geschachtelt sein sollten.

<ul>
   <li>Schinken</li>
   <li>und ganz viel Käse, also Käse Käse Käse Käse Käse Käse 
   Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse Käse 
   Käse Käse und nochmals Käse</li>
   <li>Pilze</li>
</ul>

Wenn wir uns jetzt das Ergebnis im Browser ansehen, fluchtet der Text untereinander und wenn wir den Quellcode validieren lassen, ist er korrekt.

Dabei steht <ul> für das englische „unordered list“ = unsortierte Liste, ungeordnete Liste. Dieser HTML-Befehl hat zur Folge, dass für jedes <li> ein Spiegelstrich in Form eines Kreises gesetzt wird.

Und was es als unsortierte Liste gibt, gibt es auch als sortierte Liste.

Listen mit automatischer Nummerierung

Wenn jetzt eine sortierte (durchnummerierte) Liste benötigt wird, wird das <ul> durch <ol> ersetzt. Dabei steht <ol> für das englische „ordered list“ = sortierte Liste.

Aufgabe sortierte Listen

Erstellen Sie wie im obigen Beispiel eine Liste mit diesem Aussehen. Allerdings dürfen Sie nicht von Hand 1. 2. oder 3. eintippen!!

Das Ergebnis sollte so aussehen:

  1. erster Listenpunkt
  2. zweiter Listenpunkt
  3. x-ter Listenpunkt
Lösung Übung
<ol>
  <li>erster Listenpunkt</li>
  <li>zweiter Listenpunkt</li>
  <li>x-ter Listenpunkt</li>
</ol>

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details