CSS, HTML UND JAVASCRIPT MIT {STIL}

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>

Die geordnete Liste mit HTML ol ist das Gegenstück zur ungeordneten Liste. HTML ol setzt einen Index vor jeden Listeneintrag. Geordnete und ungeordnete Listen können Zusammenhänge im Schriftbild einer Seite besser herausstellen als einfache Textabsätze.

Erst CSS bietet Mechanismen, die 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.

HTML li

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.

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

Weder in geordneten noch in ungeordneten Aufzählungen gibt es Einschränkungen, denen der Inhalt 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.

Ungeordnete Listen sind auch eine beliebte Technik, 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.

Kernattribute und Ereignisse für Listenelemente

Nur Kernattribute

Kernattribute	Events
class, dir, id, lang, style, title	onclick, ondblclick onkeydown, onkeypress, onkeyup mousedown, mousemove, mouseout, mousedown, mouseup