Die Tags ul, ol, und li in HTML

Die Tags <ul>, <ol> und <li> in HTML: Beispiele und Tutorial

HTML bietet mit den Tags <ul>, <ol> und <li> einfache und effektive Werkzeuge, um Listen zu erstellen und Inhalte strukturiert darzustellen. Diese Tags sind ein wesentlicher Bestandteil von HTML, da sie in fast jeder Webseite verwendet werden, sei es für Menüs, Aufzählungen oder Inhaltsverzeichnisse. In diesem Artikel erklären wir die Funktion und Anwendung dieser Tags und geben praktische Beispiele, wie Sie sie effektiv einsetzen können.

Ungeordnete Liste (<ul>)

Die <ul>-Tag wird verwendet, um eine ungeordnete Liste zu erstellen. Die Einträge der Liste werden dabei standardmäßig mit Bulletpoints (Aufzählungszeichen) angezeigt.

Syntax:

<ul>
    <li>Eintrag 1</li>
    <li>Eintrag 2</li>
    <li>Eintrag 3</li>
</ul>

Darstellung im Browser:

• Eintrag 1
• Eintrag 2
• Eintrag 3

Ungeordnete Listen eignen sich hervorragend für einfache Aufzählungen, z. B. für Menüs oder Listen ohne spezifische Reihenfolge.

Geordnete Liste (<ol>)

Mit dem <ol>-Tag wird eine geordnete Liste erstellt, bei der die Einträge nummeriert werden. Diese Struktur ist besonders sinnvoll, wenn die Reihenfolge der Einträge von Bedeutung ist.

Syntax:

<ol>
    <li>Schritt 1</li>
    <li>Schritt 2</li>
    <li>Schritt 3</li>
</ol>

Darstellung im Browser:

1. Schritt 1
2. Schritt 2
3. Schritt 3

Geordnete Listen sind ideal für Anleitungen, Rankings oder jede Art von Inhalt, bei der eine Reihenfolge wichtig ist.

Listenpunkte (<li>)

Das <li>-Tag steht für „List Item“ (Listenpunkt) und wird verwendet, um einzelne Einträge in einer Liste zu definieren. Dieses Tag ist ein Kind-Element von <ul> oder <ol> und kann nicht eigenständig verwendet werden.

Syntax:

<ul>
    <li>Erster Punkt</li>
    <li>Zweiter Punkt</li>
</ul>

Verschachtelte Listen

Sowohl <ul> als auch <ol> können verschachtelt werden, um hierarchische Informationen darzustellen.

Beispiel:

<ul>
    <li>Hauptpunkt 1
        <ul>
            <li>Unterpunkt 1.1</li>
            <li>Unterpunkt 1.2</li>
        </ul>
    </li>
    <li>Hauptpunkt 2</li>
</ul>

Darstellung im Browser:

• Hauptpunkt 1
  • Unterpunkt 1.1
  • Unterpunkt 1.2
• Hauptpunkt 2

Styling von Listen mit CSS

Listen können mit CSS individuell gestaltet werden. Hier einige Beispiele:

Bulletpoints anpassen:

<style>
    ul {
        list-style-type: square;
    }
</style>

Ersetzt die runden Bulletpoints durch Quadrate.

Nummerierung anpassen:

<style>
    ol {
        list-style-type: upper-roman;
    }
</style>

Ersetzt die Standardnummerierung durch römische Ziffern.

Fazit

Die Tags <ul>, <ol> und <li> sind unverzichtbare Elemente in HTML, wenn es darum geht, Inhalte strukturiert darzustellen. Sie bieten eine einfache Möglichkeit, sowohl ungeordnete als auch geordnete Listen zu erstellen, die bei Bedarf auch verschachtelt oder individuell gestaltet werden können. Durch den Einsatz von CSS können diese Listen noch flexibler und ansprechender gestaltet werden. Probieren Sie die Beispiele aus und integrieren Sie diese vielseitigen Tags in Ihre eigenen Projekte!

Konnten wir deine Fragen zu Die Tags ul, ol, und li in HTML beantworten? Lass es uns gerne wissen, falls etwas nicht stimmen sollte. Feedback ist gerne gesehen, auch zum Thema Die Tags ul, ol, und li in HTML.