Wie erstelle ich eine Aufzählungs- und Zahlenliste in HTML?

Listen sind eine großartige Möglichkeit, Abschnitte oder Inhalte auf einer Webseite zu organisieren. Sie verbessern die Benutzererfahrung, indem sie Informationen kategorisieren oder ähnliche Konzepte oder Elemente gruppieren. Bei der Verwendung von HTML gibt es zwei Arten von Listen: mit Aufzählungszeichen und nummeriert. In den folgenden Abschnitten erfahren Sie, wie Sie sie erstellen und ihr Aussehen, ihre Verschachtelung und ihr Format ändern.

So erstellen Sie eine Liste mit Aufzählungszeichen

Um eine Liste mit Aufzählungszeichen zu erstellen, verwenden Sie die Tags

für ungeordnete Listen und die Tags

für Listenelemente, wie im Beispiel unten gezeigt.

Beispielcode

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

Das obige Beispiel erstellt eine Aufzählungsliste mit drei Aufzählungspunkten, wie unten gezeigt.

Beispielergebnis

• Beispiel
• Beispiel2
• Beispiel3

So erstellen Sie eine nummerierte Liste

Um eine nummerierte Liste zu erstellen, verwenden Sie die geordneten Listen-Tags

und Listenelement-Tags

, wie im Beispiel unten gezeigt.

Beispielcode

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

Das obige Beispiel erstellt eine Aufzählungsliste mit drei Aufzählungspunkten, wie unten gezeigt.

Beispielergebnis

1. Beispiel 1
2. Beispiel 2
3. Beispiel 3

Stoppen und Fortsetzen einer nummerierten Liste

Wenn Sie eine nummerierte Liste erstellen, möchten Sie möglicherweise „pausieren“, um ein anderes Objekt hinzuzufügen, z. B. eine Aufzählungsliste, ein Bild oder einen Absatz. Der folgende Code erstellt eine nummerierte Liste, die von eins bis drei reicht, zeigt einen Absatz an und setzt dann die nummerierte Liste mit dem start-Attribut fort.

Beispielcode

<ol>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ol>
<p>Paragraph example.</p>
<ol start="4">
<li>Example 4</li>
<li>Example 5</li>
<li>Example 6</li>
</ol>

Das Startattribut kann ein beliebiger numerischer Wert sein und teilt der geordneten Liste mit, welche Nummer als Startnummer verwendet werden soll.

Beispielergebnis

1. Beispiel 1
2. Beispiel 2
3. Beispiel 3

Absatzbeispiel.

4. Beispiel 4
5. Beispiel 5
6. Beispiel 6

So erstellen Sie eine Aufzählungsliste in einer Zahlenliste

Sie können Listen auch ineinander stecken und so eine Unterliste erstellen. Diese als Verschachtelung bezeichnete Technik kann erreicht werden, indem eine Liste nach einem der Listenelement-Tags (

<ol>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
<ul>
<li>Bullet 1</li>
<li>Bullet 2</li>
<li>Bullet 3</li>
</ul>
<li>Example 4</li>
<li>Example 5</li>
<li>Example 6</li>
</ol>

Anwenden von CSS auf ein Aufzählungszeichen oder eine nummerierte Liste

Das folgende Beispiel zeigt, wie CSS angewendet wird, um das Bild der Aufzählungszeichen in einer Liste zu ändern.

Beispielcode

#content ul li {
 list-style-Type: none;
 padding: 0 0 4px 23px;
 background: url(https://www.computerhope.com/cdn/arrow.png) no-repeat left center;
}

In diesem Beispiel, das eine externe CSS-Datei verwendet, weisen wir die Webseite an, nur die Aufzählungszeichen im Abschnitt

zu ändern. Wenn Sie möchten, dass alle Elemente mit Aufzählungszeichen geändert werden, können Sie den #Inhalt im obigen Beispiel entfernen. In der zweiten Zeile der list-style-Type: none; weist den Browser an, keine Aufzählungszeichen anzuzeigen. In der dritten Zeile das Padding: 0 0 4px 23px; ist der Raum und die Vertiefung um die Kugeln herum. In der vierten Zeile teilt der Hintergrund dem Browser mit, dass er ein Bild als Aufzählungszeichen verwenden soll und wo es angezeigt werden soll.

Beispielergebnis

• Beispiel 1
• Beispiel 2
• Beispiel 3