<ul>: Das ungeordnete Listenelement

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>-Element HTML repräsentiert eine ungeordnete Liste von Elementen, die typischerweise als Liste mit Aufzählungszeichen 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 enthält die globalen Attribute.

compact

Dieses boolesche Attribut deutet an, dass die Liste in einem kompakten Stil gerendert werden sollte. Die Interpretation dieses Attributs hängt vom User-Agent ab, und es 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

Dieses Attribut legt den Stil der Aufzählungszeichen 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, aber nicht alle Browser unterstützen ihn: triangle.

Wenn nicht vorhanden und wenn keine CSS list-style-type-Eigenschaft auf das Element angewendet wird, wählt der User-Agent einen Aufzählungstyp in Abhängigkeit von der Verschachtelungsebene der Liste.

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 ihre Reihenfolge in der Liste ist bedeutungslos. Typischerweise werden ungeordnete Listenelemente mit einem Aufzählungszeichen angezeigt, das in verschiedenen Formen wie einem Punkt, einem Kreis oder einem Quadrat auftreten kann. Der Aufzählungsstil ist nicht in der HTML-Beschreibung der Seite definiert, sondern im zugehörigen CSS mithilfe der list-style-type-Eigenschaft.
  • Die <ul>- und <ol>-Elemente können so tief verschachtelt werden, wie Sie möchten. Darüber hinaus können die verschachtelten Listen ohne Einschränkung zwischen <ol> und <ul> wechseln.
  • Die <ol>- und <ul>-Elemente repräsentieren beide eine Liste von Elementen. Sie unterscheiden sich darin, dass bei dem <ol>-Element die Reihenfolge von Bedeutung ist. Um zu bestimmen, welches zu verwenden ist, 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

Verschachteln 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 Übersicht

Inhaltskategorien Flussinhalt, und wenn die Kinder des <ul>-Elements mindestens ein <li>-Element einschließen, wahrnehmbarer Inhalt.
Erlaubter Inhalt Null oder mehr <li>, <script> und <template>-Elemente.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Erlaubte Eltern Jedes Element, das Flussinhalt 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 listenspezifische 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 Anzeige der Ordnungszeichen zu wä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 Listeneinrückung zu steuern.