<li>

Das <li>-Element (List Item) definiert einen einzelnen Eintrag innerhalb einer Liste. Es darf nur als direktes Kind von <ul> (ungeordnete Liste) oder <ol> (geordnete Liste) stehen. Ohne <li> gibt es keine Listen, und ohne <ul> oder <ol> gibt es kein <li>. Die beiden gehören zusammen wie Schlüssel und Schloss.

Steckbrief <li>

Kategorie: Listen
Art: Block
Attribute: 1
Beispiele: 3
Browser: 5 von 5
E-Mail: 4 von 5
Stand: 03.02.2026

Grundlagen

Jeder einzelne Punkt in einer Liste, ob Aufzählung oder nummerierte Anleitung, wird mit einem <li> definiert. Der Browser kümmert sich automatisch um das Aufzählungszeichen (bei <ul>) oder die Nummerierung (bei <ol>). Du musst dich nur um den Inhalt kümmern.

<li> darf nur innerhalb von <ul> oder <ol> stehen, nirgendwo sonst
Es kann beliebige Inhalte enthalten: Text, Absätze, Bilder, Links und sogar weitere Listen
In einer <ol> hat <li> das optionale value-Attribut, mit dem du die Nummerierung an einer bestimmten Stelle ändern kannst
Der schließende </li>-Tag ist laut HTML-Spezifikation optional, aber es ist gute Praxis, ihn immer zu schreiben

Syntax

index.html

Grundsyntax

<ul>
  <li>Erster Eintrag</li>
  <li>Zweiter Eintrag</li>
  <li>Dritter Eintrag</li>
</ul>

Attribute

1 Attribut

Attribut und Beispiel	Beschreibung
`value` Number value="5"	Setzt den Zählerwert in einer geordneten Liste (ol). Alle nachfolgenden li-Elemente zählen ab diesem Wert weiter.

Beispiele

3 Beispiele

Das value-Attribut funktioniert nur innerhalb einer <ol>. Es setzt die Nummerierung ab diesem Punkt auf den angegebenen Wert. Alle nachfolgenden Einträge zählen von dort weiter:

index.html

value-Attribut

<ol>
  <li>Erster Schritt</li>
  <li>Zweiter Schritt</li>
  <li value="10">Sprung zu Schritt 10</li>
  <li>Automatisch Schritt 11</li>
  <li>Automatisch Schritt 12</li>
</ol>

Listeneinträge können weitere Listen enthalten. Die innere Liste wird innerhalb des <li> platziert, nicht nach dem schließenden </li>:

index.html

Verschachtelte Listen

<ol>
  <li>Projekt aufsetzen
    <ul>
      <li>Repository erstellen</li>
      <li>Dependencies installieren</li>
      <li>Konfiguration anlegen</li>
    </ul>
  </li>
  <li>Code schreiben
    <ul>
      <li>Komponenten erstellen</li>
      <li>Styles definieren</li>
    </ul>
  </li>
  <li>Deployment
    <ul>
      <li>Tests ausführen</li>
      <li>Build erstellen</li>
      <li>Auf Server deployen</li>
    </ul>
  </li>
</ol>

Ein <li> kann weit mehr als nur Text enthalten. Hier ein Beispiel mit Links, Beschreibungen und verschachtelten Elementen:

index.html

Reicher Inhalt in Listeneinträgen

<ul style="list-style: none; padding: 0;">
  <li>
    <strong><a href="/docs/html">HTML lernen</a></strong>
    <br>
    <span>Die Grundlage jeder Webseite. Beginne hier.</span>
  </li>
  <li>
    <strong><a href="/docs/css">CSS lernen</a></strong>
    <br>
    <span>Mach deine Webseiten schön und responsiv.</span>
  </li>
  <li>
    <strong><a href="/docs/js">JavaScript lernen</a></strong>
    <br>
    <span>Füge Interaktivität und Dynamik hinzu.</span>
  </li>
</ul>

Barrierefreiheit

3 Punkte

Screenreader lesen Position vor: In einer geordneten Liste liest ein Screenreader bei jedem Eintrag die Position an, etwa “Element 2 von 5”. In einer ungeordneten Liste wird der Eintrag als “Aufzählungszeichen” angekündigt. So behalten blinde Nutzer die Orientierung.
Korrekte Verschachtelung ist entscheidend: Wenn du eine Unterliste innerhalb eines <li> erstellst, erkennt der Screenreader die Hierarchie und kündigt die Verschachtelungsebene an. Falsch platzierte Listen (außerhalb von <li>) zerstören diese Struktur.
Leere Listeneinträge vermeiden: Ein <li> ohne Inhalt verwirrt Screenreader-Nutzer, weil der Reader “leer” vorliest. Wenn ein Eintrag keinen sichtbaren Text hat, gib ihm zumindest ein aria-label.

Häufige Fehler

3 Fehler

01 <li> ohne übergeordnetes <ul> oder <ol>

Das ist der häufigste Fehler. Ein <li> direkt in einem <div> oder <body> ist ungültiges HTML. Der Browser rendert es zwar, aber die Listenstruktur geht verloren und Screenreader erkennen keinen Listeneintrag.

02 Verschachtelte Liste außerhalb von <li>

Die innere Liste gehört innerhalb des <li>, nicht danach. Falsch: <li>Text</li><ul>...</ul>. Richtig: <li>Text<ul>...</ul></li>. Der Unterschied ist semantisch wichtig: Die Unterliste gehört zum übergeordneten Eintrag.

03 value-Attribut in <ul> verwenden

Das value-Attribut funktioniert nur in geordneten Listen (<ol>). In einer <ul> wird es einfach ignoriert, was zu Verwirrung führen kann, wenn du eine bestimmte Nummerierung erwartest.

Browser-Kompatibilität

5 von 5

Das li-Element wird von allen Browsern seit den Anfängen des Webs unterstützt. Auch das value-Attribut funktioniert in allen modernen Browsern zuverlässig.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

4 von 5

Listeneinträge werden in den meisten Email-Clients unterstützt, mit den bekannten Einschränkungen bei Outlook.

Apple Mail

Komplett
Gmail

Komplett
Outlook

Teilweise

Outlook setzt eigene Margins und Padding auf Listeneinträge. Verschachtelte Listen können abweichend dargestellt werden.
Thunderbird

Komplett
Yahoo Mail

Komplett

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<li>

Grundlagen

Syntax

Attribute

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter