Übersicht
Das HTML Element unordered list <ul> wird verwendet um eine ungeordnete Liste darzustellen. Eine Sammlung von Einträgen, die keine nummerische Ordung aufweisen bzw. deren Aufzählung bedeutungslos ist. Die einzelnen Einträge der Liste werden durch das list item (<li>) Element definiert, welches das einzige Element ist, was innerhalb eines <ul>
Tag stehen darf.
- Element Typ: block-level
- Erlaubter Inhalt: li
Attribute
- type
- Wird verwendet, um das Aufzählungszeichen der Liste festzulegen. Die Werte sind in der HTML3.2 Spezifikation festgelegt und in der „transitional“ Version von HTML 4.0/4.01 sind
circle
,disc
, undsquare
aufgeführt. Der Browser kann über unterschiedliche Zeichen entscheiden, abhängig vom Grad der Verschachtelung, wenn das type Attribut nicht verwendet wird. Das WebTV Interface unterstützt auch eintriangle
Zeichen. Dieses Attribut ist veraltet, es sollte die CSS list-style-type Eigenschaft stattdessen verwendet werden.
- compact
- Gibt an, dass die Liste in einer kompakten Form gerendert werden soll. Die Interpretation dieses Attributs hängt vom Browser ab.
Beispiele
Einfaches Beispiel
<ul> <li>Erster Eintrag</li> <li>Zweiter Eintrag</li> <li>Dritter Eintrag</li> </ul>
Dieses HTML gibt das Folgende aus:
- Erster Eintrag
- Zweiter Eintrag
- Dritter Eintrag
Verschachtelte Listen
<ul> <li>Erster Eintraf</li> <li>Zweiter Eintrag <!-- Achtung, das schließende </li> Tag wird hier nicht notiert! --> <ul> <li>Zweiter Eintrag erster Untereintrag</li> <li>Zweiter Eintrag zweiter Untereintrag</li> <li>Zweiter Eintrag dritter Untereintrag</li> </ul> </li> <!-- Hier ist das schließende </li> Tag angegeben! --> <li>Dritter Eintrag</li> </ul>
Dieses HTML gibt das Folgende aus:
- Erster Eintrag
- Zweiter Eintrag
- Zweiter Eintrag erster Untereintrag
- Zweiter Eintrag zweiter Untereintrag
- Zweiter Eintrag dritter Untereintrag
- Dritter Eintrag
Verschachtelte <ul> und <ol>
<ul> <li>Erster Eintrag</li> <li>Zweiter Eintrag <!-- Achtung, das schließende </li> Tag wird hier nicht notiert! --> <ol> <li>Zweiter Eintrag erster Untereintrag</li> <li>Zweiter Eintrag zweiter Untereintrag</li> <li>Zweiter Eintrag dritter Untereintrag</li> </ol> </li> <!-- Hier ist das schließende </li> Tag angegeben! --> <li>Dritter Eintrag</li> </ul>
Dieses HTML gibt das Folgende aus:
- Erster Eintrag
- Zweiter Eintrag
- Zweiter Eintrag erster Untereintrag
- Zweiter Eintrag zweiter Untereintrag
- Zweiter Eintrag dritter Untereintrag
- Dritter Eintrag
Hinweise
Es können so viele Listen, wie man möchte verschachtelt werden, <ul>
und <ol>
in jeder Reihenfolge.
Um die Einrückung von Listen zu verändern sollte die CSS margin Eigenschaft verwendet werden.