HTML <li> -Tag


Beispiel

Eine geordnete (<ol>) und eine ungeordnete (<ul>) HTML-Liste:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Weitere „Probieren Sie es selbst“-Beispiele weiter unten.


Definition und Verwendung

Das <li>Tag definiert ein Listenelement.

Das <li>Tag wird in geordneten Listen ( <ol> ), ungeordneten Listen ( <ul> ) und in Menülisten ( <menu> ) verwendet.

In <ul> und <menu> werden die Listenelemente normalerweise mit Aufzählungszeichen angezeigt.

In <ol> werden die Listenelemente normalerweise mit Zahlen oder Buchstaben angezeigt.

Tipp: Verwenden Sie CSS, um Listen zu formatieren .


Browser-Unterstützung

Element
<li> Yes Yes Yes Yes Yes

Attribute

Attribute Value Description
value number Only for <ol> lists. Specifies the start value of a list item. The following list items will increment from that number

Globale Attribute

Das <li>Tag unterstützt auch die globalen Attribute in HTML .


Ereignisattribute

Das <li>Tag unterstützt auch die Ereignisattribute in HTML .



Mehr Beispiele

Beispiel

Verwendung des value-Attributs in einer geordneten Liste:

<ol>
  <li value="100">Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Water</li>
  <li>Juice</li>
  <li>Beer</li>
</ol>

Beispiel

Legen Sie verschiedene Listenstiltypen fest (mit CSS):

<ol>
  <li>Coffee</li>
  <li style="list-style-type:lower-alpha">Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li style="list-style-type:square">Tea</li>
  <li>Milk</li>
</ul>

Beispiel

Erstellen Sie eine Liste in einer Liste (eine verschachtelte Liste):

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Beispiel

Erstellen Sie eine komplexere verschachtelte Liste:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Verwandte Seiten

HTML-Tutorial: HTML-Listen

HTML-DOM-Referenz: Li-Objekt

CSS-Tutorial: Styling-Listen


Standard-CSS-Einstellungen

Die meisten Browser zeigen das <li>Element mit den folgenden Standardwerten an:

li {
  display: list-item;
}