HTML ul – ungeordnete Listen (mit Listenpunkt)

Aufzählungen, Listen

Eine ungeordnete Aufzählung ist eine Liste von Elementen, die miteinander in einer logischen Verbindung stehen, aber in keiner besonderen Reihenfolge aufgezählt werden müssen. In Listen mit HTML ol sind die Listenpunkte numeriert.

Die einzelnen Listenelemente sollten kurz bleiben, damit die Übersicht nicht verloren geht.

ul – ungeordnete Liste

HTML ul ist ein Block-Element – beginnt also auf einer neuen Zeile. Direkt innerhalb eines ul-Elements dürfen nur li-Tags liegen. Vor jedem Eintrag der Aufzählung muss ein <li>-Tag gesetzt werden.

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.

<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

Menüs für die Navigation

Ungeordnete Listen ul sind eine beliebte Technik für die Navigation, da sie mit der Verschachtelung eine Hierarchie oder Ebenen mitbringen. Das HTML-Markup ist einfach, spiegelt die Hierarchie der Inhalte wieder und gibt Benutzern mit Readern einen direkten Überblick.

CSS-Eigenschaften für das ul- und ol-Element unterdrücken die Listenkugel, so dass sich Kategorien und Unterkategorien gut herausstellen lassen.

Neben dem altgedienten ul-Element hat HTML ein weiteres Listenelement mitgebracht: menu. Das Element basiert ebenfalls auf Listenelementen mit li, aber hat eine andere Bedeutung: So steht menu für eine Toolbar oder Werkzeugleiste und soll Benutzeraktionen vorbehalten sein.

Listen ohne CSS formatieren

<ol type="a">
    <li>
        Der Browser trennt die Aufzählung …
    </li>
    <li>
        Jeder Absatz wird um einige Pixel …
    </li>
    <li>
        CSS padding: 1em setzt den …
    </li>
</ol>

HTML li

Direkt unterhalb von ul-Elementen dürfen nur li-Elemente liegen.

Das <li>-Tag trennt die einzelnen Elemente der Aufzählung. Das li-Tag ist sowohl in der geordneten Liste ol als auch in der ungeordneten Liste ul erforderlich.

Innerhalb eines li-Elements dürfen alle HTML-Tags verwendet werden – vom p- oder ul/ol-Element mit einer tiefer verschachtelten Liste oder Aufzählung bis hin zu kompletten Tabellen.

Formatierung mit CSS

CSS bietet Mechanismen für die Formatierung von ungeordneten und geordneten Listen – z.B. die Darstellung römischer oder griechischer Ziffern, alternativer Listensymbole anstelle der Kugel oder die Unterdrückung der Listenkugeln. Auch der Einzug vor geordneten und ungeordneten Listen kann nicht mit HTML, sondern erst durch CSS geändert werden.

Verschachtelte Listen

Ungeordnete und nummerierte Listen können verschachtelt werden, um mehrstufige Aufzählungen zu erzeugen.

<ol>
   <li>Geordnete Liste mit ol und ungeordnete Listen mit ul können ineinander verschachtelt werden.
	  <ul>
		 <li>ul-Tags können unter li-Tags sitzen</li>
		 <li>ol-Tags können unter li-Tags sitzen</li>
	  </ul>
   </li>
   <li>Hierarchische Listen mit ul werden auch für die Naviation eingesetzt.
	  <ol>
		 <li>Die Hierarchie spiegelt den Aufbau der Site.</li>
		 <li>Listenelemente lassen sich durch CSS an die Design-Vorgaben anpassen.</li>
	  </ol>
   </li>
</ol>