HTML Listen - Geordnet und ungeordnet

📋 Warum Listen?

Listen sind eines der am häufigsten verwendeten HTML-Elemente. Sie strukturieren Inhalte und werden für Menüs, Navigationselemente, Aufzählungen und vieles mehr verwendet.

Zwei Arten von Listen

HTML bietet zwei Haupttypen von Listen:

• Ungeordnete Listen (<ul>): Mit Bullet Points (•)
• Geordnete Listen (<ol>): Nummeriert (1, 2, 3...)

<!-- Ungeordnete Liste -->
<ul>
    <li>Äpfel</li>
    <li>Bananen</li>
    <li>Orangen</li>
</ul>

<!-- Geordnete Liste -->
<ol>
    <li>HTML lernen</li>
    <li>CSS lernen</li>
    <li>JavaScript lernen</li>
</ol>

Detaillierte Erklärung

Ungeordnete Liste (<ul>)

• <ul> - "Unordered List" - Umschließt die gesamte Liste
• <li> - "List Item" - Jeder Eintrag in der Liste
• Wird standardmäßig mit Bullet Points (•) dargestellt
• Verwendung: Wenn die Reihenfolge keine Rolle spielt

Geordnete Liste (<ol>)

• <ol> - "Ordered List" - Umschließt die nummerierte Liste
• Wird automatisch nummeriert (1, 2, 3...)
• Verwendung: Wenn die Reihenfolge wichtig ist (z.B. Anleitungen, Rankings)

Attribute für <ol>

Du kannst das Aussehen von geordneten Listen anpassen:

<!-- Verschiedene Nummerierungen -->
<ol type="1">...</ol> <!-- Zahlen: 1, 2, 3 (Standard) -->
<ol type="A">...</ol> <!-- Großbuchstaben: A, B, C -->
<ol type="a">...</ol> <!-- Kleinbuchstaben: a, b, c -->
<ol type="I">...</ol> <!-- Römische Zahlen groß: I, II, III -->
<ol type="i">...</ol> <!-- Römische Zahlen klein: i, ii, iii -->

<!-- Bei bestimmter Zahl starten -->
<ol start="5">
    <li>Dieser Punkt ist Nummer 5</li>
    <li>Dieser ist Nummer 6</li>
</ol>

Verschachtelte Listen

Du kannst Listen ineinander verschachteln! Wichtig dabei:

• Die innere Liste kommt INNERHALB eines <li> der äußeren Liste
• Du kannst ul und ol beliebig mischen
• Der Browser rückt verschachtelte Listen automatisch ein

<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>Node.js</li>
            <li>Python</li>
            <li>PHP</li>
        </ul>
    </li>
</ul>

💡 Praktische Tipps

• Navigationmenüs: Fast alle Website-Menüs basieren auf <ul> Listen
• CSS-Styling: Mit CSS kannst du das Aussehen komplett ändern (z.B. Bullet Points entfernen)
• Barrierefreiheit: Screenreader erkennen Listen automatisch
• Semantik: Verwende Listen für Listendaten, nicht für Layouts

Best Practices

1. Verwende <ul> für Listen, bei denen die Reihenfolge egal ist
2. Verwende <ol> für Listen, bei denen die Reihenfolge wichtig ist
3. Jedes <li> sollte einen kompletten Gedanken enthalten
4. Nutze verschachtelte Listen für Hierarchien
5. Verwende aussagekräftige Listenelemente

Häufige Fehler

❌ Falsch:

<ul>
    Punkt 1
    Punkt 2
</ul>

✅ Richtig:

<ul>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
</ul>

ul>li*5

ul>li*3>ul>li*2

nav ul {
    list-style: none;
    padding: 0;
}

<ol reversed>
    <li>Platz 3</li>
    <li>Platz 2</li>
    <li>Platz 1</li>
</ol>

<dl>
    <dt>Was ist HTML?</dt>
    <dd>HyperText Markup Language</dd>
    <dt>Was ist CSS?</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

ol {
    counter-reset: custom-counter;
}
ol li {
    list-style: none;
}
ol li::before {
    counter-increment: custom-counter;
    content: "Schritt " counter(custom-counter) ": ";
}

Zusammenfassung

• <ul> = Ungeordnete Liste (Bullet Points)
• <ol> = Geordnete Liste (Nummeriert)
• <li> = Listeneintrag
• Listen können verschachtelt werden
• Mit Attributen kannst du Nummerierung anpassen
• Listen sind semantisch wichtig für Barrierefreiheit