W3docs
de
Anmelden

HTML <li> Tag

Das <li>-Tag definiert Listenelemente in HTML. Beschreibung, Attribute und Beispiele.

Das HTML-<li>-Tag definiert ein einzelnes Element innerhalb einer HTML-Liste. Es ist ein untergeordnetes Element von <ul> (ungeordnete Liste), <ol> (geordnete Liste) oder <menu>. In ungeordneten Listen und Menüs werden Elemente standardmäßig mit einem Aufzählungspunkt dargestellt. In geordneten Listen erhält jedes Element eine Zahl oder einen Buchstaben auf der linken Seite, die automatisch hochgezählt werden.

Diese Seite behandelt die <li>-Syntax, das value-Attribut, die Gestaltung von Listenmarkierungen mit CSS sowie Hinweise zur Barrierefreiheit für Screenreader.

Syntax

Ein Listenelement wird zwischen dem öffnenden <li>- und dem schließenden </li>-Tag geschrieben:

<li>List item text</li>

<li> ist ein Flow-Content-Element: Jedes Element beginnt in einer neuen Zeile und nimmt die gesamte verfügbare Breite ein.

In HTML5 ist das schließende </li>-Tag optional — der Browser schließt das Element automatisch, wenn er das nächste <li> oder das Ende der übergeordneten Liste erreicht. Das Einschließen von </li> wird dennoch für die Lesbarkeit und zur Vermeidung von unerwarteten Ergebnissen in Werkzeugen empfohlen.

Beispiel für geordnete und ungeordnete Listen:

Menüliste – Beispiel des HTML-<li>-Tags – W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <p>Ordered list</p>
    <ol>
      <li>Appetizers</li>
      <li>Main Course</li>
      <li>Salads</li>
    </ol>
    <p>Unordered list</p>
    <ul>
      <li>Cold Drinks</li>
      <li>Hot Drinks</li>
      <li>Ice-Creams</li>
    </ul>
  </body>
</html>
Probier es selbst »

Das value-Attribut

Das value-Attribut legt die Ordinalzahl eines Listenelements fest. Es funktioniert nur bei <li>-Elementen innerhalb einer geordneten (<ol>) Liste und wird in ungeordneten Listen ignoriert.

Das Setzen von value ändert nicht nur dieses eine Element — die Nummerierung setzt sich von dort fort. Im folgenden Beispiel wird das erste Element auf 5 gesetzt, sodass die nachfolgenden Elemente automatisch 6 und 7 erhalten:

5. Coffee
6. Tea
7. Coca Cola

Um nur den Startwert der gesamten Liste zu ändern, ist das start-Attribut am <ol>-Element vorzuziehen. Verwenden Sie value, wenn Sie die Nummer eines bestimmten Elements in der Mitte einer Liste überschreiben möchten.

Gefahr

Der Wert des value-Attributs muss eine gültige ganze Zahl sein. Negative Werte sind erlaubt.

Beispiel des value-Attributs:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document.</title>
  </head>
  <body>
    <ol>
      <li value="5">Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
  </body>
</html>
Probier es selbst »

Gestaltung des Listenmarkierungszeichens

Um das <li>-Element zu gestalten, können Sie die CSS-Eigenschaften list-style, list-style-type, list-style-image und list-style-position verwenden.

Beispiel der Gestaltung des Listenmarkierungszeichens:

list-style-type-Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul.a {
        list-style-type: circle;
      }
      ul.b {
        list-style-type: square;
      }
      ol.c {
        list-style-type: upper-roman;
      }
      ol.d {
        list-style-type: lower-alpha;
      }
    </style>
  </head>
  <body>
    <h1>The list-style-type property</h1>
    <p>Example of unordered lists:</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
  </body>
</html>
Probier es selbst »

Aufzählungspunkte können mit der CSS-Eigenschaft list-style-image durch ein Bild ersetzt werden.

Beispiel eines Bildmarkierungszeichens:

