HTML-Listen
In HTML gibt es drei Arten von Listen: ungeordnete, geordnete und Beschreibungslisten. Jede von ihnen wird mit unterschiedlichen Tags definiert. Schauen wir uns das an.
HTML-Ungeordnete Listen
Wir verwenden ungeordnete Listen, um Elemente ohne numerische Reihenfolge zu gruppieren. Wenn die Reihenfolge der Listenelemente geändert wird, ändert sich die Bedeutung nicht. Um eine ungeordnete Liste zu erstellen, verwenden wir das Tag <ul>. Dieses Tag kommt paarweise vor, der Inhalt wird zwischen den öffnenden <ul>- und schließenden </ul>-Tags geschrieben.
Jedes Element einer ungeordneten Liste wird innerhalb des Tags <li> deklariert.
Beispiel für das HTML-Tag <ul> zum Erstellen einer ungeordneten Liste:
Ein Beispiel für eine ungeordnete Liste|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>An unordered list:</h1>
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is one more list item</li>
</ul>
</body>
</html>Die Elemente in ungeordneten Listen werden standardmäßig mit Aufzählungszeichen (kleine schwarze Kreise) markiert. Der Standardstil der Aufzählungszeichen für die Listenelemente kann jedoch mit einem type-Attribut geändert werden.
Das type-Attribut wird verwendet, um den Standardstil der Aufzählungszeichen für die Listenelemente zu ändern. Hinweis: Das Attribut type ist in HTML5 veraltet. Verwenden Sie stattdessen die CSS-Eigenschaft list-style-type.
Beispiel für das HTML-Tag <ul> zum Erstellen einer ungeordneten Liste, bei der die Elemente mit Aufzählungszeichen markiert sind:
Beispiel für ein type-Attribut für HTML-Listen
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul type="circle">
<li>List item </li>
<li>List item</li>
<li>List item</li>
</ul>
<ul type="square">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>Ergebnis
Sie können auch die CSS-Eigenschaft list-style-type oder list-style-image verwenden, um den Typ eines Listenelements anzugeben.
Beispiel für das HTML-Tag <ul>, verwendet mit der CSS-Eigenschaft list-style-type zum Erstellen einer ungeordneten Liste:
Beispiel für eine list-style-type-Eigenschaft
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Examples of unordered lists:</h2>
<ul style="list-style-type: square;">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
<ul style="list-style-type: disc;">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
<ul style="list-style-type: circle;">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
</body>
</html>HTML-Geordnete Listen
Eine HTML-geordnete Liste wird verwendet, um Elemente aufzulisten, die mit Zahlen markiert sind. Sie beginnt mit dem Tag <ol>. Dieses Tag kommt paarweise vor, der Inhalt wird zwischen den öffnenden <ol>- und schließenden </ol>-Tags geschrieben.
Jedes Element in der geordneten Liste beginnt mit dem öffnenden Tag <li> und endet mit dem schließenden Tag </li>.
Beispiel für das HTML-Tag <ol> zum Erstellen einer geordneten Liste:
Beispiel einer HTML-geordneten Liste|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>An ordered list:</h1>
<ol>
<li>This is List item number 1</li>
<li>This is List item number 2</li>
<li>This is List item number 3</li>
</ol>
</body>
</html>Die Elemente in der geordneten Liste werden standardmäßig mit Zahlen markiert. Wenn Sie eine geordnete Liste mit Buchstaben oder römischen Zahlen erstellen möchten, müssen Sie nur type="a" oder type="I" zum Tag <ol> hinzufügen. Hinweis: Das Attribut type ist in HTML5 veraltet. Verwenden Sie stattdessen die CSS-Eigenschaft list-style-type.
Beispiel für das HTML-Tag <ol> zum Erstellen einer geordneten Liste mit Buchstaben und römischen Zahlen:
Beispiel für unterschiedliche Markierungen von Listenelementen
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3>A numbered list:</h3>
<ol>
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>An alphabetized list:</h3>
<ol type="A">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>An alphabetized list (lowercase letters):</h3>
<ol type="a">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>A numbered list (Roman numerals):</h3>
<ol type="I">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
<h3>A numbered list (lowercase Roman numerals):</h3>
<ol type="i">
<li>Peach</li>
<li>Apricot</li>
<li>Banana</li>
<li>Strawberry</li>
</ol>
</body>
</html>HTML-Beschreibungslisten
HTML-Beschreibungslisten werden verwendet, um Begriffe mit ihren Beschreibungen zu verknüpfen, ähnlich wie in einem Wörterbuch oder Glossar.
Um eine Beschreibungslist zu erstellen, verwenden wir das Tag <dl>. Dieses Tag kommt paarweise vor.
In <dl> verwenden wir die Tags <dt> für einen Begriff/Namen in einer Beschreibungslist und <dd> für die Beschreibung eines Begriffs/Namens in einer Beschreibungslist.
Beispiel für das HTML-Tag <dl> zum Erstellen einer Beschreibungslist:
Beispiel einer Beschreibungslist|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Description Lists:</h1>
<dl>
<dt>Tea</dt>
<dd>hot drink</dd>
<dt>Juice</dt>
<dd>cold drink</dd>
</dl>
</body>
</html>Ergebnis
HTML-Verschachtelte Listen:
Eine verschachtelte Liste enthält eine Liste innerhalb einer Liste.
Beispiel einer HTML-verschachtelten Liste:
Beispiel einer HTML-verschachtelten Liste:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>A nested HTML list</h2>
<p>A nested list contains a list inside a list.</p>
<ul>
<li>Copybooks</li>
<li>
Books
<ul>
<li>Detective books</li>
<li>Roman books</li>
<li>Fairy tale books</li>
</ul>
</li>
</ul>
</body>
</html>Steuerung der Listenzählung
Standardmäßig beginnt die Nummerierung in einer geordneten Liste bei 1. Verwenden Sie das Attribut start, um die Zählung bei einer bestimmten Zahl zu beginnen. Sie können auch das Attribut reversed verwenden, um abwärts zu zählen, oder das Attribut value bei einem bestimmten <li>, um seine Nummer manuell festzulegen.
Beispiel einer HTML-Liste zum Zählen ab einer bestimmten Zahl:
Beispiel einer HTML-Liste zum Zählen ab einer bestimmten Zahl:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>List counting control</h2>
<p>By default, the numeration in an ordered list starts from 1. Use the start attribute to start counting from a specified number.</p>
<ol start="40">
<li>Pen</li>
<li>Pencil</li>
<li>Copybook</li>
</ol>
<ol type="I" start="40">
<li>Pen</li>
<li>Pencil</li>
<li>Copybook</li>
</ol>
</body>
</html>Horizontale Liste mit CSS
HTML-Listen können mit CSS auf viele verschiedene Arten gestaltet werden.
Sie können HTML-Listen mit verschiedenen CSS-Eigenschaften gestalten. Zum Beispiel können Sie ein Navigationsmenü erstellen, indem Sie die Liste horizontal anordnen.
Beispiel einer horizontalen Liste mit CSS:
Beispiel einer horizontalen Liste mit CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
background-color: #F44336;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #981816;
}
</style>
</head>
<body>
<h2>Navigation Menu Example</h2>
<p>
You can style HTML lists using different CSS properties. For example, you can create a navigation menu styling the list horizontally.
</p>
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="https://www.w3docs.com/tool/">Tools</a>
</li>
<li>
<a href="https://www.w3docs.com/snippets">Snippets</a>
</li>
<li>
<a href="https://www.w3docs.com/quiz/">Quizzes</a>
</li>
<li>
<a href="https://www.w3docs.com/string-functions/">String Functions</a>
</li>
</ul>
</body>
</html>Übung
What are the different types of HTML lists as stated in the provided article?