Stil mit {stil}

Jan 2009

HTML-Tag ul • Ungeordnete Listen mit Listenpunkt

Eine ungeordnete Aufzählung ist eine Liste von Elementen, die in irgendeiner Weise miteinander in einer logischen Verbindung stehen, aber in keiner besonderen Reihenfolge aufgezählt werden müssen. HTML stellt für ungeordnete Listen das ul-Tag zur Verfügung. Innerhalb des ul-Tags bilden LI-Elemente die einzelnen Punkte der Liste.

Die meisten Browser trennen die Aufzählung von den vorangehenden und folgenden Elementen durch einen Absatz, ziehen jeden Absatz um einige Pixel ein und setzen dem Absatz eine gefüllte Kugel – bullet – voran. Ungeordnete und geordnete Listen können verschachtelt werden und verschachtelte Aufzählungen können verschiedene Aufzählungszeichen aufweisen.

Das Gegenstück zur ungeordneten Liste ist die geordnete Liste mit dem ol-Tag, die einen Index vor jeden Listeneintrag setzt. Geordnete und ungeordnete Listen sollen in erster Linie Zusammenhänge im Schriftbild einer Seite besser herausstellen als einfache Textabsätze.

Stylesheets bieten Mechanismen, die speziell ungeordnete und geordnete Listen formatieren – z.B. die Darstellung römischer oder griechischer Ziffern in geordneten Listen, alternativer Listensymbole wie Bilder anstelle der Kugel oder die Unterdrückung der Listenkugeln. Auch der Einzug der Liste kann erst durch CSS geändert werden.

Ungeordnete Listen sind beliebte Mechanismen, um die Navigation von HTML-Seiten zu gestalten, da sie mit der Verschachtelung auch eine Hierarchie oder Ebenen mitbringen. CSS-Eigenschaften für das ul- und ol-Element unterdrücken die Listenkugel, so dass sich Kategorien und Unterkategorien gut herausstellen lassen.

HTML-Tag <ul> ... </ul> ♦ Ungeordnete Liste

Das <ul>-Tag ist die Begrenzung einer ungeordneten Aufzählung oder Liste.

Vor jedem Eintrag der Aufzählung muss ein <li>-Tag gesetzt werden.

Das <ol>-Tag wird für eine geordnete (nummerierte) Liste benutzt und das <dl>-Tag für eine Definitionsliste.

HTML-Tag<li> ... </li> ♦ Listenelement

Das <li>-Tag kennzeichnet ein Element in einer Aufzählung oder Liste. Das Tag ist sowohl in der geordneten durchnummerierten Liste ol als auch in der ungeordneten Liste ul erforderlich.

Weder in geordneten noch in ungeordneten Aufzählungen gibt es im Grunde genommen irgendwelche Einschränkungen, denen der Text in der Aufzählung unterliegt – so können die Texte z.B. beliebig lang sein. Innerhalb eines li-Elements dürfen alle HTML-Tags verwendet werden – vom p- oder ul/ul-Element bis hin zur Tabelle.

In einer ungeordneten Liste geht jedem Eintrag ein »•« (Bullet oder gefüllter Kreis), ein »–« (Spiegelstrich) oder ähnliches Symbol voran.

Attribute für ul / li

Nur Kernattribute

Beispiel für eine verschachtelte Liste

<ol>
   <li>HTML strukturiert die Inhalte einer Seite
      <ul>
         <li>durch einfache Elemente wie Überschriften und Textabsätze</li>
         <li>durch verschachtelte Elemente wie Aufzählungen, 
         Definitionslisten und Tabellen</li>
      </ul>
   </li>
   <li>CSS formatiert die Inhalte einer Webseite
      <ul>
         <li>CSS ändert Schriften, Farben und Hintergrundfarben</li>
         <li>CSS ändert Größe und Lage der HTML-Blöcke</li>
      </ul>
   </li>
</ol>

1. HTML strukturiert die Inhalte einer Seite
   • durch einfache Elemente wie Überschriften und Textabsätze
   • durch verschachtelte Elemente wie Aufzählungen, Definitionslisten und Tabellen
2. CSS formatiert die Inhalte einer Webseite
   • CSS ändert Schriften, Farben und Hintergrundfarben
   • CSS ändert Größe und Lage der HTML-Blöcke

Kernattribute und Ereignisse für Listenelemente

Zum Seitenanfang