TAG 2 · HTML

HTML: Listen

Listen werden auf Websites sehr häufig verwendet. Zum Beispiel für Aufzählungen, Schritt-für-Schritt-Anleitungen, Menüs oder übersichtliche Informationen.

1) Ungeordnete Liste – <ul>

Eine ungeordnete Liste wird mit <ul> erstellt. Die einzelnen Einträge werden mit <li> geschrieben. 

<ul>
  <li>Apfel</li>
  <li>Banane</li>
  <li>Orange</li>
</ul>
So sieht das aus:
  • Apfel
  • Banane
  • Orange

Standardmäßig zeigt der Browser vor jedem Eintrag einen Aufzählungspunkt an.

2) Geordnete Liste – <ol>

Eine geordnete Liste wird mit <ol> erstellt. Der Browser nummeriert die Einträge automatisch. 

<ol>
  <li>Erster Schritt</li>
  <li>Zweiter Schritt</li>
  <li>Dritter Schritt</li>
</ol>
So sieht das aus:
  1. Erster Schritt
  2. Zweiter Schritt
  3. Dritter Schritt

Eine geordnete Liste ist besonders sinnvoll, wenn die Reihenfolge wichtig ist.

3) Das <li>-Element

<li> steht für „List Item“ und beschreibt einen einzelnen Eintrag einer Liste. 

<ul>

  <li>Eintrag 1</li>
  <li>Eintrag 2</li>
  <li>Eintrag 3</li>

</ul>

Ein <li> sollte normalerweise innerhalb einer <ul> oder <ol>-Liste verwendet werden.

4) <ul> oder <ol>?

<ul> Die Reihenfolge ist egal.

Beispiel:
Zutaten, Eigenschaften oder Stichpunkte.
<ol> Die Reihenfolge ist wichtig.

Beispiel:
Anleitungen oder Arbeitsschritte.
<li> Ein einzelner Eintrag innerhalb einer Liste.

5) Verschachtelte Listen

Listen können auch ineinander verschachtelt werden. Dadurch können Unterpunkte erstellt werden. 

<ul>

  <li>
    Obst

    <ul>
      <li>Apfel</li>
      <li>Banane</li>
    </ul>

  </li>

  <li>
    Gemüse

    <ul>
      <li>Karotte</li>
      <li>Paprika</li>
    </ul>

  </li>

</ul>
Beispiel:
  • Obst
    • Apfel
    • Banane
  • Gemüse
    • Karotte
    • Paprika

6) Listen für Anleitungen

Für Arbeitsschritte eignet sich meistens eine geordnete Liste. 

<ol>
  <li>Visual Studio Code öffnen</li>
  <li>Eine HTML-Datei erstellen</li>
  <li>Den Code eingeben</li>
  <li>Die Datei im Browser öffnen</li>
</ol>
Beispiel:
  1. Visual Studio Code öffnen
  2. Eine HTML-Datei erstellen
  3. Den Code eingeben
  4. Die Datei im Browser öffnen

7) Listen für Stichpunkte

Wenn die Reihenfolge keine Rolle spielt, eignet sich eine ungeordnete Liste. 

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

8) Typische Fehler

  • <li> außerhalb einer Liste verwenden.
  • <ul> und <ol> verwechseln.
  • Bei einer geordneten Liste die Nummern selbst einzutippen. Der Browser macht das automatisch.
  • Beim Verschachteln die Struktur der öffnenden und schließenden Tags vergessen.

Merke

  • <ul> = ungeordnete Liste
  • <ol> = geordnete Liste
  • <li> = einzelner Listeneintrag
  • Die Nummerierung einer <ol> übernimmt der Browser.
  • Listen können auch verschachtelt werden.

9) Mini-Übung

Erstelle auf deiner eigenen Website zwei Listen:

  1. Eine ungeordnete Liste mit mindestens fünf Dingen, die du magst.
  2. Eine geordnete Liste mit mindestens fünf Schritten für eine beliebige Anleitung.

Zusatz: Erstelle eine verschachtelte Liste mit mindestens zwei Unterpunkten.

```