HTML-Listen
In HTML gibt es drei Listentypen: ungeordnete, geordnete und Beschreibungslisten – jeder wird mit anderen Tags definiert.
In HTML gibt es drei Listentypen: ungeordnete, geordnete und Beschreibungslisten. Jeder wird mit anderen Tags definiert. Schauen wir uns das genauer an.
HTML-Ungeordnete Listen
Ungeordnete Listen verwenden wir, um Elemente ohne numerische Reihenfolge zu gruppieren. Wenn man die Reihenfolge der Listenelemente ändert, verändert sich die Bedeutung nicht. Um eine ungeordnete Liste zu erstellen, verwenden wir den <ul>-Tag. Dieser Tag kommt paarweise vor – der Inhalt wird zwischen dem öffnenden <ul>- und dem schließenden </ul>-Tag geschrieben.
Jedes Element einer ungeordneten Liste wird innerhalb des <li>-Tags deklariert.
Beispiel des HTML-Tags <ul> zum Erstellen einer ungeordneten Liste:
Ein Beispiel einer ungeordneten Liste|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>An unordered list:</h1>
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is one more list item</li>
</ul>
</body>
</html>Die Elemente in ungeordneten Listen sind standardmäßig mit Aufzählungszeichen (kleinen schwarzen Kreisen) markiert. Das alte Attribut type (type="circle", type="square") konnte den Stil der Aufzählungszeichen ändern, ist aber in HTML5 veraltet. Verwenden Sie stattdessen die CSS-Eigenschaft list-style-type – das ist die moderne, unterstützte Methode zur Steuerung von Markierungen für geordnete und ungeordnete Listen. Die vollständige Migrationstabelle von alten type-Werten zu CSS finden Sie im Abschnitt zur geordneten Liste weiter unten.
Beispiel des HTML-Tags <ul> zum Erstellen einer ungeordneten Liste, bei der die Elemente mit Aufzählungszeichen markiert sind:
Beispiel eines type-Attributs für HTML-Listen
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul type="circle">
<li>List item </li>
<li>List item</li>
<li>List item</li>
</ul>
<ul type="square">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>Ergebnis
Sie können auch die CSS-Eigenschaft list-style-type oder list-style-image verwenden, um den Typ eines Listenelements anzugeben.
Beispiel des HTML-Tags <ul> in Kombination mit der CSS-Eigenschaft list-style-type zum Erstellen einer ungeordneten Liste:
Beispiel einer list-style-type-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Examples of unordered lists:</h2>
<ul style="list-style-type: square;">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
<ul style="list-style-type: disc;">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
<ul style="list-style-type: circle;">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
</body>
</html>HTML-Geordnete Listen
Die geordnete HTML-Liste wird für die Auflistung von Elementen verwendet, die mit Zahlen markiert sind. Sie beginnt mit dem <ol>-Tag. Dieser Tag kommt paarweise vor – der Inhalt wird zwischen dem öffnenden <ol>- und dem schließenden </ol>-Tag geschrieben.
Jedes Element in der geordneten Liste beginnt mit dem öffnenden <li>-Tag und endet mit dem schließenden </li>-Tag.
Beispiel des HTML-Tags <ol> zum Erstellen einer geordneten Liste:
Beispiel einer geordneten HTML-Liste|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>An ordered list:</h1>
<ol>
<li>This is List item number 1</li>
<li>This is List item number 2</li>
<li>This is List item number 3</li>
</ol>
</body>
</html>Die Elemente einer geordneten Liste sind standardmäßig mit Zahlen markiert. Um sie mit Buchstaben oder römischen Ziffern zu nummerieren, war die alte Methode, type="a" oder type="I" zum <ol>-Tag hinzuzufügen. Dieses type-Attribut funktioniert zwar noch in Browsern, ist aber in HTML5 veraltet – bevorzugen Sie daher im neuen Code die CSS-Eigenschaft list-style-type.
Migration des veralteten type-Attributs zu CSS
Jeder alte type-Wert lässt sich direkt einem CSS-list-style-type-Wert zuordnen:
| Veraltetes Attribut | Entsprechendes CSS | Beispielausgabe |
|---|---|---|
type="1" | list-style-type: decimal; | 1, 2, 3 |
type="A" | list-style-type: upper-alpha; | A, B, C |
type="a" | list-style-type: lower-alpha; | a, b, c |
type="I" | list-style-type: upper-roman; | I, II, III |
type="i" | list-style-type: lower-roman; | i, ii, iii |
Das erste Beispiel unten verwendet das veraltete type-Attribut, damit Sie alle Markierungsstile auf einen Blick sehen können; im Produktionscode verwenden Sie stattdessen den entsprechenden list-style-type-Wert aus der Tabelle.
Beispiel des HTML-Tags <ol> zum Erstellen einer geordneten Liste mit Buchstaben und römischen Ziffern:
Beispiel verschiedener Markierungen von Listenelementen
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3>A numbered list:</h3>
<ol>
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>An alphabetized list:</h3>
<ol type="A">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>An alphabetized list (lowercase letters):</h3>
<ol type="a">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>A numbered list (Roman numerals):</h3>
<ol type="I">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>A numbered list (lowercase Roman numerals):</h3>
<ol type="i">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
</body>
</html>HTML-Beschreibungslisten
HTML-Beschreibungslisten werden verwendet, um Begriffe mit ihren Beschreibungen zu verknüpfen, ähnlich wie ein Wörterbuch oder Glossar.
Um eine Beschreibungsliste zu erstellen, verwenden wir den <dl>-Tag. Dieser Tag kommt paarweise vor.
In <dl> verwenden wir <dt>-Tags für einen Begriff/Namen in einer Beschreibungsliste und <dd> für eine Beschreibung eines Begriffs/Namens in einer Beschreibungsliste.
Beispiel des HTML-Tags <dl> zum Erstellen einer Beschreibungsliste:
Beispiel einer Beschreibungsliste|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Description Lists:</h1>
<dl>
<dt>Tea</dt>
<dd>hot drink</dd>
<dt>Juice</dt>
<dd>cold drink</dd>
</dl>
</body>
</html>Ergebnis
Wann <dl> statt einer <ul> mit Paaren verwendet werden sollte
Greifen Sie auf eine Beschreibungsliste zurück, wenn Ihre Daten tatsächlich eine Menge von Name-/Wert-(Begriff-/Definitions-)Paaren sind: Glossareinträge, Schlüssel-Wert-Metadaten (Autor, Veröffentlichungsdatum, Kategorie), FAQ-Frage-/Antwortpaare oder Dialoge. Das <dl>-Element macht diese Beziehung im Markup explizit, was Hilfstechnologien kommunizieren können.
Wenn Ihre Elemente nur eine flache Sequenz ohne Paarstruktur sind, ist eine einfache <ul> die richtige Wahl. Täuschen Sie keine Schlüssel-Wert-Paarung vor, indem Sie <li>-Elemente in einer <ul> abwechseln – das geht die semantische Verbindung zwischen Begriff und Beschreibung verloren.
Auf ein einzelnes <dt> können mehrere <dd>-Elemente folgen (ein Begriff, mehrere Beschreibungen), und mehrere <dt>-Elemente können ein einzelnes <dd> teilen (mehrere Begriffe mit derselben Definition). Beides ist gültig:
<dl>
<dt>Coffee</dt>
<dt>Espresso</dt>
<dd>A hot caffeinated drink.</dd>
<dt>Water</dt>
<dd>A drink with no calories.</dd>
<dd>Also used for cooking and cleaning.</dd>
</dl>Häufiger Missbrauch: Das <dl> wurde früher rein für seinen standardmäßigen Einzug missbraucht. Verwenden Sie es niemals nur für visuellen Einzug – nutzen Sie dafür CSS margin/padding. Verwenden Sie <dl> nur dann, wenn der Inhalt tatsächlich Begriff-/Beschreibungsdaten sind. Weitere Details finden Sie auf den speziellen Seiten zu <dl>, <dt> und <dd>.
HTML-Verschachtelte Listen
Eine verschachtelte Liste enthält eine Liste innerhalb einer Liste.
Beispiel einer verschachtelten HTML-Liste:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>A nested HTML list</h2>
<p>A nested list contains a list inside a list.</p>
<ul>
<li>Copybooks</li>
<li>
Books
<ul>
<li>Detective books</li>
<li>Roman books</li>
<li>Fairy tale books</li>
</ul>
</li>
</ul>
</body>
</html>Die verschachtelte Liste muss innerhalb eines <li>-Elements platziert werden, nicht direkt zwischen den <li>-Elementen des übergeordneten Elements – ein <ul>/<ol> ist kein gültiges direktes Kindelement eines anderen <ul>/<ol>.
Sie können Listentypen mischen: Eine geordnete Liste kann in eine ungeordnete Liste verschachtelt werden und umgekehrt. Browser rücken jede verschachtelte Ebene automatisch ein (über das standardmäßige linke padding auf <ul>/<ol>), sodass die Hierarchie klar erkennbar ist.
Beispiel einer gemischten verschachtelten Liste (geordnete Liste innerhalb einer ungeordneten Liste):
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Shopping list</h2>
<ul>
<li>Fruit</li>
<li>
Drinks, in order of preference:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
</ol>
</li>
<li>Bread</li>
</ul>
</body>
</html>Steuerung der Listenzählung
Standardmäßig nummeriert eine geordnete Liste ihre Elemente beginnend bei 1. Drei Attribute ermöglichen es Ihnen, dies zu überschreiben:
start(bei<ol>) — die Zahl, bei der die Liste zu zählen beginnt.reversed(bei<ol>) — zählt abwärts statt aufwärts.value(bei einem bestimmten<li>) — legt die Nummer dieses Elements manuell fest; die folgenden Elemente setzen die Zählung ab dieser Nummer fort.
Verwendung von start zum Fortführen einer Liste über Abschnitte hinweg
Das Attribut start ist besonders nützlich, wenn eine einzelne logische Liste durch Überschriften, Bilder oder Absätze unterbrochen wird. Wenn Abschnitt eins zum Beispiel bei Schritt 39 endet, setzen Sie die Schritte in Abschnitt zwei mit <ol start="40"> fort, damit die Nummerierung über den Umbruch hinweg korrekt bleibt.
Beispiel einer HTML-Liste für die Zählung ab einer bestimmten Nummer:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>List counting control</h2>
<p>Continuing a procedure whose first section ended at step 39.</p>
<ol start="40">
<li>Pen</li>
<li>Pencil</li>
<li>Copybook</li>
</ol>
<ol type="I" start="40">
<li>Pen</li>
<li>Pencil</li>
<li>Copybook</li>
</ol>
</body>
</html>Beispiel für reversed und value:
Das Attribut reversed nummeriert die Liste von hoch nach niedrig – praktisch für Countdowns oder „Top-N"-Rankings, die vom Schlechtesten zum Besten angezeigt werden. Das Attribut value bei einem einzelnen <li> springt die Zählung auf eine bestimmte Nummer, und die folgenden Elemente setzen ab dort fort.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>A reversed list (countdown)</h2>
<ol reversed>
<li>Bronze medal</li>
<li>Silver medal</li>
<li>Gold medal</li>
</ol>
<h2>Setting an item's number with value</h2>
<ol>
<li>First</li>
<li value="5">Jumps to 5</li>
<li>Continues at 6</li>
</ol>
</body>
</html>Die umgekehrte Liste oben wird als 3. Bronze medal, 2. Silver medal, 1. Gold medal gerendert. In der zweiten Liste wird das zweite Element auf 5 gesetzt, sodass das dritte Element 6 anzeigt.
HTML-Listen und Barrierefreiheit
Listen tragen Bedeutung für Hilfstechnologien, nicht nur für das visuelle Erscheinungsbild. Wenn ein Screenreader auf ein <ul>, <ol> oder <dl> trifft, kündigt er die Rolle der Liste und in der Regel die Anzahl der Elemente an (z. B. „Liste, 3 Elemente") und gibt dann die Position jedes Elements an. Dieser Kontext hilft Nutzern, die die Aufzählungszeichen oder Zahlen nicht sehen können, die Struktur zu verstehen – die Wahl des richtigen Listentyps ist daher auch eine Entscheidung für die Barrierefreiheit.
Einige praktische Richtlinien:
- Das Entfernen von Markierungen kann die Listenstruktur aufheben. In Safari mit VoiceOver kann die Anwendung von
list-style: none(üblich für Navigationsmenüs und benutzerdefiniert gestaltete Listen) dazu führen, dass der Browser die implizite Listenrolle entfernt, sodass die Liste nicht mehr als Liste angekündigt wird. Um die Semantik beizubehalten, fügen Sie ein explizitesrole="list"hinzu:
<ul role="list" style="list-style: none;">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>- Navigationslisten in
<nav>einschließen. Ein Seitenmenü ist üblicherweise eine Linkliste innerhalb eines<nav>-Landmarks. Das<nav>-Element stellt einen Navigations-Landmark bereit, zu dem Screenreader-Nutzer springen können, während das innere<ul>die Elemente gruppiert und zählt.
<nav aria-label="Main">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>- Verwenden Sie
<ol>, wenn die Reihenfolge bedeutsam ist (Schritte, Rankings, Anweisungen) und<ul>, wenn sie es nicht ist – Screenreader kündigen die Positionen in geordneten Listen an, sodass der Unterschied den Nutzern vermittelt wird, nicht nur visuell sichtbar ist.
Horizontale Liste mit CSS
HTML-Listen können mit CSS auf viele verschiedene Arten gestaltet werden.
Sie können HTML-Listen mit verschiedenen CSS-Eigenschaften stilisieren. Sie können beispielsweise ein Navigationsmenü erstellen, indem Sie list-style-type: none setzen, um die Aufzählungszeichen zu entfernen, und display: flex, um die Elemente in einer Zeile anzuordnen.
Die Farben unten sind als literale Hex-Werte geschrieben, damit das Beispiel in sich geschlossen bleibt; in einem echten Projekt würden Sie normalerweise die Farbvariablen Ihres Design-Systems (benutzerdefinierte CSS-Eigenschaften) verwenden, anstatt Hex-Codes fest einzucodieren.
Beispiel einer horizontalen Liste mit CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
background-color: #F44336;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #981816;
}
</style>
</head>
<body>
<h2>Navigation Menu Example</h2>
<p>
You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.
</p>
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="https://www.w3docs.com/tool/">Tools</a>
</li>
<li>
<a href="https://www.w3docs.com/snippets">Snippets</a>
</li>
<li>
<a href="https://www.w3docs.com/quiz/">Quizzes</a>
</li>
<li>
<a href="https://www.w3docs.com/string-functions/">String Functions</a>
</li>
</ul>
</body>
</html>