X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

HTML-Tag <ul>

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>

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>

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>

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.

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


Browser-Support



Finden Sie das nützlich?

Ähnliche Artikel