<ul> HTML ungeordnete Listenelement - HTML | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

<ul> HTML ungeordnete Listenelement

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Das <ul>-HTML-Element stellt eine ungeordnete Liste von Elementen dar, die typischerweise als Aufzählungsliste gerendert wird.

In diesem Artikel

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 beinhaltet die globalen Attribute.

compact

Dieses boolesche Attribut deutet darauf hin, dass die Liste in einem kompakten Stil gerendert werden sollte. Die Interpretation dieses Attributs ist browser-spezifisch. 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 Aufzählungsstil für die Liste fest. Die in HTML3.2 und in 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 dieses Attribut nicht vorhanden ist und keine CSS list-style-type-Eigenschaft auf das Element angewendet wird, wählt der Benutzeragent basierend auf der Verschachtelungsebene der Liste einen Aufzählungstyp aus.

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

Anwendungshinweise

Das <ul>-Element dient zum Gruppieren einer Sammlung von Elementen, die keine numerische Ordnung haben und deren Reihenfolge in der Liste bedeutungslos ist. Typischerweise werden die Elemente einer ungeordneten Liste mit einem Aufzählungszeichen angezeigt, das verschiedene Formen haben kann, wie einen Punkt, einen Kreis oder ein Quadrat. Der Stil des Aufzählungszeichens wird nicht in der HTML-Beschreibung der Seite definiert, sondern in ihrem zugehörigen CSS, unter Verwendung der list-style-type-Eigenschaft.
Die <ul>- und <ol>-Elemente können so tief verschachtelt werden, wie gewünscht. Darüber hinaus können die verschachtelten Listen zwischen <ol> und <ul> ohne Einschränkung alternieren.
Die <ol>- und <ul>-Elemente stellen beide eine Liste von Elementen dar. Sie unterscheiden sich darin, dass beim <ol>-Element die Reihenfolge von Bedeutung 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

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 Zulässiger Inhalt Tag-Auslassung Erlaubte Eltern Implizierte ARIA-Rolle Zulässige ARIA-Rollen DOM-Schnittstelle

Fließender Inhalt, und wenn die Kinder des Elements <ul> mindestens ein <li>-Element enthalten, greifbarer Inhalt.

Null oder mehr <li>, <script> und <template>-Elemente.

Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.

Jedes Element, das fließenden Inhalt akzeptiert.

list

directory, group, listbox, menu, menubar, none, presentation, radiogroup, tablist, toolbar, tree

[`HTMLUListElement`](/de/docs/Web/API/HTMLUListElement)

Andere HTML-Elemente, die sich auf Listen beziehen: <ol>, <li>, <menu>
Besonders nützliche CSS-Eigenschaften zur Gestaltung des <ul>-Elements:
- die list-style-Eigenschaft, um die Darstellungsweise der Aufzählung 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.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

<ul> HTML ungeordnete Listenelement

In diesem Artikel

Probieren Sie es aus

Attribute

Anwendungshinweise

Beispiele

Einfaches Beispiel

Ergebnis

Verschachteln einer Liste

Ergebnis

Geordnete Liste innerhalb einer ungeordneten Liste

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN