HTML Listen

HTML Listen (engl.: HTML Lists): In HTML gibt es verschiedene Arten von Listen, die verwendet werden können, um Inhalte strukturiert und geordnet darzustellen. Die beiden häufigsten Listenarten sind ungeordnete Listen und geordnete Listen. Zusätzlich gibt es Beschreibungsliste, die zur Darstellung von Definitionen oder Paarungen verwendet werden.

1. Ungeordnete Liste

Eine ungeordnete Liste (<ul>) stellt eine Sammlung von Elementen dar, die keine spezielle Reihenfolge haben. Standardmäßig werden die Listenelemente mit Aufzählungszeichen (Bullet Points) dargestellt.

Beispiel für eine ungeordnete Liste

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

In diesem Beispiel wird eine ungeordnete Liste erstellt, wobei jedes Listenelement (<li>) durch ein Aufzählungszeichen gekennzeichnet ist.

CSS-Beispiel für die Gestaltung von Aufzählungszeichen

Sie können das Aussehen der Aufzählungszeichen mit CSS ändern, z. B. durch Verwendung von list-style-type.

ul {
    list-style-type: square;
}

Mögliche Werte für list-style-type:

• disc: Standard-Bullet (gefüllter Punkt)
• circle: Leerer Kreis
• square: Gefülltes Quadrat
• none: Keine Aufzählungszeichen

2. Geordnete Liste

Eine geordnete Liste (<ol>) stellt eine Sammlung von Elementen in einer bestimmten Reihenfolge dar. Standardmäßig werden die Elemente nummeriert.

Beispiel für eine geordnete Liste

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

In diesem Beispiel wird eine geordnete Liste erstellt, bei der jedes Listenelement nummeriert ist.

CSS-Beispiel für die Anpassung der Nummerierung

Mit list-style-type können Sie auch die Art der Nummerierung ändern.

ol {
    list-style-type: upper-roman;
}

Mögliche Werte für list-style-type in geordneten Listen:

• decimal: Standard (1, 2, 3,…)
• lower-alpha: Kleinbuchstaben (a, b, c,…)
• upper-alpha: Großbuchstaben (A, B, C,…)
• lower-roman: Römische Kleinbuchstaben (i, ii, iii,…)
• upper-roman: Römische Großbuchstaben (I, II, III,…)

Startwert einer geordneten Liste ändern

Mit dem Attribut start können Sie den Anfangswert einer geordneten Liste festlegen.

<ol start="5">
    <li>Fünftes Element</li>
    <li>Sechstes Element</li>
</ol>

In diesem Beispiel beginnt die Nummerierung bei 5.

3. Verschachtelte Listen

Listen können auch verschachtelt werden, um Hierarchien darzustellen. Das bedeutet, dass innerhalb eines Listenelements (<li>) eine neue Liste (geordnet oder ungeordnet) eingefügt werden kann.

Beispiel für eine verschachtelte Liste

<ul>
    <li>Erstes Element
        <ul>
            <li>Unterpunkt 1</li>
            <li>Unterpunkt 2</li>
        </ul>
    </li>
    <li>Zweites Element</li>
</ul>

In diesem Beispiel enthält das erste Listenelement eine verschachtelte ungeordnete Liste.

4. Beschreibungsliste

Eine Beschreibungsliste (<dl>) wird verwendet, um Begriff-Definition-Paarungen darzustellen. Diese Listenart besteht aus Begriffen (<dt>) und den dazugehörigen Beschreibungen (<dd>).

Beispiel für eine Beschreibungsliste

<dl>
    <dt>HTML</dt>
    <dd>Eine Markup-Sprache zum Erstellen von Webseiten.</dd>
    <dt>CSS</dt>
    <dd>Eine Stylesheet-Sprache, die verwendet wird, um das Layout von Webseiten zu gestalten.</dd>
</dl>

In diesem Beispiel wird jedem Begriff (HTML, CSS) eine entsprechende Beschreibung zugeordnet.

CSS für Beschreibungsliste

dl {
    font-family: Arial, sans-serif;
}

dt {
    font-weight: bold;
}

dd {
    margin-left: 20px;
}

5. Stiloptionen für Listen

Mit CSS können Sie das Aussehen von Listen und Listenelementen nach Ihren Wünschen anpassen. Dazu gehören Optionen wie das Ändern des Abstands zwischen Listenelementen, das Entfernen von Aufzählungszeichen oder das Hinzufügen von benutzerdefinierten Symbolen.

Beispiel: Liste ohne Aufzählungszeichen

ul {
    list-style-type: none;
}

ul li {
    padding-left: 10px;
}

In diesem Beispiel werden die Aufzählungszeichen entfernt, und ein Innenabstand wird hinzugefügt, um die Liste ansprechend zu gestalten.

Beispiel: Benutzerdefinierte Aufzählungszeichen

Sie können auch eigene Symbole oder Bilder als Aufzählungszeichen verwenden.

ul {
    list-style-image: url('bullet.png');
}

Hier wird ein benutzerdefiniertes Bild als Aufzählungszeichen verwendet.

Häufig gestellte Fragen