HTML Listen Ungeordnet

Ungeordnete Listen in HTML (engl.: HTML Unordered Lists) sind ein grundlegendes Mittel, um eine Reihe von Elementen in einer strukturierten und dennoch ungeordneten Form darzustellen. Im Gegensatz zu geordneten Listen (die nummeriert sind) werden ungeordnete Listen typischerweise mit Aufzählungszeichen (Bullets) angezeigt. Sie eignen sich hervorragend, um verschiedene Punkte oder Elemente darzustellen, ohne eine explizite Reihenfolge.

1. Grundstruktur einer ungeordneten Liste

Eine ungeordnete Liste wird in HTML mit dem <ul>-Tag erstellt, wobei jedes Listenelement durch ein <li>-Tag definiert wird.

Beispiel für eine einfache ungeordnete Liste

<ul>
    <li>Erstes Element</li>
    <li>Zweites Element</li>
    <li>Drittes Element</li>
</ul>

Erklärung:

• Das <ul>-Tag umschließt die gesamte Liste.
• Jedes Listenelement wird durch ein <li>-Tag repräsentiert. In der Standarddarstellung werden diese Elemente mit Aufzählungszeichen (Bullets) angezeigt.

2. Verschachtelte ungeordnete Listen

Manchmal möchten Sie Listen innerhalb von Listen erstellen, um eine Hierarchie darzustellen. Dies wird als verschachtelte Listen bezeichnet.

Beispiel für eine verschachtelte Liste

<ul>
    <li>Hauptpunkt 1</li>
    <li>Hauptpunkt 2
        <ul>
            <li>Unterpunkt 2.1</li>
            <li>Unterpunkt 2.2</li>
        </ul>
    </li>
    <li>Hauptpunkt 3</li>
</ul>

Erklärung:

• Sie können eine ungeordnete Liste innerhalb eines <li>-Tags platzieren, um eine verschachtelte Liste zu erstellen.
• Der zweite Hauptpunkt enthält eine weitere Liste mit Unterpunkten.

3. Typen von Aufzählungszeichen

Standardmäßig verwendet HTML runde Aufzählungszeichen (Bullets) für ungeordnete Listen. Sie können jedoch den Typ des Aufzählungszeichens über die CSS-Eigenschaft list-style-type ändern.

Beispiel für verschiedene Aufzählungszeichen

<ul style="list-style-type: disc;">
    <li>Aufzählung mit Disc (Standard)</li>
</ul>
<ul style="list-style-type: circle;">
    <li>Aufzählung mit Kreis</li>
</ul>
<ul style="list-style-type: square;">
    <li>Aufzählung mit Quadrat</li>
</ul>

Erklärung:

• list-style-type: disc; ist die Standardeinstellung und zeigt gefüllte Kreise als Aufzählungszeichen.
• list-style-type: circle; zeigt leere Kreise an.
• list-style-type: square; zeigt Quadrate als Aufzählungszeichen an.

4. Entfernen von Aufzählungszeichen

Es kann Situationen geben, in denen Sie die Aufzählungszeichen ganz entfernen möchten. Dies kann über die CSS-Eigenschaft list-style-type: none; erreicht werden.

Beispiel ohne Aufzählungszeichen

<ul style="list-style-type: none;">
    <li>Kein Aufzählungszeichen 1</li>
    <li>Kein Aufzählungszeichen 2</li>
    <li>Kein Aufzählungszeichen 3</li>
</ul>

Erklärung:

• Mit list-style-type: none; werden die Aufzählungszeichen der Liste vollständig entfernt.

5. Listeneinrückungen anpassen

Die Standarddarstellung von ungeordneten Listen enthält eine Einrückung. Sie können diese Einrückung mit der CSS-Eigenschaft padding-left oder margin-left anpassen.

Beispiel für angepasste Einrückungen

<ul style="padding-left: 20px;">
    <li>Erstes Element mit Einrückung</li>
    <li>Zweites Element mit Einrückung</li>
</ul>

<ul style="margin-left: 50px;">
    <li>Erstes Element mit größerer Einrückung</li>
    <li>Zweites Element mit größerer Einrückung</li>
</ul>

Erklärung:

• padding-left und margin-left steuern, wie weit die Liste vom linken Rand entfernt ist.

6. Stilisierte Listen mit CSS

Mit CSS können Sie die Darstellung von Listen weit über die Standardoptionen hinaus anpassen. Sie können Farben, Hintergründe und Schriftarten ändern.

Beispiel für eine stilisierte Liste

<ul style="list-style-type: square; color: blue; font-size: 18px;">
    <li>Stilisiertes Element 1</li>
    <li>Stilisiertes Element 2</li>
    <li>Stilisiertes Element 3</li>
</ul>

Erklärung:

• Die Liste verwendet quadratische Aufzählungszeichen, eine blaue Schriftfarbe und eine größere Schriftgröße.

Häufig gestellte Fragen