<li>
Zuletzt aktualisiert am 3. Februar 2026
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.
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 optionalevalue-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
<ul>
<li>Erster Eintrag</li>
<li>Zweiter Eintrag</li>
<li>Dritter Eintrag</li>
</ul>Attribute
| Attribut | Typ | Beschreibung | Beispiel |
|---|---|---|---|
value | Number | Setzt den Zählerwert in einer geordneten Liste (ol). Alle nachfolgenden li-Elemente zählen ab diesem Wert weiter. | value="5" |
Beispiele
Nummerierung mit value ändern
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:
<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>Verschachtelte Listen
Listeneinträge können weitere Listen enthalten. Die innere Liste wird innerhalb des <li> platziert, nicht nach dem schließenden </li>:
<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>Listeneinträge mit reichem Inhalt
Ein <li> kann weit mehr als nur Text enthalten. Hier ein Beispiel mit Links, Beschreibungen und verschachtelten Elementen:
<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
- 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 einaria-label.
Häufige Fehler
<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.
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.
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
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.
| Client | Unterstützung | Hinweise |
|---|---|---|
| Chrome | Komplett | — |
| Firefox | Komplett | — |
| Safari | Komplett | — |
| Edge | Komplett | — |
| Opera | Komplett | — |
Email-Kompatibilität
Listeneinträge werden in den meisten Email-Clients unterstützt, mit den bekannten Einschränkungen bei Outlook.
| Client | Unterstützung | Hinweise |
|---|---|---|
| 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 | — |
Verwandte Elemente
Bleib auf dem Laufenden
Erhalte neue Inhalte direkt in dein Postfach
Was erwartet dich?
Neue Artikel & Videos
Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.
Plattform & Kurs-Updates
Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.
Einmal die Woche in deinem Postfach
Kurz, auf den Punkt, kein Spam.