HTML <ul>-Tag
Der HTML <ul>-Tag definiert eine ungeordnete Liste. Lernen Sie Syntax, Verschachtelung, Styling und barrierefreie Nutzung.
Der HTML-Tag <ul> wird verwendet, um eine ungeordnete Liste zu definieren, die eine Gruppe von Elementen zusammenfasst, die keine numerische Reihenfolge haben. Wenn die Reihenfolge der Listenelemente geändert wird, ändert sich die Bedeutung nicht. In der Regel werden die Elemente einer ungeordneten Liste mit einem Aufzählungszeichen dargestellt. Dieses kann verschiedene Formen annehmen, beispielsweise ein Kreis, ein Punkt oder ein Quadrat.
Jedes Element einer ungeordneten Liste wird innerhalb des <li>-Tags deklariert.
Der <ul>-Tag ist ein Block-Level-Element und nimmt den gesamten verfügbaren horizontalen Platz ein. Seine Höhe hängt vom Inhalt des Containers ab. Eine ungeordnete Liste wird typischerweise als Liste mit Aufzählungszeichen dargestellt.
Der <ol>-Tag stellt ebenfalls eine Liste von Elementen dar und erstellt eine geordnete Liste. Er unterscheidet sich jedoch von <ul>, da die Reihenfolge im <ol>-Tag bedeutungsrelevant ist. Standardmäßig werden die Elemente einer geordneten Liste mit Zahlen angezeigt.
Die Tags <ul> und <ol> können beliebig tief verschachtelt werden. Die verschachtelten Listen können zwischen <ul> und <ol> wechseln. Dabei ist jedoch zu beachten: Wenn eine Liste in einer anderen verschachtelt wird, muss die innere Liste innerhalb eines <li>-Elements der äußeren Liste platziert werden. Das bedeutet, dass das direkte Kindelement einer Liste immer ein <li>-Element sein muss, dieses <li>-Element jedoch eine weitere Liste enthalten kann. Das Listenmarkierungszeichen lässt sich mit CSS ändern. Die semantische Bedeutung, die durch die Wahl eines Listentyps ausgedrückt wird, kann jedoch nicht mit CSS verändert werden.
Syntax
Der <ul>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<ul>) und dem schließenden (</ul>) Tag geschrieben.
Beispiel des HTML-Tags <ul>:
Beispiel des HTML-Tags <ul>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>Verschachtelte Listen
Listen werden häufig verschachtelt, um eine Hierarchie auszudrücken – beispielsweise ein Menü mit Untereinträgen. Um eine Liste zu verschachteln, platzieren Sie die innere <ul> innerhalb eines <li> der äußeren Liste, nicht direkt innerhalb der äußeren <ul>. Das direkte Kindelement einer <ul> muss immer ein <li> sein.
Beispiel einer verschachtelten <ul>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li>Coffee</li>
<li>
Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>Browser ändern das Aufzählungszeichen auf jeder Verschachtelungsebene automatisch (Disc, dann Kreis, dann Quadrat), was die Hierarchie leicht lesbar macht.
Listen mit CSS gestalten
Die historischen Attribute type und compact sind in HTML5 veraltet – verwenden Sie diese nicht mehr. Der moderne, semantisch korrekte Weg, das Aufzählungszeichen zu ändern, ist die CSS-Eigenschaft list-style-type (oder list-style-image für ein benutzerdefiniertes Bild). Indem das Aufzählungszeichen in CSS definiert wird, wird die Präsentation von der Struktur getrennt: Die Liste bedeutet weiterhin „ungeordnete Liste", egal wie sie gestaltet wird.
Beispiel für <ul> mit der CSS-Eigenschaft list-style-type:
Beispiel des HTML-Tags <ul> mit der CSS-Eigenschaft list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul.square {
list-style-type: square;
}
ul.circle {
list-style-type: circle;
}
ul.none {
list-style-type: none;
}
</style>
</head>
<body>
<h2>Examples of unordered lists:</h2>
<ul class="square">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
<ul class="circle">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
<ul class="none">
<li>No marker</li>
<li>No marker</li>
</ul>
</body>
</html>Navigationsmenüs
Die häufigste praktische Verwendung von <ul> ist ein Navigationsmenü. Das Einschließen der Liste in ein <nav>-Element kennzeichnet sie als Navigations-Landmark, und die Liste kommuniziert unterstützenden Technologien weiterhin „Diese Elemente bilden eine Gruppe". Die Aufzählungszeichen werden üblicherweise per CSS entfernt.
Beispiel eines Navigationsmenüs mit <nav> und <ul>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</body>
</html>Barrierefreiheit
Screenreader behandeln ein <ul> als Liste: Sie kündigen an, dass eine Liste beginnt, lesen die Anzahl der enthaltenen Elemente vor (zum Beispiel „Liste, 3 Elemente") und lesen jedes Element der Reihe nach. Diese Elementanzahl ist ein nützlicher Kontext für sehbehinderte Nutzer – daher sollte echtes <ul>/<li>-Markup gegenüber einem Stapel gestalteter <div>-Elemente bevorzugt werden.
Es gibt einen wichtigen Fallstrick. In Safari mit VoiceOver entfernt das Anwenden von list-style: none (wie es typischerweise bei Navigationsmenüs geschieht) die Listensemantik – VoiceOver kündigt die Liste nicht mehr als solche an. Wenn die Listenrolle in diesem Kontext wichtig ist, stellen Sie sie explizit wieder her:
<ul role="list" style="list-style: none;">
<li>Home</li>
<li>About</li>
</ul>Attribute
Der <ul>-Tag hat im aktuellen HTML-Standard keine elementspezifischen Attribute. (Die alten Attribute type und compact sind veraltet – verwenden Sie stattdessen CSS.) Er unterstützt nur die globalen Attribute und die Ereignisattribute.
Verwandte Tags und Themen
<li>— definiert jedes Element der Liste.<ol>— erstellt eine geordnete (nummerierte) Liste.- HTML-Listen — Übersicht aller Listentypen in HTML.
- CSS
list-style-type— steuert das Aufzählungszeichen.