list-style-image-Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        list-style-image: url("https://api.w3docs.com/uploads/media/default/0001/01/03d3f916bd5c266dd5008d5c210478cc730437eb.png");
      }
    </style>
  </head>
  <body>
    <h2>List-style-image property example</h2>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>
Probier es selbst »

Die CSS-Eigenschaft list-style-position gibt an, ob das Listenmarkierungszeichen innerhalb oder außerhalb des Listenelement-Rahmens erscheinen soll.

Beispiel für die Positionierung eines Markers innen und außen:

list-style-position-Eigenschaft

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li {
        border: 1px solid #666;
        padding: 5px;
      }
      .inside {
        list-style-position: inside;
      }
      .outside {
        list-style-position: outside;
      }
    </style>
  </head>
  <body>
    <h2>List-style-position property example</h2>
    <p>Here the list-style is positioned "inside".</p>
    <ul class="inside">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
    <p>Here the list-style is positioned "outside".</p>
    <ul class="outside">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>
Probier es selbst »

Attribute

AttributWertBeschreibung
type1, A, a, I, i, disc, square, circleDefiniert den Aufzählungstyp für geordnete oder ungeordnete Listen. Dieses Attribut ist in HTML5 veraltet. Verwenden Sie stattdessen die CSS-Eigenschaften list-style-type oder list-style-image.
valuenumberGibt den numerischen Wert des Listenelements an. Negative Werte sind erlaubt. Funktioniert nur mit dem <li>-Element innerhalb einer geordneten Liste.

Das <li>-Tag unterstützt die globalen Attribute und die Ereignisattribute.

<li> mit CSS ansprechen

Neben dem Markierungszeichen können Sie den Elementrahmen selbst wie jedes andere Element gestalten. Verwenden Sie den li-Typselektor, um alle Listenelemente anzusprechen, oder begrenzen Sie ihn mit einer Klasse oder einem Nachfahrenselektor auf eine bestimmte Liste:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      /* All list items on the page */
      li {
        padding: 8px;
        line-height: 1.6;
      }
      /* Only items inside lists with class "menu" */
      ul.menu > li {
        list-style: none;
        border-bottom: 1px solid #ddd;
      }
      /* Style the marker color separately */
      li::marker {
        color: #0a7cff;
      }
    </style>
  </head>
  <body>
    <ul class="menu">
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </body>
</html>

Das Pseudo-Element ::marker gestaltet den Aufzählungspunkt oder die Zahl, ohne den Text des Elements zu beeinflussen — praktisch zum Umfärben oder Anpassen der Größe von Markierungszeichen.

Barrierefreiheit

Screenreader behandeln Listen als Gruppe: Sie kündigen die Liste, die Gesamtzahl der Elemente und die Position jedes Elements an (zum Beispiel „Liste, 3 Elemente, Element 1"). Dieser Kontext hilft Benutzern, die Struktur zu verstehen. Halten Sie daher zusammengehörige Elemente in einem <ul> oder <ol>, anstatt eine Liste mit <div>s und Zeilenumbrüchen zu imitieren.

Warnung

Das Entfernen von Aufzählungspunkten mit list-style: none kann dazu führen, dass Safaris VoiceOver das Element nicht mehr als Liste erkennt und die Elementanzahl nicht mehr angezeigt wird. Wenn Sie Markierungen für Navigationsmenüs entfernen, fügen Sie role="list" wieder zum <ul> hinzu, um die Listensemantik zu erhalten.

<ul role="list" style="list-style: none;">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Verwandte Tags

  • <ul> — ungeordnete (mit Aufzählungszeichen versehene) Liste
  • <ol> — geordnete (nummerierte) Liste
  • <menu> — eine Liste von Befehlen oder Menüelementen
  • HTML-Listen — Übersicht aller Listentypen

Übungen

Übung
Was definiert das HTML-li-Tag?
Was definiert das HTML-li-Tag?
Übung
Was passiert in einer geordneten Liste, wenn Sie value=5 beim ersten li-Element setzen?
Was passiert in einer geordneten Liste, wenn Sie value=5 beim ersten li-Element setzen?
Was this page helpful?