Das Tag <li> definiert die einzelnen Punkte der HTML-Liste. Der Listentyp wird durch entsprechende Tags definiert: <ul> - ungeordnete Liste, <ol> - geordnete Liste, <menu> - Kontextmenü.

Syntax

Das Tag <li> wird gepaart verwendet. In HTML5-Specification kann man das Endtag nicht verwenden.

Das Tag <li> ist ein Block-Element, d.h., dass sein Inhalt eine ganze Zeile braucht, alle weiteren Elemente werden auf andere Zeile übertragen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
       <p>Geordnete Liste:</p>
       <ol>
  	 <li>Büfett</li>
	 <li>Hauptgericht</li>
  	 <li>Salate</li>
	</ol>
	<p>Ungeordnete Liste</p>
	<ul>
  	   <li>Erfrischungsgetränke</li>
  	   <li>Heiße Getränke</li>
  	   <li>Eis</li>
	</ul>
   </body>
</html>

Ergebnis

li beispiel

Um das Tag <li> zu gestalten, verwenden Sie die CSS-Eigenschaft list-style-type.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>Die Eigenschaft list-style-type</h1>
    <p>Ein Beispiel für ungeordnete Liste:</p>
    <ul class="a">
      <li>Kaffee</li>
      <li>Tee</li>
      <li>Coca Cola</li>
    </ul>
    <ul class="b">
      <li>Kaffee</li>
      <li>Tee</li>
      <li>Coca Cola</li>
    </ul>
    <p>Ein Beispiel für geordnete Liste:</p>
    <ol class="c">
      <li>Kaffee</li>
      <li>Tee</li>
      <li>Coca Cola</li>
    </ol>
    <ol class="d">
      <li>Kaffee</li>
      <li>Tee</li>
      <li>Coca Cola</li>
    </ol>
  </body>
</html>

Ergebnis

li beispiel

Attribute

Attribut Wert Beschreibung
type 1
A
a
I
i
disc
square
circle
Es definiert den Typ des Aufzählungszeichens.
Dieses Attribut wird nicht mehr verwendet. Stattdessen empfehlen wir Ihnen die CSS-Eigenschaft list-style-type oder list-style-image, wodurch man Bilder verwenden kann.
value number Es definiert die Zahl, von dem geordnete Liste anfangen wird. Es können negative Werte verwendet werden.
Es funktioniert nur mit der geordneten Liste.

Das Tag <li> unterschtützt Globale Attribute und Globale Eventhandler.

Browser-Support

chrome edge firefox safari opera

Übe dein Wissen

Was ist die Funktion des HTML-Tags <li>?
Finden Sie das nützlich?