HTML Listen

Ungeordnete Listen - <ul>

Eine ungeordnete Liste wird mit <ul> erstellt. Jedes Listenelement wird mit <li> markiert. Sie eignet sich für Aufzählungen, bei denen die Reihenfolge keine Rolle spielt. - wie z. B. Zutaten oder Kategorien.

• Einträge werden standardmäßig mit Punkten dargestellt.
• Die Darstellung kann später per CSS angepasst werden (z. B. Kreise, Quadrate, Symbole - ich habe mich für Pfeile entschieden).
• Jedes Listenelement steht in einem eigenen <li> -Tag.

<ul>
    <li>Apfel</li>
    <li>Banane</li>
    <li>Kirsche</li>
</ul>

Das type-Attribut (veraltet)

Früher konnte man mit dem type -Attribut das Aufzählungszeichen ändern. Das ist heute veraltet - nutze stattdessen CSS list-style-type . Zur Vollständigkeit hier die alten Werte:

Geordnete Listen - <ol>

Geordnete Listen werden automatisch nummeriert. Sie sind ideal für Schritt-für-Schritt-Anleitungen, Ranglisten oder andere Inhalte, bei denen die Reihenfolge wichtig ist.

• Die Punkte werden automatisch nummeriert.
• Mit dem type -Attribut kannst du den Stil ändern (z. B. Zahlen, Buchstaben, römische Ziffern).
• Nummerierung kann über start angepasst werden.

<ol>
    <li>Wasser kochen</li>
    <li>Teebeutel hinzufügen</li>
    <li>Ziehen lassen</li>
</ol>

Das type-Attribut

Mit dem type -Attribut änderst du das Nummerierungsformat:

<ol type="a">
    <li>Erster Schritt</li>
    <li>Zweiter Schritt</li>
</ol>

Das start-Attribut

Mit start legst du fest, bei welcher Nummer die Liste beginnt. Das ist besonders nützlich, wenn du eine lange Liste in mehrere Spalten aufteilen möchtest:

HTML Kopieren

<!-- Liste in zwei Spalten aufteilen -->
<ol>
        <li>Projekt planen</li>
        <li>Design erstellen</li>
        <li>HTML schreiben</li>
    </ol>
    <ol start="4">
        <li>CSS hinzufügen</li>
        <li>JavaScript einbauen</li>
        <li>Testen</li>
    </ol>
</div>

Das reversed-Attribut

Mit reversed zählt die Liste rückwärts - perfekt für Countdowns oder Top-10-Listen:

<ol reversed>
    <li>Bronze</li>
    <li>Silber</li>
    <li>Gold</li>
</ol>

Das value-Attribut auf <li>

Mit value auf einzelnen <li> -Elementen überschreibst du die Nummerierung an bestimmten Stellen:

<ol>
    <li>Erster Punkt</li>
    <li value="10">Sprung zu 10</li>
    <li>Weiter bei 11</li>
</ol>

Verschachtelte Listen

Listen können ineinander verschachtelt werden, um hierarchische Strukturen darzustellen. Die innere Liste wird dabei innerhalb eines <li> -Elements platziert:

HTML Kopieren

<ul>
    <li>Obst
        <ul>
            <li>Äpfel</li>
            <li>Bananen</li>
            <li>Orangen</li>
        </ul>
    </li>
    <li>Gemüse
        <ul>
            <li>Karotten</li>
            <li>Brokkoli</li>
        </ul>
    </li>
    <li>Getränke</li>
</ul>

• Obst
  • Äpfel
  • Bananen
  • Orangen
• Gemüse
  • Karotten
  • Brokkoli
• Getränke

Gemischte Verschachtelung

Du kannst auch verschiedene Listentypen kombinieren, z.B. eine geordnete Liste mit ungeordneten Unterpunkten:

HTML Kopieren

<ol>
    <li>Vorbereitung
        <ul>
            <li>Zutaten besorgen</li>
            <li>Werkzeug bereitlegen</li>
        </ul>
    </li>
    <li>Durchführung
        <ul>
            <li>Anleitung lesen</li>
            <li>Schritt für Schritt vorgehen</li>
        </ul>
    </li>
    <li>Abschluss</li>
</ol>

1. Vorbereitung
   • Zutaten besorgen
   • Werkzeug bereitlegen
