<ul>: HTML-Element für ungeordnete Listen

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 unterstützt die globalen Attribute.

compact

Dieses boolesche Attribut gibt an, dass die Liste kompakt dargestellt werden soll. Wie es interpretiert wird, hängt vom Browser ab. Verwenden Sie stattdessen CSS: Mit der CSS-Eigenschaft line-height und dem Wert 80% lässt sich ein ähnlicher Effekt wie mit dem Attribut compact erzielen.

type

Dieses Attribut legt die Art der Aufzählungszeichen für die Liste fest. Die in HTML 3.2 und der Übergangsversion von HTML 4.0/4.01 definierten Werte sind:

• circle
• disc
• square

In der WebTV-Oberfläche wurde eine vierte Art von Aufzählungszeichen definiert, die jedoch nicht von allen Browsern unterstützt wird: triangle.

Wenn das Attribut fehlt und für das Element keine CSS-Eigenschaft list-style-type gilt, wählt der User Agent die Art der Aufzählungszeichen anhand der Verschachtelungstiefe der Liste aus.

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

Verwendungshinweise

• Das Element <ul> dient dazu, Einträge zu einer Liste zusammenzufassen, wenn sie keine numerische Reihenfolge haben und ihre Reihenfolge in der Liste keine Bedeutung hat. Einträge einer ungeordneten Liste werden üblicherweise mit Aufzählungszeichen angezeigt, etwa mit einem Punkt, einem Kreis oder einem Quadrat. Die Art der Aufzählungszeichen wird nicht im HTML der Seite festgelegt, sondern im zugehörigen CSS mithilfe der Eigenschaft list-style-type.
• Die Elemente <ul> und <ol> können beliebig tief verschachtelt werden. Dabei können <ol> und <ul> in den verschachtelten Listen ohne Einschränkung aufeinander folgen. Um eine Liste zu verschachteln, platzieren Sie sie innerhalb eines <li>-Elements der übergeordneten Liste. Ein <ul> oder <ol> kann kein direktes Kindelement eines anderen <ul> oder <ol> sein.
• Sowohl <ol> als auch <ul> stellen eine Liste von Einträgen dar. Der Unterschied besteht darin, dass bei <ol> die Reihenfolge eine Bedeutung hat. Um zu entscheiden, welches Element Sie verwenden sollten, ändern Sie probeweise die Reihenfolge der Listeneinträge: Ändert sich dadurch die Bedeutung, sollten Sie <ol> verwenden. Andernfalls können Sie <ul> verwenden.

Beispiele

Einfaches Beispiel

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

Ergebnis

Eine Liste verschachteln

<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

<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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Andere HTML-Elemente für Listen: <ol>, <li>, <menu>
• CSS-Eigenschaften, die für die Gestaltung des Elements <ul> besonders nützlich sein können:
  • die Eigenschaft list-style, um die Darstellung der Aufzählungszeichen festzulegen.
  • CSS-Zähler, um komplexe verschachtelte Listen zu gestalten.
  • die Eigenschaft line-height, um das veraltete Attribut compact nachzubilden.
  • die Eigenschaft margin, um den Einzug der Liste zu steuern.