HTML ul Listen"

Geordnete und ungeordnete Listen mit HTML ul

HTML ul erzeugt zusammen mit li-Elementen ungeordnete Listen. Die Browser markieren die Listenelemente durch bullets – Kreise oder Punkte – und heben sie durch einen Einzug vom normalen Text ab.

Geordnete und ungeordnete Listen können Zusammenhänge im Schriftbild einer Seite besser herausstellen als einfache Textabsätze.

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.

ul – ungeordnete Liste

HTML ul ist ein Block-Tag – beginnt also auf einer neuen Zeile. Innerhalb eines ul-Tags 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.

Beispiel: 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

ul – Ungeordnete Liste

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.

Listen ohne CSS formatieren

  1. Der Browser trennt die Aufzählung vom vorangehenden und folgenden Listenelement durch einen Absatz.
  2. Jeder Absatz wird um einige Pixel eingezogen und hat einen eine Index – eine ganze Zahl ab 1.
  3. CSS padding: 1em setzt den Einzug zurück an den linken Rand.
<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.

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