HTML-Tag <li>

❮ Vorige Nächste ❯

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>

Versuch es selber!

Ergebnis

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>

Versuch es selber!

Ergebnis

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.