HTML <ul>-Tag
Das HTML <ul>-Tag wird verwendet, um eine ungeordnete Liste zu definieren, die eine Sammlung von Elementen ohne numerische Reihenfolge gruppiert. Wenn die Reihenfolge der Listenelemente geändert wird, ändert sich die Bedeutung nicht. Normalerweise werden die Elemente einer ungeordneten Liste mit einem Aufzählungszeichen angezeigt. Es kann verschiedene Formen haben, wie einen Kreis, einen Punkt oder ein Quadrat.
Jedes Element einer ungeordneten Liste wird innerhalb des <li>-Tags deklariert.
Das <ul>-Tag ist ein Block-Element und nimmt den gesamten verfügbaren horizontalen Raum ein. Seine Höhe hängt vom Inhalt innerhalb des Containers ab. Eine ungeordnete Liste wird typischerweise als Aufzählungsliste gerendert.
Das <ol>-Tag stellt ebenfalls eine Liste von Elementen dar und erstellt eine geordnete Liste. Es unterscheidet sich jedoch von <ul>, da die Reihenfolge im <ol>-Tag eine Bedeutung hat. Standardmäßig werden die Elemente einer geordneten Liste mit Zahlen angezeigt.
Die <ul>- und <ol>-Tags können beliebig tief verschachtelt werden. Die verschachtelten Listen können zwischen <ul> und <ol> abwechseln. Beachten Sie jedoch, dass beim Verschachteln einer Liste in einer anderen die innere Liste in ein <li>-Element der äußeren Liste eingefügt werden muss. Das bedeutet, dass das direkte Kind einer Liste ein <li>-Element sein muss, dieses <li>-Element jedoch eine weitere Liste enthalten kann. Es ist möglich, das Aufzählungszeichen mit CSS zu ändern. Die semantische Bedeutung, die durch die Wahl des Listentyps ausgedrückt wird, kann jedoch nicht mit CSS geändert werden.
Syntax
Das <ul>-Tag kommt in Paaren vor. Der Inhalt wird zwischen dem öffnenden (<ul>) und dem schließenden (</ul>) Tag geschrieben.
Beispiel für das HTML <ul>-Tag:
Beispiel für das HTML <ul>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>Ergebnis
Sie können das type-Attribut verwenden, um den Standard-Aufzählungsstil für die Listenelemente zu ändern. Hinweis: Das type-Attribut ist in HTML5 veraltet. Für die moderne Webentwicklung wird empfohlen, stattdessen CSS list-style-type zu verwenden.
Beispiel für das HTML <ul>-Tag mit dem type-Attribut:
Beispiel für das HTML <ul>-Tag mit type-Attribut
<!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>Sie können auch die CSS-Eigenschaft list-style-type oder list-style-image verwenden, um den Typ eines Listenelements zu definieren.
Beispiel für das HTML <ul>-Tag in Kombination mit der CSS list-style-type-Eigenschaft:
Beispiel für das HTML <ul>-Tag mit der CSS 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>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| compact | compact | Gibt an, dass die Liste in einem kompakten Stil gerendert werden soll. Wird in HTML 5 nicht unterstützt. |
| type | disc square circle | Legt die Art des Aufzählungszeichens fest. Wird in HTML 5 nicht unterstützt. |
Das <ul>-Tag unterstützt auch die Globalen Attribute und die Ereignisattribute.
So stylen Sie ein HTML <ul>-Tag
{
"tag_name": "ul"
}Practice
Welche der folgenden Aussagen über das HTML <ul>-Tag sind laut dem Artikel https://www.w3docs.com/learn-html/html-ul-tag.html korrekt?