2. Durchführung
   • Anleitung lesen
   • Schritt für Schritt vorgehen
3. Abschluss

Beschreibungslisten - <dl>

Beschreibungslisten sind eine besondere Form, mit der du Begriffe und deren Erklärungen strukturieren kannst. Sie bestehen aus <dt> = Begriff / definition term und <dd> = Beschreibung / definition description .

HTML Kopieren

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - die Struktur einer Webseite.</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets - das Aussehen einer Webseite.</dd>
</dl>

HTML

HyperText Markup Language - die Struktur einer Webseite.

CSS

Cascading Style Sheets - das Aussehen einer Webseite.

Mehrere Beschreibungen pro Begriff

Ein Begriff kann auch mehrere Beschreibungen haben:

HTML Kopieren

<dl>
    <dt>JavaScript</dt>
    <dd>Programmiersprache für das Web</dd>
    <dd>Ermöglicht interaktive Webseiten</dd>
    <dd>Läuft im Browser und auf dem Server (Node.js)</dd>
</dl>

JavaScript

Programmiersprache für das Web

Ermöglicht interaktive Webseiten

Läuft im Browser und auf dem Server (Node.js)

Listen mit CSS stylen

CSS bietet viele Möglichkeiten, Listen zu gestalten. Hier die wichtigsten Eigenschaften:

list-style-type

Ändert das Aufzählungszeichen oder die Nummerierung:

CSS Kopieren

/* Ungeordnete Listen */
ul.square-list {
    list-style-type: square;
}

ul.no-bullets {
    list-style-type: none;
}

/* Geordnete Listen */
ol.roman {
    list-style-type: upper-roman;
}

ol.alpha {
    list-style-type: lower-alpha;
}

list-style-position

Bestimmt, ob das Aufzählungszeichen innerhalb oder außerhalb des Textflusses steht:

CSS Kopieren

ul.inside {
    list-style-position: inside;
}

ul.outside {
    list-style-position: outside; /* Standard */
}

list-style Shorthand

Mit der Kurzschreibweise list-style kannst du alle Listen-Eigenschaften in einer Zeile kombinieren:

CSS Kopieren

/* Syntax: list-style: type position image; */

/* Nur Typ ändern */
ul { list-style: square; }

/* Typ und Position */
ul { list-style: circle inside; }

/* Mit eigenem Bild */
ul { list-style: none inside url('/icons/check.svg'); }

/* Komplett entfernen */
ul { list-style: none; }

Eigene Marker mit ::marker

Mit dem ::marker Pseudo-Element kannst du das Aufzählungszeichen direkt stylen:

CSS Kopieren

li::marker {
    color: #e74c3c;
    font-weight: bold;
    font-size: 1.2em;
}

Eigene Symbole mit list-style-image

Du kannst auch eigene Bilder als Aufzählungszeichen verwenden:

CSS Kopieren

ul.custom-marker {
    list-style-image: url('/assets/icons/checkmark.svg');
}

/* Oder mit content für mehr Kontrolle */
ul.emoji-list {
    list-style-type: none;
}

ul.emoji-list li::before {
    content: "✅ ";
}

CSS Counter für komplexe Nummerierungen

Mit CSS Countern kannst du mehrstufige Nummerierungen wie "1.1", "1.2", "2.1" erstellen - ohne JavaScript und ohne manuelle Pflege. Perfekt für Dokumentationen, Inhaltsverzeichnisse oder Rechtsdokumente.

Einfacher Counter

So ersetzt du die Standard-Nummerierung durch einen eigenen Counter:

CSS Kopieren

ol.custom-counter {
    counter-reset: section;      /* Counter initialisieren */
    list-style: none;
}

ol.custom-counter li {
    counter-increment: section;  /* Bei jedem li hochzählen */
}

ol.custom-counter li::before {
    content: counter(section) ". ";  /* Counter anzeigen */
    font-weight: bold;
    color: #e74c3c;
}

Mehrstufige Nummerierung (1.1, 1.2, ...)

Für verschachtelte Listen mit durchgehender Nummerierung:

HTML + CSS Kopieren

