<ul>: Das ungeordnete Listen-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <ul> HTML Element repräsentiert eine ungeordnete Liste von Elementen, die typischerweise als Aufzählungsliste dargestellt wird.

Probieren Sie es aus

<ul>
  <li>Milk</li>
  <li>
    Cheese
    <ul>
      <li>Blue cheese</li>
      <li>Feta</li>
    </ul>
  </li>
</ul>

li {
  list-style-type: circle;
}

li li {
  list-style-type: square;
}

Attribute

Dieses Element umfasst die globalen Attribute.

compact Veraltet

Dieses boolesche Attribut deutet an, dass die Liste in einem kompakten Stil gerendert werden soll. Die Interpretation dieses Attributs hängt vom User-Agent ab und funktioniert nicht in allen Browsern.

Warnung: Verwenden Sie dieses Attribut nicht, da es veraltet ist: Verwenden Sie stattdessen CSS. Um einen ähnlichen Effekt wie das compact Attribut zu erzielen, kann die CSS-Eigenschaft line-height mit einem Wert von 80% verwendet werden.

type Veraltet

Dieses Attribut legt den Aufzählungsstil für die Liste fest. Die unter HTML3.2 und der Übergangsversion von HTML 4.0/4.01 definierten Werte sind:

circle
disc
square

Ein vierter Aufzählungstyp wurde in der WebTV-Schnittstelle definiert, jedoch wird er nicht von allen Browsern unterstützt: triangle.

Ist es nicht vorhanden und gilt keine CSS list-style-type Eigenschaft für das Element, wählt der User-Agent einen Aufzählungstyp abhängig von der Verschachtelungsebene der Liste aus.

Warnung: Verwenden Sie dieses Attribut nicht, da es veraltet ist; verwenden Sie stattdessen die CSS list-style-type Eigenschaft.

Nutzungshinweise

Das <ul> Element dient zur Gruppierung einer Sammlung von Elementen, die keine numerische Reihenfolge haben, und deren Reihenfolge in der Liste bedeutungslos ist. Typischerweise werden ungeordnete Listenelemente mit einem Aufzählungszeichen angezeigt, das verschiedene Formen haben kann, wie ein Punkt, ein Kreis oder ein Quadrat. Der Aufzählungsstil wird nicht in der HTML-Beschreibung der Seite definiert, sondern im zugehörigen CSS mit der list-style-type Eigenschaft.
Die <ul> und <ol> Elemente können so tief wie gewünscht verschachtelt werden. Darüber hinaus können die verschachtelten Listen abwechselnd <ol> und <ul> ohne Einschränkung enthalten.
Die <ol> und <ul> Elemente repräsentieren beide eine Liste von Elementen. Sie unterscheiden sich darin, dass beim <ol> Element die Reihenfolge bedeutungsvoll ist. Um zu bestimmen, welches verwendet werden soll, versuchen Sie, die Reihenfolge der Listenelemente zu ändern; wenn sich die Bedeutung ändert, sollte das <ol> Element verwendet werden, andernfalls können Sie <ul> verwenden.

Beispiele

Einfaches Beispiel

html

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

Ergebnis

Verschachtelung einer Liste

html

<ul>
  <li>first item</li>
  <li>
    second item
    <!-- Look, the closing </li> tag is not placed here! -->
    <ul>
      <li>second item first subitem</li>
      <li>
        second item second subitem
        <!-- Same for the second nested unordered list! -->
        <ul>
          <li>second item second subitem first sub-subitem</li>
          <li>second item second subitem second sub-subitem</li>
          <li>second item second subitem third sub-subitem</li>
        </ul>
      </li>
      <!-- Closing </li> tag for the li that
                  contains the third unordered list -->
      <li>second item third subitem</li>
    </ul>
    <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

Ergebnis

Geordnete Liste innerhalb einer ungeordneten Liste

html

<ul>
  <li>first item</li>
  <li>
    second item
    <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
    <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien	Fließinhalt, und wenn die Kinder des `<ul>` Elements mindestens ein `<li>` Element enthalten, wahrnehmbarer Inhalt.
Erlaubter Inhalt	Null oder mehr `<li>`, `<script>` und `<template>` Elemente.
Tag-Auslassung	Keine, sowohl das Start- als auch das End-Tag sind erforderlich.
Erlaubte Eltern	Jedes Element, das Fließinhalt akzeptiert.
Implizite ARIA-Rolle	`list`
Erlaubte ARIA-Rollen	`directory`, `group`, `listbox`, `menu`, `menubar`, `none`, `presentation`, `radiogroup`, `tablist`, `toolbar`, `tree`
DOM-Schnittstelle	[`HTMLUListElement`](/de/docs/Web/API/HTMLUListElement)

Spezifikationen

Specification
HTML # the-ul-element

Browser-Kompatibilität

Siehe auch

Andere listenbezogene HTML-Elemente: <ol>, <li>, <menu>
CSS-Eigenschaften, die besonders nützlich sein können, um das <ul> Element zu stylen:
- die list-style Eigenschaft, um die Anzeigeweise der Aufzählung auszuwählen.
- CSS-Zähler, um komplexe verschachtelte Listen zu verwalten.
- die line-height Eigenschaft, um das veraltete compact Attribut zu simulieren.
- die margin Eigenschaft, um die Einrückung der Liste zu steuern.