`<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 von HTML 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 enthält die globalen Attribute.

compact Veraltet

Dieses boolesche Attribut deutet an, dass die Liste in einem kompakten Stil gerendert werden sollte. Die Interpretation dieses Attributs ist browserspezifisch. 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, aber nicht alle Browser unterstützen ihn: triangle.

Ist dieses Attribut nicht vorhanden und gilt keine CSS list-style-type Eigenschaft für das Element, wählt der Benutzeragent einen Aufzählungstyp entsprechend der Verschachtelungsebene der Liste.

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

Anmerkungen zur Verwendung

Das <ul>-Element dient zum Gruppieren einer Sammlung von Elementen, die keine nummerische Reihenfolge haben und deren Reihenfolge in der Liste bedeutungslos ist. Typischerweise werden ungeordnete Listenelemente mit einem Aufzählungszeichen angezeigt, das verschiedene Formen annehmen kann, wie ein Punkt, ein Kreis oder ein Quadrat. Der Aufzählungsstil ist nicht in der HTML-Beschreibung der Seite definiert, sondern in der damit verbundenen CSS mit der list-style-type-Eigenschaft.
Die <ul>- und <ol>-Elemente können beliebig tief verschachtelt werden. Darüber hinaus können die verschachtelten Listen zwischen <ol> und <ul> ohne Einschränkung abwechseln.
Die <ol>- und <ul>-Elemente stellen beide eine Liste von Elementen dar. Sie unterscheiden sich dadurch, dass beim <ol>-Element die Reihenfolge eine Bedeutung hat. 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

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 Zusammenfassung

Inhaltskategorien	Flussinhalt, und wenn die Kinder des `<ul>`-Elements mindestens ein `<li>`-Element enthalten, spürbarer Inhalt.
Erlaubter Inhalt	Null oder mehr `<li>`, `<script>`- und `<template>`-Elemente.
Weglassung von Tags	Keine, sowohl der Start- als auch der End-Tag sind zwingend erforderlich.
Erlaubte Eltern	Jedes Element, das Flussinhalt akzeptiert.
Implizierte 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 Listen-bezogene HTML-Elemente: <ol>, <li>, <menu>
CSS-Eigenschaften, die besonders nützlich sein könnten, um das <ul>-Element zu gestalten:
- die list-style-Eigenschaft, um die Art der Darstellung zu wählen.
- CSS-Zähler, um komplexe verschachtelte Listen zu handhaben.
- die line-height-Eigenschaft, um das veraltete compact-Attribut zu simulieren.
- die margin-Eigenschaft, um die Einrückung der Liste zu steuern.