<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>
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 dargestellt werden sollte. Die Interpretation dieses Attributs hängt vom User Agent ab und funktioniert nicht in allen Browsern.
Warnung: Verwenden Sie dieses Attribut nicht mehr, da es veraltet ist: Verwenden Sie stattdessen CSS. Um einen ähnlichen Effekt wie das
compact
-Attribut zu erzielen, kann die CSS-Eigenschaftline-height
mit einem Wert von80%
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-Oberfläche definiert, aber nicht alle Browser unterstützen ihn:
triangle
.Ist es nicht vorhanden und greift keine CSS
list-style-type
Eigenschaft auf das Element, wählt der User Agent einen Aufzählungstyp abhängig von der Verschachtelungsebene der Liste.Warnung: Verwenden Sie dieses Attribut nicht mehr, da es veraltet ist; verwenden Sie stattdessen die CSS-Eigenschaft
list-style-type
">list-style-type.
Hinweise zur Nutzung
- Das
<ul>
Element dient zum Gruppieren einer Sammlung von Elementen, die keine numerische Reihenfolge haben, und deren Anordnung 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 wird nicht in der HTML-Beschreibung der Seite definiert, sondern im zugehörigen CSS, unter Verwendung derlist-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 ohne Einschränkungen 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 festzustellen, welches verwendet werden sollte, ändern Sie die Reihenfolge der Listenelemente; wenn sich die Bedeutung ändert, sollte das<ol>
Element verwendet werden, andernfalls können Sie<ul>
verwenden.
Beispiele
Einfaches Beispiel
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
Ergebnis
Verschachtelung einer Liste
<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
Inhaltskategorien |
Flow-Inhalt, und wenn die Kinder des <ul> Elements mindestens
ein <li> Element umfassen,
anschaulicher 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 Flow-Inhalt akzeptiert. |
Implizite ARIA-Rolle |
list
|
Zulässige 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 Darstellung der Ordnungszeichen zu wählen. - CSS-Zähler, um komplexe verschachtelte Listen zu handhaben.
- die
line-height
Eigenschaft, um das veraltetecompact
Attribut zu simulieren. - die
margin
Eigenschaft, um die Listeneinrückung zu steuern.
- die