HTML-Tag <ul>

❮ Vorige Nächste ❯

Das Tag <ul> verwendet man für die Erstellung von Listen, wo die Veränderung der Reihenfolge von Einträgen ihren Sinn wesentlich nicht ändert.

Jedes Element der Liste muss im Tag <li> platziert werden. Wenn zur Liste die CSS-Stile verwendet wurden, wird der Inhalt des Tages <li> diese Stile einnehmen.

Das Tag <ul> ist ein Blockelement und nimmt die ganze ihm zugängliche Breite ein, seine Höhe hängt von der Größe des Inhalts ab.

Voreingestellt werden die markierten Listen auf der Webseite in Form der Liste dargestellt und fangen mit dem kleinen schwarzen Kreis und dem kleinen Einzug vom linken Rand an.

Für die Erstellung von nummerierten Listen wird das Tag <ol> verwendet.

Syntax

Der Inhalt des Tages wird zwischen den Start- (<ul>) und Endtags (</ul>) platziert.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <ul>
      <li>Listeneintrag</li>
      <li>Listeneintrag</li>
      <li>Listeneintrag</li>
    </ul>
  </body>
</html>

Versuch es selber!

Ergebnis

Voreingestelltes Aufzählungszeichen (schwarzer Kreis) kann man mithilfe des Attributes type verändern.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <ul type="circle">
      <li>Listeneintrag</li>
      <li>Listeneintrag</li>
      <li>Listeneintrag</li>
    </ul>
    <ul type="square">
      <li>Listeneintrag</li>
      <li>Listeneintrag</li>
      <li>Listeneintrag</li>
    </ul>
  </body>
</html>

Versuch es selber!

Ergebnis

Für die Veränderung des Types vom Listeneintrag können auch CSS-Eigenschaften list-style-type oder list-style-image verwendet werden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <h2>Beispiele für ungeordnete Listen:</h2>
    <ul style="list-style-type: square">
      <li>Kalte Getränke</li>
      <li>Heiße Getränke</li>
      <li>Eiscreme</li>
    </ul>
    <ul style="list-style-type: disc">
      <li>Coca-Cola</li>
      <li>Fanta</li>
      <li>Eistee</li>
    </ul>
    <ul style="list-style-type: circle">
      <li>Coca-Cola</li>
      <li>Fanta</li>
      <li>Eistee</li>
    </ul>
  </body>
</html>

Versuch es selber!

Ergebnis

Attribute

Attribut	Wert	Beschreibung
compact	compact	Es verringert die Einzüge und die Entfernungen zwischen den Zeilen. Es wird in HTML5 nicht unterstützt.
type	disc square circle	Es bestimmt den Typ des Markers der Liste. Es wird in HTML5 nicht unterstützt.