<ol class="multi-level">
    <li>Einleitung
        <ol>
            <li>Hintergrund</li>
            <li>Zielsetzung</li>
        </ol>
    </li>
    <li>Hauptteil
        <ol>
            <li>Methodik</li>
            <li>Ergebnisse</li>
            <li>Diskussion</li>
        </ol>
    </li>
    <li>Fazit</li>
</ol>

CSS Kopieren

.multi-level {
    counter-reset: chapter;
    list-style: none;
}

.multi-level > li {
    counter-increment: chapter;
    counter-reset: section;      /* Sub-Counter zurücksetzen */
}

.multi-level > li::before {
    content: counter(chapter) ". ";
    font-weight: bold;
}

.multi-level ol {
    counter-reset: section;
    list-style: none;
    margin-left: 1.5rem;
}

.multi-level ol li {
    counter-increment: section;
}

.multi-level ol li::before {
    content: counter(chapter) "." counter(section) " ";
    color: #666;
}

Ergebnis:

Best Practices für Listen

• Verwende Listen nur für inhaltlich zusammengehörige Punkte.
• Verschachtel Listen nur, wenn es wirklich nötig ist - zu viele Ebenen erschweren die Lesbarkeit.
• Nutze semantisch passende Listentypen - <ul> für Aufzählungen, <ol> für Schritte.
• Verwende CSS, um die Darstellung anzupassen, statt zusätzliche HTML-Tags zu verwenden.

Barrierefreiheit bei Listen

Listen sind von Natur aus barrierefrei - Screenreader erkennen sie automatisch und geben hilfreiche Informationen wie "Liste mit 5 Elementen" aus. Aber es gibt einige Fallstricke, die du kennen solltest.

Screenreader-Verhalten

Screenreader behandeln Listen besonders:

• Sie kündigen den Listentyp an ("Liste" oder "nummerierte Liste")
• Sie nennen die Anzahl der Elemente
• Bei jedem Element wird die Position genannt ("1 von 5")
• Verschachtelte Listen werden als Unterebenen erkannt

HTML Kopieren

<!-- ❌ Safari ignoriert die Listensemantik -->
<ul class="nav-list">
    <li>Home</li>
    <li>Über uns</li>
</ul>

<style>
.nav-list { list-style: none; }
</style>

<!-- ✅ Mit role="list" bleibt die Semantik erhalten -->
<ul class="nav-list" role="list">
    <li>Home</li>
    <li>Über uns</li>
</ul>

ARIA bei speziellen Listen

Für bestimmte Anwendungsfälle gibt es spezielle ARIA-Rollen:

Navigation als Liste

Navigationen werden fast immer als Listen umgesetzt - das ist semantisch korrekt und barrierefrei. Das <nav> -Element kennzeichnet den Bereich als Navigation, die <ul> strukturiert die Links.

HTML Kopieren

<nav aria-label="Hauptnavigation">
    <ul class="nav-list" role="list">
        <li><a href="/">Home</a></li>
        <li><a href="/tutorials/">Tutorials</a></li>
        <li><a href="/about/">Über uns</a></li>
        <li><a href="/contact/">Kontakt</a></li>
    </ul>
</nav>

CSS Kopieren

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1rem;
}

.nav-list a {
    text-decoration: none;
    padding: 0.5rem 1rem;
}

Horizontale Listen mit CSS

Listen werden standardmäßig vertikal dargestellt. Mit CSS kannst du sie aber einfach horizontal anordnen - perfekt für Navigationen, Social-Media-Icons oder Breadcrumbs.

Mit Flexbox (empfohlen)

Die modernste und flexibelste Methode:

ul.horizontal {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 1rem;
}

Mit inline-block

Eine ältere, aber immer noch funktionierende Methode:

ul.inline-list {
    list-style: none;
    padding: 0;
}

ul.inline-list li {
    display: inline-block;
    margin-right: 1rem;
}

Verteilung mit Flexbox

Flexbox bietet verschiedene Möglichkeiten, die Elemente zu verteilen:

CSS Kopieren

/* Gleichmäßig verteilt */
ul.spread {
    display: flex;
    justify-content: space-between;
}

/* Zentriert */
ul.centered {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

/* Am Ende ausgerichtet */
ul.end {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

Teste es selbst

Wende das Gelernte direkt an - probiere den Code aus dem Tutorial aus oder experimentiere mit eigenen Ideen.