HTML Listen ul ol li

Einkaufslisten, Navigationsmenüs, Schritt-für-Schritt-Anleitungen – überall sind HTML Listen! Mit <ul>, <ol> und <li> machst du Aufzählungen semantisch korrekt. In diesem Tutorial lernst du alle drei Listentypen.

Einführung in das HTML Listen Tutorial

Was sind HTML Listen

Listen gruppieren zusammengehörige Elemente. Statt Bindestriche in Absätzen zu schreiben, nutzt du richtige HTML-Tags:

• <ul> – Unordered List (Aufzählung mit Punkten)
• <ol> – Ordered List (nummerierte Liste)
• <li> – List Item (einzelnes Listenelement)

Das Schöne: Browser, Screenreader und Google verstehen automatisch, dass es eine Liste ist!

Wann du Listen verwendest

Perfekt für:

• Navigationsmenüs
• Produkteigenschaften
• Schritt-für-Schritt-Anleitungen
• FAQ-Bereiche
• Inhaltsverzeichnisse

Die drei Listentypen im Überblick

Ungeordnete Listen (ul): Reihenfolge egal → Aufzählungspunkte

Geordnete Listen (ol): Reihenfolge wichtig → Nummern

Listenelemente (li): Der Inhalt jedes Punktes

Voraussetzungen

Benötigte HTML Grundkenntnisse

Du solltest HTML-Tags und Attribute verstehen. Falls nicht, hol das kurz nach!

Dein Arbeitsplatz Setup

Texteditor und Browser – mehr brauchst du nicht. Online-Editoren wie CodePen funktionieren auch super zum Experimentieren.

Schritt-für-Schritt-Anleitung

Ungeordnete Listen mit ul erstellen

So sieht eine einfache Aufzählung aus:

<ul>
  <li>Erste Aufgabe erledigen</li>
  <li>Zweite Aufgabe bearbeiten</li>
  <li>Dritte Aufgabe abschließen</li>
</ul>

Browser zeigen automatisch Punkte (•) vor jedem Element. Die kannst du später mit CSS ändern!

Geordnete Listen mit ol aufbauen

Wenn die Reihenfolge wichtig ist – zum Beispiel bei Anleitungen:

<ol>
  <li>HTML-Grundlagen lernen</li>
  <li>CSS-Styling anwenden</li>
  <li>JavaScript hinzufügen</li>
</ol>

Die Nummerierung ist automatisch! Fügst du ein Element hinzu, passt sich alles an.

Bonus: Mit start="5" beginnst du bei einer anderen Zahl.

Listenelemente mit li richtig verwenden

Wichtig: <li> funktioniert NUR innerhalb von <ul> oder <ol>!

Du kannst in li-Elementen fast alles einbauen: Text, Links, Bilder, sogar weitere Listen.

Listen verschachteln

Für hierarchische Strukturen (z.B. Untermenüs):

<ul>
  <li>Frontend-Entwicklung
    <ul>
      <li>HTML-Grundlagen</li>
      <li>CSS-Styling</li>
      <li>JavaScript-Programmierung</li>
    </ul>
  </li>
  <li>Backend-Entwicklung
    <ul>
      <li>Server-Setup</li>
      <li>Datenbank-Design</li>
    </ul>
  </li>
</ul>

Wichtig: Die Unterliste muss INNERHALB des <li> stehen, nicht daneben!

[bildapi id="1" prompt="A clean diagram showing HTML list structure with ul, ol and li elements in a tree format, displaying nested lists with indentation" name="html-lists-structure-diagram" alt="HTML Listen Struktur Diagramm mit ul, ol und li Elementen"]

Code-Beispiele zu HTML

Navigationsmenü

Der häufigste Anwendungsfall:

<nav>
  <ul>
    <li><a href="/home">Startseite</a></li>
    <li><a href="/about">Über uns</a></li>
    <li><a href="/services">Leistungen</a></li>
    <li><a href="/contact">Kontakt</a></li>
  </ul>
</nav>

Das <nav>-Element sagt Screenreadern: "Das hier ist Navigation!"

Nummerierte Anleitung

<ol>
  <li>Erstelle eine neue HTML-Datei</li>
  <li>Schreibe die grundlegende HTML-Struktur</li>
  <li>Füge deine Inhalte hinzu</li>
  <li>Speichere und öffne im Browser</li>
</ol>

Listen mit CSS stylen

Mit CSS kannst du Aufzählungszeichen ändern oder entfernen:

ul { list-style-type: square; }  /* Quadrate statt Punkte */
ul { list-style: none; }         /* Keine Zeichen */

Häufige Fehler & Troubleshooting

Fehler 1: Falsche Verschachtelung

FALSCH:
<ul>
  <ul><li>Subitem</li></ul>
</ul>

RICHTIG:
<ul>
  <li>Item
    <ul><li>Subitem</li></ul>
  </li>
</ul>

Die Unterliste gehört IN das li-Element!

Fehler 2: li außerhalb von ul/ol

Standalone <li> funktioniert nicht! Es muss immer ein ul oder ol drumherum sein.

Fehler 3: Einzelne Listenelemente

Eine Liste mit nur einem Punkt? Dann ist es keine Liste! Nimm besser einen normalen Absatz.

HTML: Best Practices & Tipps

Barrierefreie Listen

Screenreader sagen automatisch: "Liste mit 4 Elementen" – das hilft bei der Orientierung!

Tipps:

• Aussagekräftige Texte in jedem li
• <nav> um Navigations-Listen
• Nicht zu tief verschachteln

Wartbarer Code

Einrücken! Verschachtelte Listen werden sonst unlesbar:

<ul>
  <li>Punkt 1
    <ul>
      <li>Unterpunkt</li>
    </ul>
  </li>
</ul>

[bildapi id="2" prompt="A side-by-side comparison showing properly formatted HTML list code versus messy unformatted code, highlighting clean indentation and structure" name="html-lists-code-comparison" alt="Vergleich zwischen sauberem und unordentlichem HTML Listen Code"]

Fazit zum HTML-Tutorial: Was hast du hier gelernt

Du kennst jetzt die drei Listenbausteine:

• <ul> – Ungeordnete Liste (Punkte)
• <ol> – Geordnete Liste (Nummern)
• <li> – Listenelemente

Damit erstellst du semantisch korrekte Navigationen, Aufzählungen und Anleitungen.

Bereit für mehr? Lerne als Nächstes die HTML Definition Lists kennen – perfekt für Glossare und FAQ-Bereiche!