<ul>: Das nicht geordnete 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 eine Liste mit Aufzählungszeichen dargestellt wird.
Probieren Sie es aus
Attribute
Dieses Element enthält 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, da es veraltet ist: Verwenden Sie stattdessen CSS. Um eine ähnliche Wirkung wie das
compact
Attribut zu erzielen, kann die CSS-Eigenschaftline-height
mit einem Wert von80%
verwendet werden. type
Veraltet-
Dieses Attribut legt den Stil der Aufzählungszeichen für die Liste fest. Die unter HTML3.2 und der Übergangsvariante 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
.Falls nicht vorhanden und wenn keine CSS
list-style-type
Eigenschaft auf das Element angewendet wird, wählt der User-Agent einen Aufzählungstyp basierend auf der Verschachtelungsebene der Liste.Warnung: Verwenden Sie dieses Attribut nicht, da es veraltet ist; verwenden Sie stattdessen die CSS
list-style-type
Eigenschaft.
Verwendungshinweise
- Das
<ul>
Element dient der Gruppierung einer Sammlung von Elementen, die keine nummerierte Reihenfolge haben, und deren Reihenfolge in der Liste bedeutungslos ist. Typischerweise werden ungeordnete Listenelemente mit einem Aufzählungszeichen dargestellt, das verschiedene Formen wie Punkt, Kreis oder Quadrat haben kann. Der Stil des Aufzählungszeichens wird nicht in der HTML-Beschreibung der Seite, sondern im zugehörigen CSS mit derlist-style-type
Eigenschaft definiert. - Die
<ul>
und<ol>
Elemente können beliebig tief verschachtelt werden. Zudem können die verschachtelten Listen ohne Einschränkung zwischen<ol>
und<ul>
abwechseln. - Die
<ol>
und<ul>
Elemente repräsentieren beide eine Liste von Elementen. Sie unterscheiden sich jedoch dadurch, dass beim<ol>
Element die Reihenfolge bedeutend ist. Um festzustellen, welches verwendet werden sollte, 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
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
Ergebnis
Verschachteln 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 in 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 |
Flussinhalt, und wenn die Kinder des <ul> Elements mindestens ein <li> Element enthalten,
fühlbarer Inhalt.
|
---|---|
Erlaubter Inhalt |
Null oder mehr <li> ,
<script> und
<template> Elemente.
|
Tag-Auslassung | Keine, sowohl der Start- als auch der Endtag sind 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 Standard # the-ul-element |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
-
Andere HTML-Elemente, die sich auf Listen beziehen:
<ol>
,<li>
,<menu>
-
CSS-Eigenschaften, die besonders nützlich sein könnten, um das
<ul>
Element zu stylen:- die
list-style
Eigenschaft, um die Art der Darstellung der Ordinals festzulegen. - CSS-Zähler, um komplexe verschachtelte Listen zu verwalten.
- die
line-height
Eigenschaft, um das veraltetecompact
Attribut zu simulieren. - die
margin
Eigenschaft, um die Einrückung der Liste zu steuern.
- die